«

»

A Visual Guide to Relative Layouts In Android

You have come to this post for two reasons. The first is that you’ve been told in the literature that you can optimize your LinearLayout abuse by using RelativeLayouts instead. The second reason is that you probably read the documentation and were like WTF is this hot mess? Let’s help each other out by walking through the 4 kinds of Relative Layout use cases.

  1. Target view position in relation to parenting View Group (i.e. a layout container)
  2. Target view alignment in relation to parenting View Group
  3. Target view position in relation to another View
  4. Target view alignment in relation to another View

We’ll use Jack and Jill buttons to demonstrate this. The first two categories are in relation to a parent layout (Jack and the parent view group). The last two categories show laying out in relation to another View (i.e. Jack + Jill)

The implications of understanding Relative Layouts inside and out will help build simpler layouts anywhere from overall Application look + feel right down to how an individual list item should have it’s elements displayed.

If you are going to try any of these layouts and they don’t work for you in the Eclipse Graphical Layout preview, you must restart Eclipse to see it as per this StackOverflow post!!!!

1) Target view position in relation to parenting View Group

android:layout_centerInParent
If true, centers this child horizontally and vertically within its parent.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_centerInParent="true"/>
     
</RelativeLayout>

android:layout_centerHorizontal
If true, centers this child horizontally within its parent. Note how this code does not define a y position, it is assumed y = 0.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_centerHorizontal="true"/>
     
</RelativeLayout>

android:layout_centerVertical
If true, centers this child vertically within its parent. Note how this code does not explicitly define an x coordinate position. It is assumed that x = 0.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_centerVertical="true"/>
     
</RelativeLayout>

2) Target view alignment in relation to parenting View Group
android:layout_alignParentTop
If true, makes the top edge of this view match the top edge of the parent. Note the GREEN ARROW at the top show it’s aligned in that direction. Also note that it shows up on the far left side because there is no x-value defined. It is assumed x = 0.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignParentTop="true"/>
     
</RelativeLayout>

android:layout_alignParentRight
If true, makes the right edge of this view match the right edge of the parent. Note the green arrow pointing to the right edge. x position is auto calculated but the assumption here is y = 0.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignParentRight="true"/>
     
</RelativeLayout>

android:layout_alignParentBottom
If true, makes the bottom edge of this view match the bottom edge of the parent. As you can see here, both the child and the parent have a common bottom edge. The child is assumed to be x=0. y positioning is calculated to always push the child down to the bottom edge of the parent minus the height of the child.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignParentBottom="true"/>
     
</RelativeLayout>

android:layout_alignParentLeft
If true, makes the left edge of this view match the left edge of the parent. Note that Jack shows up at the top because it assumed y=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignParentLeft="true"/>
     
</RelativeLayout>

3) Target view position relation to another View

For the following examples, we’ll use two Views in the same View Group. For the “Jill” view, we’ll anchor to the middle of the ViewGroup using centerInParent=true. Note that “Jack” has no x,y alignment or positioning defined. So Jack is appearing the old fashion default location of x=0,y=0 i.e. the top left corner of it’s parent.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"/>

</RelativeLayout>

android:layout_above
Positions the bottom edge of this view above the given anchor view ID. It shows up on the far left because it is assumed x=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_above="@id/btnJill"/>

</RelativeLayout>

android:layout_below
Positions the top edge of this view below the given anchor view ID. It shows up on the far left because it is assumed x=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_below="@id/btnJill"/>

</RelativeLayout>

android:layout_toLeftOf
Positions the right edge of this view to the left of the given anchor view ID. This is showing at the top because it is assumed y=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_toLeftOf="@id/btnJill"/>

</RelativeLayout>

android:layout_toRightOf
Positions the left edge of this view to the right of the given anchor view ID. This is showing at the top because it is assumed y=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_toRightOf="@id/btnJill"/>

</RelativeLayout>

4) Target view alignment in relation to another view

