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.
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.
Next: TableLayout
{ 83 } Comments
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?
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!
Small typo here — the original code sample says ‘android:orientation=”horizontal”‘, but should say ‘android:orientation=”vertical”‘ instead.
Helped me alot……as I am beginner as a professional….
I really liked your tutorial, and how easy it was to understand everything by explanation, graphic content and code. This helps tremendously. thanks.
Nice one..
Nice One
I am learning Android and I hope this tutorial helps me.
This tutorial is really helpful and easy to understand.
can you send me downloadable pdf file of this tutorial.
Thanks! RelativeLayout very very good.
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
very nice& very useful to the begginers….. thanks lot….
Great tutorial man. Thanks for sharing this information with us, i’m so glad becouse i found this.
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
Excellent article! Thanks a lot!
simple
easy to understand for first tutorial
thanx!
there is much good information i like it
Very nice!
Its always good to understand things with examples.
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.
thanks… its helpful to me in my android appp
good explanation so thanks dear and try to provide the pdf or ppt
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.
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?
thnx……….
good e,ample
Dite mois si sa marche
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
Very good.i like it
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.
Great! You resolve my problem. Thanks.
Thanks for the lucid explanation! It is very helpful for a beginner like me .
Thanks in advance for this knowledge
Thanks!!
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:
Thanks for very clear explanation.
Muito bom ^.^
seria legal ter o código para fazer em java também
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:
nice
Great stuff it help you with a good starting point UI layouts…thanks much!!
Great tutorial! Thanks for sharing your knowledge!
Cheers
riper
I want to know how to increase font size in Eclipse IDE
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
I found this site very helpful…. very concise yet informative
Thanks man.. this helps a lot
Thank you very much,
this makes android layouting much easier,
very nice
Absolutely, feel free to translate it as long as you provide proper credit.
Very nice tutorial i realy learn more from it
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..
This one is great Keep going on!!
I’m sorry but don’t ever use PIXELS for Android…. fail
Great article…very easy fully explained concepts. Thank you
thanx a lot sir for this tutorial.. it was really help full.. with this tutorials beginner will defiantly feel android application is easy development..
Awesome tutorial….thanks… keep posting….
Great stuff – you nailed this one.
good going man.. m fully satisfied…….
Good Tutorial!! Thank’s
Love to see how effectively and simply u make understood the layouts basic…great tutorial
thanks a lot..
This is the most stunning layout tutorial I ever read…thanx man….very good
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!
This is really sweet of you………..thanks for the help
thanks for info….it helped me a lot
Cool one.. ! I just learned layouts now, whats next as a beginer?
Great!!!! thanks a lot….
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.
I got a lot of content from this tutorial. I expected u to provide same kind of tutorials in further
Great given explanation, keep it up dude… ty a bunch
nice ….
Thank you. The article is great
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.
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!
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!
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
Thanks a lot……..!
Awesome tutorial….
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…
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.
A Very useful and easy to understand tutorial, thank you very much!
I couldn’t resist commenting. Well written!
Awesome article.
Thanks for this tutorial, this really saved my time as i was following an android tutorial and got stuck due to different layouts available.
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!
thanx mate.that helps alot to understand the Relative Layout for new Programmer.
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!
Thanks, great site for learning Android!
zb
{ 3 } Trackbacks
[...] learn Android you can find also a great resources for how to use Android AbsoluteLayout, FrameLayout, [...]
[...] AbsoluteLayout FrameLayout LinearLayout RelativeLayout TableLayout [...]
[...] layout tutorial http://www.learn-android.com/2010/01/05/android-layout-tutorial/4/ [...]
Post a Comment