Skip to content
{ 2010 01 05 }

Android Layout Tutorial

LinearLayout

LinearLayout organizes elements along a single line. You specify whether that line is verticle or horizontal using android:orientation. Here is a sample Layout XML using LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
    android:layout_height="fill_parent">
     <Button 
    	android:id="@+id/backbutton"
    	android:text="Back"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <TextView
    	android:text="First Name"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <EditText
    	android:width="100px"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <TextView
    	android:text="Last Name"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <EditText
    	android:width="100px"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" /> 
</LinearLayout>

Here is a screenshot of the result of the above XML.

LinearLayout

Here is a screenshot of the same XML except that the android:orientation has been changed to horizontal.

LinearLayout2
You might note that the EditText field at the end of the line has had its width reduced in order to fit. Android will try to make adjustments when necessary to fit items on screen. The last page of this tutorial will cover one method to help deal with this.

I mentioned on the first page that Layouts can be nested. LinearLayout is frequently nested, with horizontal and vertical layouts mixed. Here is an example of this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
    android:layout_height="fill_parent">
     <Button 
    	android:id="@+id/backbutton"
    	android:text="Back"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" />
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content">
	    <TextView
	    	android:text="First Name"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	    <EditText
	    	android:width="100px"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />	
    </LinearLayout>
    <LinearLayout
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content">    
	    <TextView
	    	android:text="Last Name"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
	    <EditText
	    	android:width="100px"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content" />
    </LinearLayout> 
</LinearLayout>

As you can see we have a Vertical LinearLayout whose children are a button, and two horizontal LinearLayouts. Each horizontal LinearLayout has two child controls. You should note that in the child LinearLayout elements I used android:layout_height=”wrap_content” instead of fill_parent. If I had used fill_parent the first name TextView and EditView would have taken all of the available space on the screen, and the Last Name would not have been displayed. Here is what this XML does display.

LinearNested

Nested Layouts do not have to be of one type. I could, for example, have a LinearLayout as one of the children in a FrameLayout.

Next: RelativeLayout

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 *