How to align your TabHost at the bottom of the screen

This little tip will show you how to align your TabHost at the bottom of the screen in your Android app, like this:

I assume you know how to use the TabHost the usual way (I might write a tutorial on that later).

Say you are using your TabHost the following way:

<?xml version="1.0" encoding="utf-8"?>  
<TabHost  
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>  

You then have the tabs on top, like this:

But if you switch out the LinearLayout with a RelativeLayout, like this:

<?xml version="1.0" encoding="utf-8"?>  
<TabHost  
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        android:layout_height="fill_parent"
        android:layout_width="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_alignParentBottom="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </RelativeLayout>
</TabHost>  

Then you can specify the alignment of your TabWidget (on line 12), to align it at the bottom:

android:layout_alignParentBottom=”true”

And you get the result as seen in the first image!

Edit April 25:

As pointed out in the comments, there was an error in the layout.
Paul J. Ghosh made a comment on this, with working xml layout, which unfortunately got filtered out by the spam filter.

Thank you.

comments powered by Disqus