Learn Android : Android Layout Tutorial

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.

{ 35 } Comments

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 ….
cahosting | February 13, 2014 at 2:07 am | Permalink

Thank you. The article is great
Android App Dev | March 5, 2014 at 2:37 am | Permalink

I’m more than happy to discover this great site. I wanted to thank you for
ones time just for this wonderful read!! I definitely loved every
bit of it and I have you saved as a favorite to check out new information on your web site.
monster dr dre beats | March 12, 2014 at 7:48 am | Permalink

I just like the helpful info you provide for your articles. I’ll bookmark your weblog and check again right here regularly. I’m relatively sure I will learn many new stuff proper right here! Good luck for the following!
vigrx yahoo answers | March 23, 2014 at 2:06 am | Permalink

Spot on with this write-up, I truly believe this website needs a great deal more
attention. I’ll probably be returning to read through
more, thanks for the advice!
Jeune et Jolie | April 6, 2014 at 12:29 pm | Permalink

I’d like to thank you for the efforts you have put in writing this blog.
I really hope to see the same high-grade content by you later on as
well. In truth, your creative writing abilities
has inspired me to get my very own website
now 😉
Tushar Patil | April 18, 2014 at 10:34 pm | Permalink

Thanks a lot……..!
Awesome tutorial….
Boshaprin Kymaro | April 27, 2014 at 8:16 am | Permalink

I wanted to thank you for this fantastic read!!
I certainly enjoyed every bit of it. I have you book marked to check out new stuff you
post…
rencontres en ligne | July 25, 2014 at 6:10 pm | Permalink

I blog frequently and I really appreciate your information. This great article has truly peaked my interest.
I will book mark your website and keep checking for new
information about once a week. I opted in for your Feed as well.
Lestat | August 1, 2014 at 3:28 am | Permalink

A Very useful and easy to understand tutorial, thank you very much!
26 hatha yoga | August 19, 2014 at 9:22 am | Permalink

I couldn’t resist commenting. Well written!
Sibyl | August 28, 2014 at 12:23 am | Permalink

Awesome article.
Surya | August 29, 2014 at 12:45 am | Permalink

Thanks for this tutorial, this really saved my time as i was following an android tutorial and got stuck due to different layouts available.
probiotic | September 9, 2014 at 10:36 am | Permalink

Hello there, just became alert to your blog through Google, and
found that it is truly informative. I am gonna watch out for brussels.
I will be grateful if you continue this in future. Many
people will be benefited from your writing. Cheers!
suyog | September 10, 2014 at 11:56 pm | Permalink

thanx mate.that helps alot to understand the Relative Layout for new Programmer.
www.pinterest.com | September 21, 2014 at 4:22 am | Permalink

Hello there! This is my first visit to your blog!
We are a group of volunteers and starting a new project in a community in the same niche.
Your blog provided us valuable information to work on. You have done
a extraordinary job!
zalek | September 23, 2014 at 9:36 am | Permalink

Thanks, great site for learning Android!

zb