Pin Me

Development Tutorial on Working with Layouts in Android

written by: Jbeerdev•edited by: Simon Hill•updated: 5/4/2010

When we are working with Android we inevitably have to deal with layouts and widgets. Let's have a look at 2 layouts: AbsoluteLayout and RelativeLayout. We will examine their differences and also how we can construct a solid graphical interface with these two elements.

  • slide 1 of 4

    Lately I have been working hard with the two layouts I will cover in this section, and I wanted to share my experience and knowledge about these two important and essential containers.

    As I explained in another article: Create a user interface using XML: Layouts, we can work with different containers to hold our widgets. Depending on the container (layout) we use, the elements inside of it will be displayed in different ways. In this article we are going to focus on the Relative and the Absolute Layouts.

    Both of them are very useful containers, however we have to know which to use in each case. With AbsoluteLayouts, the position of the elements is absolute, which means that the widget location is set according to an X,Y position on the screen, taking into account that the (0,0) position is the top-left corner of the screen.

    On the other hand, widgets in RelativeLayout are positioned according to the parent or the position of other widget. In a colloquial way, it will be something like “Put this button below this image”.

    Let's examine both layouts in a little bit more depth so we can see the attributes we can use for each one.

  • slide 2 of 4

    AbsoluteLayout

    As I said before, the AbsoluteLayout main feature is that you can position the elements inside of it, with absolute coordinates. Absolute layouts are not very flexible and they are very hard to maintain: Imagine that you are working with a device (in my case I always work with my HTC Magic or HTC MyTouch in the USA), you create a screen with buttons, images and text and you position them using AbsoluteLayouts. You then create your application and you put it on the market. With time other Android mobiles appear, some with a screen larger than yours, some smaller. What will happen to your application on these phones? They will have problems displaying your screens because they will be dislocated. So take this into account, use them in the right way and in the right place, and combined with other Layout-elements.

    To place an element inside an AbsoluteLayout, you have to put the following lines in it:

    android:layout_x=”Xpx”

    android:layout_y=”Ypx”

    Example

    <Button android:id="@+id/button"

    android:layout_width="wrap_content" android:layout_height="wrap_content"

    android:layout_x="115px"

    android:layout_y="128px">

    </Button>

    It really is that easy.

  • slide 3 of 4

    RelativeLayout

    RelativeLayouts are more complex to work with from my point of view, but they are well worth the effort. First we need to have a very clear idea of how the elements of the screen are going to be displayed.

    Let's have a look at some of the most important attributes we can use in a widget to place it in a RelativeLayout.

    android:layout_alignLeft = “@+id/widget”

    android:layout_alignTop = “@+id/widget”

    android:layout_alignBottom = “@+id/widget”

    android:layout_alignRight = “@+id/widget”

    Using the layout_align attribute, we are making the left/top/bottom/right edge of this view match the left/top/bottom/right edge of the given anchor view ID.

    android:layout_alignParentLeft=”true|false”

    android:layout_alignParentTop=”true|false”

    android:layout_alignParentBottom=”true|false”

    android:layout_alignParentRight=”true|false”

    Using the layout_alignParent attributes, with the true or false value, we place the view at the left/top/bottom/right of its parent.

    android:layout_below=”@+id/widget”

    android:layout_above=”@+id/widget”

    With this parameter we can place a view above or below another we specify in the value.

    Hint!-> Views relationship are evaluated "in one pass", so, to assure your screen works how you want, if View A depends on view B, put B before A in the layout.

  • slide 4 of 4

    Conclusion

    As we have seen, the RelativeLayout attributes are more complex, but they assure us the best way to display elements in the screen, without thinking of screen sizes. But AbsoluteLayouts are useful too! Don't stop using both of them.

    In real applications, do we use just RelativeLayouts or AbsoluteLayouts? Of course not, they are always mixed and they live with LinearLayouts, TableLayouts etc...

    Hopefully you now know a bit more about user interface design. Good luck and feel free to ask me questions.

    Hint!-> Very important!! Some days ago, Google declared the AbsoluteLayout element is deprecated. It means that in future versions of the SDK it will not be available!!!! Better not to use it!

How-to developt applications in Android: More Widgets!

In this serie of articles we will have a deeper look to a serie or widgets, that will help us to create more complete applications.
  1. Guide to Creating User Alerts in the Android Programming Environment
  2. Showing Complex Alerts to the User in the Android Programming Environment
  3. Development Tutorial on Working with Layouts in Android
  4. How to Use Spinners with Arrays in Android Development Environment