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.

android relativelayout demo

Download Source Code

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

References

  1. Android RelativeLayout Example
  2. Android RelativeLayout JavaDoc
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

  • Pingback: water ionizer()

  • Pingback: electrician vs millwright()

  • Pingback: electrician school los angeles()

  • Pingback: house blue()

  • Pingback: zak?ad szklarski piotrk√≥w trybunalski()

  • Pingback: sneak a peek at this web-site.()

  • Pingback: check here()

  • Pingback: awp 10 electrician's tote()

  • Pingback: go to my blog()

  • Pingback: pay day loans()

  • Pingback: pay per day loans plan()

  • Pingback: water ionizer loans()

  • Pingback: water ionizer()

  • Pingback: stop parking()

  • Pingback: parking()

  • Pingback: Business DIRECTV()

  • Pingback: enagic kangen water()

  • Pingback: kangen water()

  • Pingback: best bottled water()

  • Pingback: alkaline water()

  • Pingback: watch movies online()

  • Pingback: watch free movies online()

  • Pingback: stream movies()

  • Pingback: tv online, online tv()

  • Pingback: free weight loss ebook()

  • Pingback: Blue Coaster33()

  • Nag

    am unable to understanding yours nots

    • Nag

      Please post android layout examples with java code

  • surbhi

    How can this be done dynamically

  • Med

    Really you’re Maallem

  • http://android.programmerguru.com Android Guru

    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

    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

    it is very usefull for me

  • Hanumant Mandge

    Thanks mr mkyong you are examples are very helpfull for biginer….

  • Kumar

    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

    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

    How do i run your example.zip in my computer. the package is package com.mkyong.android; it creates a problem.

  • Pingback: Android Tutorial()

  • Pingback: Android difficulties in GUI Design | muthumanict()

  • obrienne

    And how you feed the RelativeLayout, and how you add items to it dinamically in code?

  • Donna

    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.

    • http://www.mkyong.com mkyong

      The XML file itself is pretty self-explanatory.

      • Michael

        I agree with mr. mkyong there is nothing more to explain. Thanx for help :)