Tuesday, August 11, 2009

Tutorial : How to have two buttons on each side of the screen

Sometimes, things are quite confusing in the Android World.

I wanted to have one two buttons, on each side of the screen ( the famous next and previous buttons ).
I though it would be really easy to do.
I was wrong...

I had already done something quite similar for multiple column list view ( here ), but the trick I actually used for the multiple column view was not applicable here.
For the multiple column view, I could use a text view with a left aligned text, and another big text view taking all the remaining space with right aligned text.
As the textviews are invisibles ( only the text inside was visible ), the trick was unnoticable.

So now, my first try was to put my buttons in a linear layout, and have one with a right gravity, and another with a left gravity.
But it just failed : the two buttons were on the right, or the two buttons were on the left, but I couldn't obtain the result I wanted.

Finally, after some hours struggling with the documentations, some blogs, and the samples from the 1.1 SDK ( and my cat, but that is another story ), I found a way :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" >

So I discovered the alignParentRight / alignParentLeft tags !

What are the lessons learned :
* Android GUI is not always as easy as planned
* The linear Layout, that is often the first choice, is often the wrong choice. Relative Layout is much more flexible.
* Where are the API Demos samples in the 1.5 SDK ?


dweebo said...

that is funny because i went through the EXACT same scenario yesterday and reached the same solution!

thanks for posting it to the world, couldn't find anything about it from google.

michael said...

THANKS!!! Spent some time messing with this and put it on the back burner until I could get some more time. Thanks again for the hint!

AndroidBlogger said...

@ Dweebo :
It's nice to hear you reached the same solution !
It means this solution do make sense, and there was no hyper obvious tag that I completely missed ( or in this case, we were two missing it :)

@Michael :
Glad to hear you found it useful !

Martin said...

Thats exactly what I was looking for.
Thank you!

Rajesh Ranjan said...

Can you please let me know how did you get 3 rows...?
What kind of layout you used?


AndroidBlogger said...

Hi Rajesh,

What are those 3 rows you're talking about ?

Mike said...

Hi. The 3 rows he is talking about are the Help header, the scrollable text, and then the two buttons (am i right?)

thanks for the post, how well does it look in landscape?

Somdutta Roy said...

Thanks!! The UI Planning is so very close to the experience you get in Linux.