Tutorial 7 : Android Relative Layout Example

In this tutorial, we will discuss how to apply RelativeLayout in Android application layout. RelativeLayout is the most flexible layout in Android application, this is because it allow you to position the component to display at anywhere you want. In RelativeLayout, we can use "left, right, above and below" to arrange the component position.

First, we would like to create a new RelativeLayout by using the step, File>New>XML>XML Layout File. A similar situation as previous tutorial, a window will pop-out. But this time, we need to change the root type became RelativeLayout and named your layout with the name you want.

Figure 7.1

Then, place two TextView, two EditText and one Button into the XML layout. Change both of the text display of the TextView to be "Name" and "Age" respectively. Besides that, change the text on the button become "OK" as well. Therefore, the XML layout now might be shown as Figure 7.2.

Figure 7.2

Next, before we rearrange the components in the XML layout. One important thing we need to do is define id for each of them. This is because they are using it to identify and recognize each other.

There are two ways to define id for the component. The first one is through the properties window and second one is add a line command of android:id="..." in each of the component. 

We would like to define "tvName" and "tvAge" as the id for Name and Age respectively. For the two EditText components, one of it defined as "txtName" and another defined as "txtAge" for their id. Lastly, the button's id is defined as "btnOK". In this stage, the XML code should be similar as below.

     <?xml version="1.0" encoding="utf-8"?>
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Name"
             android:id="@+id/tvName"
             .................................................. />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Age"
            android:id="@+id/tvAge"
            .................................................... />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtName"
            .................................................... />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtAge"
            ..................................................... />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OK"
            android:id="@+id/btnOK"
            ...................................................... />
     </RelativeLayout>

After defined the id for each components, we can start to rearrange them by using few commands such as android:layout_below="...", android:layout_toRightof="...", android:layout_toLeftof="...", android:layout_ alignRight="...", android:layout_alignLeft="..." and others. You can get more information about the syntax and parameter at here. The final XML layout is shown in the Figure 7.3. You can get the XML layout code at this link.

Figure 7.3

In next tutorial, we will learn about how to create a table layout for Android application. Always keep reviewing my blog to get the latest news. :)