Skip to content
{ 2010 01 05 }

Android Layout Tutorial

RelativeLayout

RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is arguably the most complicated layout, and we need several properties to actually get the layout we want.

Relative To Container

These properties will layout elements relative to the parent container.

  • android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
  • android:layout_alignParentLeft – Places the left of the element on the left side of the container
  • android:layout_alignParentRight – Places the right of the element on the right side of the container
  • android:layout_alignParentTop – Places the element at the top of the container
  • android:layout_centerHorizontal – Centers the element horizontally within its parent container
  • android:layout_centerInParent – Centers the element both horizontally and vertically within its container
  • android:layout_centerVertical – Centers the element vertically within its parent container

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen. The value for each of these elements is the id of the element you are using to layout the new element. Each element that is used in this way must have an ID defined using android:id=”@+id/XXXXX” where XXXXX is replaced with the desired id. You use “@id/XXXXX” to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error.

  • android:layout_above – Places the element above the specified element
  • android:layout_below – Places the element below the specified element
  • android:layout_toLeftOf – Places the element to the left of the specified element
  • android:layout_toRightOf – Places the element to the right of the specified element

Alignment With Other Elements

These properties allow you to specify how elements are aligned in relation to other elements.

  • android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
  • android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
  • android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
  • android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
  • android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Here is a sample XML Layout

<RelativeLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<Button 
 		android:id="@+id/backbutton"
 		android:text="Back"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content" />
	<TextView
   		android:id="@+id/firstName"
   		android:text="First Name"
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"
   		android:layout_below="@id/backbutton" />
	<EditText
		android:width="100px"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_toRightOf="@id/firstName"
		android:layout_alignBaseline="@id/firstName" />
	<TextView
		android:id="@+id/lastName"
		android:text="Last Name"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_below="@id/firstName" />
	<EditText
		android:width="100px"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_toRightOf="@id/lastName"
		android:layout_alignBaseline="@id/lastName" />
</RelativeLayout>

Here is the screen produced by that XML.

Relative1

I wanted to show this to you because the first time I made a RelativeLayout I did exactly this and then looked at the screen and said, “Hang on a minute, that’s not what I wanted!” The problem here is that when Android draws the TextView lastName below the TextView firstName it only sets aside the space it needs for the TextView. Android only reads the Layout XML one time so it doesn’t know that an EditView is the next item and doesn’t plan for it. So when the EditView is drawn to the right of the TextView it only has the height of the TextView to work with so it overlaps the EditView above it. Here is the Layout XML I wrote to create the form the way it should look.

<RelativeLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	xmlns:android="http://schemas.android.com/apk/res/android">
	<Button 
 		android:id="@+id/backbutton"
 		android:text="Back"
 		android:layout_width="wrap_content"
 		android:layout_height="wrap_content" />
	<TextView
   		android:id="@+id/firstName"
   		android:text="First Name"
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"
   		android:layout_below="@id/backbutton" />
	<EditText
		android:id="@+id/editFirstName"
		android:width="100px"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_toRightOf="@id/firstName"
		android:layout_below="@id/backbutton"/>
	<EditText
		android:id="@+id/editLastName"
		android:width="100px"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_below="@id/editFirstName"
		android:layout_alignLeft="@id/editFirstName"/>
	<TextView
		android:id="@+id/lastName"
		android:text="Last Name"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_toLeftOf="@id/editLastName"
		android:layout_below="@id/editFirstName" />	
</RelativeLayout>

You probably noticed that I had to rearrange the elements in the XML since, as I already mentioned, you cannot reference an element that has not already been laid out. Here is what the updated RelativeLayout produces.

Relative2

Next: TableLayout

Pages: 1 2 3 4 5 6 7
Posted by Sheridan on Tuesday, January 5, 2010, at 10:31 pm. Filed under Beginner. Follow any responses to this post with its comments RSS feed. You can post a comment or trackback from your blog.