android:layout_alignBaseline
Positions the baseline of this view on the baseline of the given anchor view ID. Baseline is the bottom edge of the text.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignBaseline="@id/btnJill"/>
    
</RelativeLayout>

android:layout_alignBottom
Makes the bottom edge of this view match the bottom edge of the given anchor view ID.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignBottom="@id/btnJill"/>
    
</RelativeLayout>

android:layout_alignLeft
Makes the left edge of this view match the left edge of the given anchor view ID. It’s assumed y=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignLeft="@id/btnJill"/>
    
</RelativeLayout>

android:layout_alignRight
Makes the right edge of this view match the right edge of the given anchor view ID. It is assumed y=0 unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignRight="@id/btnJill"/>
    
</RelativeLayout>

android:layout_alignTop
Makes the top edge of this view match the top edge of the given anchor view ID. It is assumed x=0, unless otherwise.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <Button android:text="Jill"
        android:id="@+id/btnJill"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btnJack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jack"
        android:layout_alignTop="@id/btnJill"/>
    
</RelativeLayout>
Share

About the author

Mark Lapasa

Mark Lapasa is a mobile developer who has released Native Android apps for both phones and tablets. He collaborates with business analysts, development and design teams to deliver engaging user experiences at the client-tier. He has many years of experience developing user interfaces for Enterprise Mobile, Healthcare, Financial, Social Gaming, and Online Gambling sectors. He blogs at http://knowledge.lapasa.net

10 comments

1 ping

  1. Milan Gokhale says:

    Excellent post, Mark. Relative layouts are a must, given all of the fragmentation issues that Android developers have to deal with. Any plans of creating a part 2 to go into things like alignParentTop? That gave me nightmares for awhile. Take care. :)

  2. mlapasa says:

    Thx Milan, I haven’t run into any layout nightmares since I did this deep dive. Working with alignParent* is probably the easiest to work with because the parent is implicit. The others are slightly invovled because you have to explicitly reference another. Maybe alignParentTop was a nightmare cause at first one would think it would show up at the top in the middle (which is alignParentTop + centerHorizontal) ?

  3. Milan Gokhale says:

    Yup, exactly. The multiple alignments tripped me up at first. I’m also really disappointed in Google that they haven’t come up with a more elegant UI solution.

  4. Ernest leitch says:

    Ive had a few wrestling matches with android trying to get things laid out just right. It can be a nightmare for sure. This is a good explanitation of how the layout properties work.

  5. Mike says:

    Really useful article thanks. Love developing on the android platform but layouts have always been a pain.

  6. JG says:

    Thanks, man. Very helpful.

  7. Felipe Machado says:

    I really, really, really wished google had taken their time to write a guide as good as yours. Thank you very much!

  8. Sandra says:

    I just started to learn Android development and I must say that this article saved me. I was struggling with RelativeLayout because in a lecture we were left with “play around and see what happens”. That is not so easy to do, if there is no understanding of what exactly happens if you set that or that to be true.

    This should be a reading resource in any kind of online course which teaches Android development.

  9. Steve says:

    I’d love your thoughts on this issue I have with three objects: jack, jill, the hill. Jack and Jill are next to eachother, but have variable height where sometimes jack is taller and sometimes jill is taller. The hill needs to be below the tallest one. I can’t figure out how to align the hill below BOTH of them.

  10. Mark Lapasa says:

    You can align the hill to be below both of them if jack and jill are contained in the same container like a relative or linear layout. So instead of trying fiddle with jack and jill separately, you can treat them as one.

    Also if jack and jill need to be standing beside each other on even ground, both can be anchored to the surrounding container by setting android:layout_alignParentBottom = true.

  1. Android SDK ImageButton stretches when Gravity.Right | PHP Developer Resource says:

    [...] is a tutorial: A Visual Guide to Relative Layouts In Android. Tagged: AndroidgravityImageButtonquestionssdkstretch /* * * CONFIGURATION VARIABLES: [...]

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>