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

About the Author

author image
mkyong
Founder of Mkyong.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

Leave a Reply

avatar
newest oldest most voted
habe
Guest
habe

test

David Kemptner
Guest
David Kemptner

thanks for this article. I am quite new to Android and tried to make a RelativeLayout too. Can anybody help me with that question: http://stackoverflow.com/questions/22306452/relativelayout-displays-incorrect-on-real-device

Nag
Guest
Nag

am unable to understanding yours nots

Nag
Guest
Nag

Please post android layout examples with java code

surbhi
Guest
surbhi

How can this be done dynamically

Med
Guest
Med

Really you’re Maallem

Android Guru
Guest
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
Guest
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
Guest
vj

it is very usefull for me

Hanumant Mandge
Guest
Hanumant Mandge

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

Kumar
Guest
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
Guest
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? <?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"… Read more »
abhinav
Guest
abhinav

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

trackback
Android Tutorial

[…] LinearLayout example Most common layout, arranges components in horizontal or vertical order.Android RelativeLayout example Most flexible layout, arranges components base on the “relative” or sibling […]

trackback
Android difficulties in GUI Design | muthumanict

[…] Relative layout can be used, attributes like parentBottom , parentTop will help you to place the Views with in the screen. […]

obrienne
Guest
obrienne

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

Donna
Guest
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.