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_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button_previous"
android:layout_height="wrap_content"
android:layout_width="110px"
android:layout_alignParentLeft="true"
android:textSize="15sp"
android:typeface="monospace"
android:textColor="#ffFFffFF"
android:background="@drawable/textview"
android:text="@string/PreviousButton"
>
</Button>
<Button
android:id="@+id/button_next"
android:layout_height="wrap_content"
android:layout_width="110px"
android:layout_alignParentRight="true"
android:textSize="15sp"
android:typeface="monospace"
android:textColor="#ffFFffFF"
android:background="@drawable/textview"
android:text="@string/NextButton"
>
</Button>
</RelativeLayout>

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 ?

8 comments:

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

mike 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 !

WarrenFaith said...

Thats exactly what I was looking for.
Thank you!

Rajesh Ranjan said...

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

Regards,
Ranjan

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.