RelativeLayout in Android (XML)

Posted: June 13, 2011 in Android

RelativeLayout in Android (XML)

RelativeLayout, from the word Relative, the concept here is that every children is a relative of the other. The catch here is that they are related by where you put them according to the other components, these relationship are above a component, below a component, on the left of the component and on the right of the components and some others like align to positions. Here we shall cover the above, below, left of, right of.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="@+id/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>

<Button android:id="@+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="@+id/topBtn"
android:layout_toLeftOf="@+id/topBtn">
</Button>

<Button android:id="@+id/bottomBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom"
android:layout_below="@+id/leftBtn"
android:layout_toRightOf="@+id/leftBtn">
</Button>

<Button android:id="@+id/rightBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:layout_above="@+id/bottomBtn"
android:layout_toRightOf="@+id/bottomBtn">
</Button>
</RelativeLayout>

Quick Explanation Take a look at the picture, here you shall see Top is aligned to the middle (android:layout_centerHorizontal=”true”), the Left button is below top (android:layout_below=”@+id/topBtn”) and also is on its left. The Bottom is below leftBtn and on the right of leftBtn too. Lastly the Right is above and on the right of bottomBtn. Here is how you can set this as your layout in your java code

Reference

http://www.tutorialforandroid.com/2009/01/relativelayout-in-android-xml.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s