Android RelativeLayout example

In Android, RelativeLayout let you position your component base on the nearby (relative or sibling) component’s position. It’s the most flexible layout, that allow you to position your component to display in anywhere you want (if you know how to “relative” it).

In RelativeLayout, you can use “above, below, left and right” to arrange the component position, for example, display a “button1″ below “button2″, or display “button3″ on right of the “button1″.

Note
The RelativeLayout is very flexible, but hard to master it. Suggest you use Eclipse IDE to drag the component, then view study the Eclipse generated XML layout code to understand how to code “relative” components.

In this tutorial, we show you how to arrange / position button, textview and editbox via “RelativeLayout“.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. RelativeLayout

Open “res/layout/main.xml” file, add components and position it via “RelativeLayout“. Read below XML code, quite verbose to tell you where to display the component.

File : res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
 
    <Button
        android:id="@+id/btnButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_toRightOf="@+id/btnButton1"/>
 
     <Button
        android:id="@+id/btnButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_below="@+id/btnButton1"/>
 
     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/btnButton3"
         android:layout_marginTop="94dp"
         android:text="User :"
         android:textAppearance="?android:attr/textAppearanceLarge" />
 
     <EditText
         android:id="@+id/editText1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/textView1"
         android:layout_toRightOf="@+id/btnButton3" />
 
     <Button
         android:id="@+id/btnSubmit"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_below="@+id/editText1"
         android:text="Submit" />
 
</RelativeLayout>

2. Demo

See result, above XML code will generate following output.

Download Source Code

Download it – Android-RelativeLayout-Example.zip (15 KB)

References

mkyong

Founder of Mkyong.com, love Java and open source stuffs. Follow him on Twitter, or befriend him on Facebook or Google Plus.

Here are some of my recommended Books

Popular Posts

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/outerContainer" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/frameLowerMenu" android:layout_width="match_parent" android:layout_height="20dp" android:layout_below="@+id/frameContent" android:background="#ff29e1d8" /> <FrameLayout android:id="@+id/frameNext" android:layout_width="100dp" android:layout_height="600dp" android:layout_toRightOf="@+id/frameContent" android:layout_below="@+id/frameUpperMenu" android:background="#ffd2c92b" /> <FrameLayout android:id="@+id/frameContent" android:layout_width="1060dp" android:layout_height="600dp" android:layout_below="@+id/frameUpperMenu" android:layout_toRightOf="@+id/framePrevious" android:background="#ffc91db1" /> <FrameLayout android:id="@+id/framePrevious" android:layout_width="100dp" android:layout_height="600dp" android:layout_below="@+id/frameContentState" android:background="#ffca983d" /> <FrameLayout android:id="@+id/frameContentState" android:layout_width="150dp" android:layout_height="20dp" android:layout_toRightOf="@+id/frameUpperMenu" android:background="#ff29c14b" /> <FrameLayout android:id="@+id/frameUpperMenu" android:layout_width="600dp" android:layout_height="20dp" android:background="#ffe32323" /> </RelativeLayout>

Med April 15, 2013 at 2:58 am
Really you’re Maallem
Android Guru April 13, 2013 at 10:53 pm
How to check whether Wi-Fi internet access is active or not in a device. Take a look at the post:
http://android.programmerguru.com/android-check-wifi-internet-connection/
ummhn eymir April 10, 2013 at 3:42 pm
Hello,
This website is very useful for me. Thank you very much for your sharings.However ? have a problem with relative layout. i want to manage multiple radio button in multiple row in Android ,so it will work as group also.I tried relative and table layout in many ways. ?t cant run.How can I partition android radio button group into rows or columns without using different radio button groups.
vj March 4, 2013 at 1:24 pm
it is very usefull for me
Hanumant Mandge December 19, 2012 at 11:23 pm
Thanks mr mkyong you are examples are very helpfull for biginer….
Kumar November 30, 2012 at 11:45 pm
Hi all,
I am new to Android. I don’t know whether its possible. if yes, pls provide me some example. I have a button in main.xml. Is it possibile to access this button and add this button in others layouts?
Thanks in advance

Pete September 8, 2012 at 12:09 am

Hi,

maybe you can help me with my little problem.
I designed this template on a Asus Tranformer Pad TF300T.
It works very well.

But when i test it on a smaller Device or for example on a Galaxy Nexus, it is real garbage.

So my Question: why the DP`s don`t scale?

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    android:id=&quot;@+id/outerContainer&quot;
    android:layout_width=&quot;match_parent&quot;
    android:layout_height=&quot;match_parent&quot;&gt;
    &lt;FrameLayout
        android:id=&quot;@+id/frameLowerMenu&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;20dp&quot;
        android:layout_below=&quot;@+id/frameContent&quot;
        android:background=&quot;#ff29e1d8&quot; /&gt;
    &lt;FrameLayout
        android:id=&quot;@+id/frameNext&quot;
        android:layout_width=&quot;100dp&quot;
        android:layout_height=&quot;600dp&quot;
        android:layout_toRightOf=&quot;@+id/frameContent&quot;
        android:layout_below=&quot;@+id/frameUpperMenu&quot;
        android:background=&quot;#ffd2c92b&quot; /&gt;
    &lt;FrameLayout
        android:id=&quot;@+id/frameContent&quot;
        android:layout_width=&quot;1060dp&quot;
        android:layout_height=&quot;600dp&quot;
        android:layout_below=&quot;@+id/frameUpperMenu&quot;  
        android:layout_toRightOf=&quot;@+id/framePrevious&quot;
        android:background=&quot;#ffc91db1&quot; /&gt;
    &lt;FrameLayout
        android:id=&quot;@+id/framePrevious&quot;
        android:layout_width=&quot;100dp&quot;
        android:layout_height=&quot;600dp&quot;
        android:layout_below=&quot;@+id/frameContentState&quot;
        android:background=&quot;#ffca983d&quot; /&gt;
    &lt;FrameLayout
        android:id=&quot;@+id/frameContentState&quot;
        android:layout_width=&quot;150dp&quot;
        android:layout_height=&quot;20dp&quot;
        android:layout_toRightOf=&quot;@+id/frameUpperMenu&quot;
        android:background=&quot;#ff29c14b&quot; /&gt;
    &lt;FrameLayout
        android:id=&quot;@+id/frameUpperMenu&quot;
        android:layout_width=&quot;600dp&quot;
        android:layout_height=&quot;20dp&quot;
        android:background=&quot;#ffe32323&quot; /&gt;
&lt;/RelativeLayout&gt;

Kind Regards,

Pete

abhinav July 28, 2012 at 5:40 pm
How do i run your example.zip in my computer. the package is package com.mkyong.android; it creates a problem.
obrienne January 18, 2012 at 10:13 pm
And how you feed the RelativeLayout, and how you add items to it dinamically in code?
Donna January 7, 2012 at 9:55 am
How is this “a tutorial”?
It just an XML file and a screen-shot. The same screen-shot everyone sees in Eclipse.
Nothing is explained or taught at all.
- mkyong January 16, 2012 at 10:20 pm
  The XML file itself is pretty self-explanatory.
  - Michael July 18, 2012 at 8:29 pm
    I agree with mr. mkyong there is nothing more to explain. Thanx for help :)

Android RelativeLayout example

1. RelativeLayout

2. Demo

Download Source Code

References

Popular Posts

What is your opinion?

Do you know the answer?

1. RelativeLayout

2. Demo

Download Source Code

References

Related Posts

Popular Posts

What is your opinion?

Do you know the answer?