Display tabs at the bottom in Android

Question

First of all sorry! I really have tried to use StackOverFlow to find the answer to this. I've seen an answer here -Android: Tabs at the BOTTOM which other people are understanding, but I cannot get my head around the solution.

My cut down XML code is this

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<TabHost
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="vertical"
        android:padding="5dp" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <FrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >
                </FrameLayout>

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="-5px"
                    android:layout_weight="0"
                    android:background="#ffff0000" >
                </TabWidget>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

How can i get the selection of tabs to be displayed at the bottom? Many thanks

Don't use bottom tab bars: http://developer.android.com/design/patterns/pure-android.html — CommonsWare, Jul 13 '13 at 17:37

score 0 · Accepted Answer · answered Jul 13 '13 at 17:44

for this you will have to use RelativeLayout instead of LinearLayout than you can use android:layout_alignParentBottom="true" property inside TabWidget

Change

  <LinearLayout
            android:id="@+id/tab1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="-5px"
                android:layout_weight="0"
                android:background="#ffff0000" >
            </TabWidget>
        </LinearLayout>

To

              <RelativeLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                 >

                <FrameLayout
                    android:layout_alignParentTop="true"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                </FrameLayout>

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginBottom="-5px"
                    android:layout_weight="0"
                    android:layout_alignParentBottom="true"
                    android:background="#ffff0000" >
                </TabWidget>

            </RelativeLayout>

Display tabs at the bottom in Android

1 Answers1