FragmentTabHost bottom TabWidget

Question

Hello How I can create bottom TabWidget in FragmentTabHost ? My xml looks line this:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="fill_parent" />
    </FrameLayout>

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:orientation="horizontal"
        android:tabStripEnabled="false" />
</LinearLayout>

But my TabWidget is still at the top.

Note that bottom tabs go against the Android design aesthetic: http://developer.android.com/design/patterns/pure-android.html — CommonsWare, Dec 10 '12 at 15:51
possible duplicate of [Android: Tabs at the BOTTOM](http://stackoverflow.com/questions/2395661/android-tabs-at-the-bottom) — akshay, Dec 19 '13 at 08:26
Not anymore. Google now has blessed tabs at the bottom of the screen! — Greg Ennis, Mar 22 '16 at 01:26

Ramesh Akula · Accepted Answer · 2013-07-16T11:55:13.020

I came up with this solution after six hrs effort on it..

<?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" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Update:

For implementing custom tabs:

mTabHost.addTab(setIndicator(mTabHost.newTabSpec("Tab1"),
                        R.drawable.image1),

    public TabSpec setIndicator(Context ctx,TabSpec spec, int resid) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(ctx).inflate(R.layout.tabs_text, null);
        v.setBackgroundResource(resid);
        TextView text = (TextView) v.findViewById(R.id.tab_title);
        text.setText(spec.getTag());
        return spec.setIndicator(v);
    }

Parameter resid as Drawable like below :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_compose_h" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_compose_h" android:state_pressed="true"/>
    <item android:drawable="@drawable/tab_compose"/>

</selector>

https://github.com/rameshkec85/BottomTabsFragmentTabHost

Nice work +1, can you please explain the behaviour?? where is `TabWidget` gone!! — Muhammad Babar, May 21 '13 at 06:15
In there, is FragmentTabHost just the tab bar and control the switch fragment??? if I want to set a background for the tab bar, just add android:background="@drawable/test" in the stction of android.support.v4.app.FragmentTabHost in xml?? — Mejonzhan, May 23 '13 at 09:20
@Ramesh Thanks. How can i change tab background color on click of tab?? Any idea — moDev, Jul 16 '13 at 10:46
Works really well. But Im not sure what the second FrameLayout (the one inside FragmentTabHost) is for. The tabs work without it. — evanill80, Oct 17 '16 at 21:24

score 7 · Answer 2 · edited Feb 05 '13 at 23:28

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

score 1 · Answer 3 · answered Dec 19 '12 at 13:51

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:background="@drawable/tabbar_bg"
        android:tabStripEnabled="false" />

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0" />
</LinearLayout>

FragmentTabHost bottom TabWidget

3 Answers3

Linked