{ 49 } Comments

  1. Derrick | March 30, 2010 at 10:22 am | Permalink

    You have a very nice set of tutorials here! I am curious as to handling rotation of the physical device, such as the user effectively switching from portrait to landscape viewing of an application. Are there callbacks that are given, or queries that can be performed by us, as the developer, or is this automatic?

  2. Dave Germiquet | April 24, 2010 at 8:22 pm | Permalink

    Hi,

    This was a great tutorial and an easy read. I understand alot more on how google’s xml display/gui works.

    Thanks a bundle!

  3. jen | May 25, 2010 at 1:41 pm | Permalink

    Small typo here — the original code sample says ‘android:orientation=”horizontal”‘, but should say ‘android:orientation=”vertical”‘ instead.

  4. radhika | July 23, 2010 at 2:16 am | Permalink

    Helped me alot……as I am beginner as a professional….

  5. juan mendez | August 28, 2010 at 1:46 pm | Permalink

    I really liked your tutorial, and how easy it was to understand everything by explanation, graphic content and code. This helps tremendously. thanks. :)

  6. vins | August 31, 2010 at 4:00 am | Permalink

    Nice one..

  7. Ashok Parmar | August 31, 2010 at 5:39 am | Permalink

    Nice One :)

  8. Belarmino | September 3, 2010 at 8:03 am | Permalink

    I am learning Android and I hope this tutorial helps me.

  9. Gaurang talwadkar | September 9, 2010 at 12:08 am | Permalink

    This tutorial is really helpful and easy to understand.
    can you send me downloadable pdf file of this tutorial.

  10. Igor | September 22, 2010 at 2:19 pm | Permalink

    Thanks! RelativeLayout very very good.

  11. Hesam | October 31, 2010 at 10:50 am | Permalink

    Hi,

    Your goal is awesome. I read some articles and I’m sure you and your goal are the best.

    I’ll be happy if I can help you, although I’m beginner. ;)

    Warm Regards
    Hesam

  12. george | November 8, 2010 at 6:17 am | Permalink

    very nice& very useful to the begginers….. thanks lot….

  13. Afonso Lage | November 9, 2010 at 8:29 am | Permalink

    Great tutorial man. Thanks for sharing this information with us, i’m so glad becouse i found this.

  14. oxygenyoyo.com | November 15, 2010 at 10:52 pm | Permalink

    Your post is very good tutorial.
    so, I would like to ask you some question.

    I have to tell you before . I don’t know that is correct or not.

    Could I translate your post in thai language ?
    of cause , I will tell people that post where it come from ( credit ).

    if no, it’s ok for me. I still follow your blog : )

    thank you

  15. Alexey | December 26, 2010 at 1:54 pm | Permalink

    Excellent article! Thanks a lot!

  16. bella | February 17, 2011 at 2:16 am | Permalink

    simple :) easy to understand for first tutorial
    thanx!

  17. zainab | March 22, 2011 at 2:00 pm | Permalink

    there is much good information i like it :)

  18. Prasanna Kumar | March 29, 2011 at 8:28 am | Permalink

    Very nice!
    Its always good to understand things with examples.

  19. ruchi kumari | March 29, 2011 at 11:41 pm | Permalink

    Hi,
    Nice tutorial.
    I want one label, one edittext and one button horizontally.
    My requirement is on changing the screen size, my label and button size should be fix but my edittext should be flexible.
    I mean that if we increase window size then only the edittext box size should change to adjust the screen size.
    please help.
    Thanks.

  20. ajay patel | April 12, 2011 at 4:27 am | Permalink

    thanks… its helpful to me in my android appp

  21. Alok Tiwari | April 19, 2011 at 5:01 am | Permalink

    good explanation so thanks dear and try to provide the pdf or ppt

  22. Sebastien | April 25, 2011 at 4:04 pm | Permalink

    I wonder why the button is located in the first column and the text view of the “first name” and “last name” starts on the second column. It would be nice to explain a solution for that.

    Thanks for the tutorial.

  23. Sebastien | April 25, 2011 at 4:13 pm | Permalink

    Sorry, I thought my comment is associated to the TableLayout page only. This is in reference to the TableLayout.

    ”I wonder why the button is located in the first column and the text view of the “first name” and “last name” starts on the second column. It would be nice to explain a solution for that.”

    Also,there was another article that said that embedded LinearLayout is more cpu extensive than a single RelativeLayout. Can you comment on the efficiency of different layouts. It looks like TableLayout is more straight forward than RelativeLayout but does it cost more than LinearLayout?

  24. mukla.c | May 6, 2011 at 4:27 am | Permalink

    thnx……….
    good e,ample

  25. iler | May 14, 2011 at 4:31 am | Permalink

    Dite mois si sa marche

  26. adji | June 6, 2011 at 6:46 am | Permalink

    thanks buddy. it’s nice article about android. layout layout n layout :) if you need any ebook about android. please visit my blog http://free-ebook-collections.co.nr/ thanks

  27. Jilani | June 9, 2011 at 7:33 am | Permalink

    Very good.i like it

  28. Onur | June 20, 2011 at 12:53 am | Permalink

    hi, can we use this absolutelayout same as HTML CSS like just using x and y. can we use right/left and bottom/top.

    thanks.

  29. Jebel | June 20, 2011 at 1:22 am | Permalink

    Great! You resolve my problem. Thanks.

  30. Pramod | July 1, 2011 at 10:55 pm | Permalink

    Thanks for the lucid explanation! It is very helpful for a beginner like me .

  31. andbeg | July 5, 2011 at 11:44 pm | Permalink

    Thanks in advance for this knowledge

  32. Nixit | July 10, 2011 at 9:25 am | Permalink

    Thanks!!

  33. Victor | July 12, 2011 at 5:14 am | Permalink

    im new to android and i made a layout but it doesnt show the imagebuttons and text could you tell me why? Here it is:

  34. Dheeraj Bapat | July 20, 2011 at 10:46 pm | Permalink

    Thanks for very clear explanation.

  35. Ademar Oliveira | July 27, 2011 at 1:17 pm | Permalink

    Muito bom ^.^

    seria legal ter o código para fazer em java também ;)

  36. Pawel | July 28, 2011 at 9:16 am | Permalink

    Hello – I can’t understand why when I do it in emulator – every thing is on the top of the screen???? Please tell me – why on EARTH(!) my two buttons (“add” and “print”) appears always on the top of the screen overlapping gallery view?? Why this has to be so painful???? I just set the gravity to “TOP” for gallery and to “BOTTOM” for those two buttons in tablelayout, as you can see in my xml code. what the heck is that???? Below is my XML:

  37. Jai prakash | August 8, 2011 at 6:41 am | Permalink

    nice

  38. Edward Walker | August 15, 2011 at 9:23 am | Permalink

    Great stuff it help you with a good starting point UI layouts…thanks much!!

  39. riper | August 16, 2011 at 2:54 pm | Permalink

    Great tutorial! Thanks for sharing your knowledge!

    Cheers
    riper

  40. anil changlani | September 20, 2011 at 10:41 pm | Permalink

    I want to know how to increase font size in Eclipse IDE

  41. ayrina | September 22, 2011 at 9:43 am | Permalink

    hello,

    thanks for giving such a great infromation..

    but whant to know which layour would bebeat for mt application taht it supports all my device sizes..
    Thanks,
    Ayrina

  42. vikash kuamr karn | September 26, 2011 at 4:52 am | Permalink

    I found this site very helpful…. very concise yet informative

  43. Kala | October 5, 2011 at 2:28 pm | Permalink

    Thanks man.. this helps a lot :)

  44. Thankful Developer | October 28, 2011 at 11:26 am | Permalink

    Thank you very much,
    this makes android layouting much easier,

  45. kARAN | October 31, 2011 at 8:22 am | Permalink

    very nice

  46. Sheridan | November 8, 2011 at 3:02 pm | Permalink

    Absolutely, feel free to translate it as long as you provide proper credit.

  47. Nadeem | November 18, 2011 at 3:42 am | Permalink

    Very nice tutorial i realy learn more from it

  48. Unnati | November 28, 2011 at 8:17 am | Permalink

    Hey Hi!!! You have given really nice exaple and so nicely explained everything.Just wanted to add that in linear layout output of horizontal orientation is given as output of vertical one’s. And thanks its was really helping to understand layouts.. :)

  49. Arshad Ali Soomro | December 10, 2011 at 3:29 pm | Permalink

    This one is great Keep going on!!

{ 2 } Trackbacks

  1. Create Android Interfaces | May 11, 2010 at 11:32 am | Permalink

    [...] learn Android you can find also a great resources for how to use Android AbsoluteLayout, FrameLayout, [...]

  2. Android Layout Tutorial | developersmania | September 12, 2011 at 5:49 am | Permalink

    [...] AbsoluteLayout FrameLayout LinearLayout RelativeLayout TableLayout [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *