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.

Cruelty

Note that bottom tabs go against the Android design aesthetic: developer.android.com/design/patterns/pure-android.html – Oriflamme

I know but I need to create bottom tabbar with fragments. – Cruelty

possible duplicate of Android: Tabs at the BOTTOM – Geld

Not anymore. Google now has blessed tabs at the bottom of the screen! – Dictograph

Answer 1

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

Reckless

Nice work +1, can you please explain the behaviour?? where is TabWidget gone!! – Flock

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?? – Wurster

How can i remove tabstrips using FragmentTabHost – Tungstic

@Ramesh Thanks. How can i change tab background color on click of tab?? Any idea – Tungstic

Works really well. But Im not sure what the second FrameLayout (the one inside FragmentTabHost) is for. The tabs work without it. – Millennial

Answer 2

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

Weigh

Answer 3

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

Rumney