Advance Android Relative Layout Example

Relative Layout is an android view group to align all childrens relative to other view or its parent. Relative layout give you flexibiliy to place childs wherever you want. In the previous example, I have give some basic example of Relative Layout. Now, I will give you how to create a more complex relative layout example.

Our goal is to create layout like this:

See the following step by step to create above layout:

1. Aligning child to top left of parent

Actually, by default every childs is aligned to top left of parent in relative layout. So we needn’t add any special attribute to align chilc in top left of parent. But you can align child to top left of parent by adding [cci]android:layout_alignParentLeft=”true”[/cci] and [cci]android:layout_alignParentTop=”true”[/cci] attributes.

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
[/sourcecode]

 

2. Aligning child in top right of parent

To align child in top right of parent, add the following attributes [cci]android:layout_alignParentRight=”true”[/cci] and [cci]android:layout_alignParentTop=”true”[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
[/sourcecode]

 

3. Aligning child in bottom left of parent

To align child in bottom left of parent, add the following attributes [cci]android:layout_alignParentBottom=”true”[/cci] and [cci]android:layout_alignParentLeft=”true”[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
[/sourcecode]

 

4. Aligning child in bottom right of parent

To align child in bottom right of parent, add the following attributes [cci]android:layout_alignParentBottom=”true”[/cci] and [cci]android:layout_alignParentRight=”true”[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" />
[/sourcecode]

 

5. Align child in the center of parent

This is our center child and you must give it an [cci]id[/cci] as our other 4 childs aligned relative this child. To align a child center of the parent, add the following attribute [cci]android:layout_centerInParent=”true”[/cci]. This attribute will align our child center to the parent, vertically and horizontally.

[sourcecode lang=”xml” highlight=”6″]
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button5"
android:layout_centerInParent="true"/>
[/sourcecode]

 

6. Align child in top left of the center child

To align child in top left of the center child, add the following attributes [cci]android:layout_toLeftOf=”@id/button5″[/cci] and [cci]android:layout_above=”@id/button5″[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toLeftOf="@id/button5"
android:layout_above="@id/button5"/>
[/sourcecode]

 

 

7. Align child in top right of the center child

To align child in top right of the center child, add the following attributes [cci]android:layout_toRightOf=”@id/button5″[/cci] and [cci]android:layout_above=”@id/button5″[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toRightOf="@id/button5"
android:layout_above="@id/button5"/>
[/sourcecode]

 

8. Align child in bottom right of the center child

To align child in bottom right of the center child, add the following attributes [cci]android:layout_toRightOf=”@id/button5″[/cci] and [cci]android:layout_below=”@id/button5″[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toRightOf="@id/button5"
android:layout_below="@id/button5"/>
[/sourcecode]

 

9. Align child in bottom left of the center child

To align child in bottom left of the center child, add the following attributes [cci]android:layout_toLeftOf=”@id/button5″[/cci] and [cci]android:layout_below=”@id/button5″[/cci].

[sourcecode lang=”xml” highlight=”6,7″]
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toLeftOf="@id/button5"
android:layout_below="@id/button5"/>
[/sourcecode]

 

Final Source Codes

Below is the final source codes:

[sourcecode lang=”xml”]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button4"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" />

<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button5"
android:layout_centerInParent="true"/>

<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toLeftOf="@id/button5"
android:layout_above="@id/button5"/>
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button7"
android:layout_toRightOf="@id/button5"
android:layout_above="@id/button5"/>
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button8"
android:layout_toRightOf="@id/button5"
android:layout_below="@id/button5"/>
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button9"
android:layout_toLeftOf="@id/button5"
android:layout_below="@id/button5"/>
</RelativeLayout>
[/sourcecode]