Learn Android : Android Layout Tutorial

{ 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.

{ 67 } Comments

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?
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!
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.
radhika | July 23, 2010 at 2:16 am | Permalink

Helped me alot……as I am beginner as a professional….
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.
vins | August 31, 2010 at 4:00 am | Permalink

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

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

I am learning Android and I hope this tutorial helps me.
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.
Igor | September 22, 2010 at 2:19 pm | Permalink

Thanks! RelativeLayout very very good.
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
george | November 8, 2010 at 6:17 am | Permalink

very nice& very useful to the begginers….. thanks lot….
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.
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
Alexey | December 26, 2010 at 1:54 pm | Permalink

Excellent article! Thanks a lot!
bella | February 17, 2011 at 2:16 am | Permalink

simple easy to understand for first tutorial
thanx!
zainab | March 22, 2011 at 2:00 pm | Permalink

there is much good information i like it
Prasanna Kumar | March 29, 2011 at 8:28 am | Permalink

Very nice!
Its always good to understand things with examples.
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.
ajay patel | April 12, 2011 at 4:27 am | Permalink

thanks… its helpful to me in my android appp
Alok Tiwari | April 19, 2011 at 5:01 am | Permalink

good explanation so thanks dear and try to provide the pdf or ppt
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.
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?
mukla.c | May 6, 2011 at 4:27 am | Permalink

thnx……….
good e,ample
iler | May 14, 2011 at 4:31 am | Permalink

Dite mois si sa marche
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
Jilani | June 9, 2011 at 7:33 am | Permalink

Very good.i like it
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.
Jebel | June 20, 2011 at 1:22 am | Permalink

Great! You resolve my problem. Thanks.
Pramod | July 1, 2011 at 10:55 pm | Permalink

Thanks for the lucid explanation! It is very helpful for a beginner like me .
andbeg | July 5, 2011 at 11:44 pm | Permalink

Thanks in advance for this knowledge
Nixit | July 10, 2011 at 9:25 am | Permalink

Thanks!!
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:
Dheeraj Bapat | July 20, 2011 at 10:46 pm | Permalink

Thanks for very clear explanation.
Ademar Oliveira | July 27, 2011 at 1:17 pm | Permalink

Muito bom ^.^

seria legal ter o código para fazer em java também
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:
Jai prakash | August 8, 2011 at 6:41 am | Permalink

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

Great stuff it help you with a good starting point UI layouts…thanks much!!
riper | August 16, 2011 at 2:54 pm | Permalink

Great tutorial! Thanks for sharing your knowledge!

Cheers
riper
anil changlani | September 20, 2011 at 10:41 pm | Permalink

I want to know how to increase font size in Eclipse IDE
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
vikash kuamr karn | September 26, 2011 at 4:52 am | Permalink

I found this site very helpful…. very concise yet informative
Kala | October 5, 2011 at 2:28 pm | Permalink

Thanks man.. this helps a lot
Thankful Developer | October 28, 2011 at 11:26 am | Permalink

Thank you very much,
this makes android layouting much easier,
kARAN | October 31, 2011 at 8:22 am | Permalink

very nice
Sheridan | November 8, 2011 at 3:02 pm | Permalink

Absolutely, feel free to translate it as long as you provide proper credit.
Nadeem | November 18, 2011 at 3:42 am | Permalink

Very nice tutorial i realy learn more from it
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..
Arshad Ali Soomro | December 10, 2011 at 3:29 pm | Permalink

This one is great Keep going on!!
Uggabugga | May 31, 2012 at 6:13 am | Permalink

I’m sorry but don’t ever use PIXELS for Android…. fail
Asif | June 1, 2012 at 12:57 am | Permalink

Great article…very easy fully explained concepts. Thank you
vikas | June 2, 2012 at 10:34 am | Permalink

thanx a lot sir for this tutorial.. it was really help full.. with this tutorials beginner will defiantly feel android application is easy development..
Sachin | June 21, 2012 at 1:00 am | Permalink

Awesome tutorial….thanks… keep posting….
anton | June 23, 2012 at 8:21 pm | Permalink

Great stuff – you nailed this one.
omkar | July 5, 2012 at 5:06 am | Permalink

good going man.. m fully satisfied…….
Mike | July 5, 2012 at 12:22 pm | Permalink

Good Tutorial!! Thank’s
vivek | July 7, 2012 at 11:37 pm | Permalink

Love to see how effectively and simply u make understood the layouts basic…great tutorial
thanks a lot..
Vikash | July 11, 2012 at 12:48 am | Permalink

This is the most stunning layout tutorial I ever read…thanx man….very good
alterego | July 19, 2012 at 8:01 am | Permalink

hello, this tutorial is a great one, keep going so that people like me can learn esear in these way…and by the way, I descovered recentley Sublime Text 2. it is very powerfull. I apologize for my english.Thanks!
nock starett | July 19, 2012 at 8:21 am | Permalink

This is really sweet of you………..thanks for the help
KS NAYAKA | August 4, 2012 at 12:43 pm | Permalink

thanks for info….it helped me a lot
John | August 7, 2012 at 3:40 am | Permalink

Cool one.. ! I just learned layouts now, whats next as a beginer?
krishna | August 9, 2012 at 4:32 am | Permalink

Great!!!! thanks a lot….
Jason | August 20, 2012 at 10:22 pm | Permalink

Thanks so much for the clear tutorial. I especially like how you provided a screenshot with each XML example.

A bit miffed that layouts keep changing as technology progresses. The Android 3.2 way of layouts has me specifying resolutions in the layout structure.

res/layout/main_activity.xml # For phones
res/layout-sw600dp/main_activity.xml # For 7” tablets
res/layout-sw720dp/main_activity.xml # For 10” tablets

Ah well… thanks again for the jump start into understanding the different types of layouts.
venkat | August 24, 2012 at 1:01 am | Permalink

I got a lot of content from this tutorial. I expected u to provide same kind of tutorials in further
Alexandre Verri | August 28, 2012 at 1:15 am | Permalink

Great given explanation, keep it up dude… ty a bunch
parmar nitesh | August 29, 2012 at 12:39 am | Permalink

nice ….

{ 3 } Trackbacks

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, [...]
Android Layout Tutorial | developersmania | September 12, 2011 at 5:49 am | Permalink

[...] AbsoluteLayout FrameLayout LinearLayout RelativeLayout TableLayout [...]
android tips im using | imjeee | Jie Lian blog | May 24, 2012 at 10:13 pm | Permalink

[...] layout tutorial http://www.learn-android.com/2010/01/05/android-layout-tutorial/4/ [...]

Learn Android

Android Layout Tutorial

RelativeLayout

Relative To Container

Relative To Other Elements

Alignment With Other Elements

{ 67 } Comments

{ 3 } Trackbacks

Post a Comment

Home

Pages

Categories

RSS Feeds

Blog Search