How To Create A TabHost Of A ListView In Android?

This tutorial should help you understand how to implementing a custom TabHost that contains a ListView in Android.

1)Add the following for the 3 tabs in your XML file

<TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/white">

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

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <!-- tab N°1 --> <!-- Inclusion of the interface -->
                <include
                    android:id="@+id/i_layout_1"
                    layout="@layout/layout_1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
                <!-- tab N°2 --> <!-- Inclusion of the interface -->
                <include
                    android:id="@+id/i_layout_2"
                    layout="@layout/layout_2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <!-- tab N°3 --> <!-- Inclusion of the interface -->
                <include
                    android:id="@+id/i_layout_3"
                    layout="@layout/layout_3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </FrameLayout>

        </LinearLayout>
    </TabHost>

2)Create a layout file for each tab you are referencing in the above includes. For example the “layout_1.xml”.

You can add your ListView or anything else here in this layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:padding="10dp">

<TextView
    android:id="@+id/my_textview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Example"
    android:textColor="@android:color/black" />

</RelativeLayout>

3)Create a custom indicator with the required specifications such as:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/business_tabs_indicator_background"
android:padding="10dp">

<TextView
    android:id="@+id/tv_indicator_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:textColor="@android:color/black"
    android:textStyle="bold" />

</RelativeLayout>

4)Create a custom selector for the tab indicator layout to handle the different states of selection

Let’s call it business_tabs_indicator_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item android:drawable="@android:color/darker_gray" android:state_focused="false" android:state_pressed="false" android:state_selected="true" />
<!-- Inactive tab -->
<item android:drawable="@android:color/white" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
<!-- Pressed tab -->
<item android:drawable="@android:color/darker_gray" android:state_pressed="true" />
<!-- Selected tab (using d-pad) -->
<item android:drawable="@android:color/darker_gray" android:state_focused="true" android:state_pressed="false" android:state_selected="true" />
</selector>

5)In your Activity or Fragment, initialize the TabHost and add the corresponding tabs as the following:

 private void initializeTabHoster(View rootview) {
    tabHost = (TabHost) rootview.findViewById(R.id.tabhost);
    tabHost.setup();

    TabHost.TabSpec tab1 = tabHost.newTabSpec("First Tab Tag");
    TabHost.TabSpec tab2 = tabHost.newTabSpec("Second Tab Tag");
    TabHost.TabSpec tab3 = tabHost.newTabSpec("Third tab Tag");

    // Set the Tab name and Activity that will be opened when particular Tab will be selected

    tab1.setIndicator(createTabIndicator("Tab1"));
    tab1.setContent(R.id.i_layout_1);

    tab2.setIndicator(createTabIndicator("Tab2"));
    tab2.setContent(R.id.i_layout_2);

    tab3.setIndicator(createTabIndicator("Tab3"));
    tab3.setContent(R.id.i_layout_3);

    // Add the tabs  to the TabHost to display
    tabHost.addTab(tab1);
    tabHost.addTab(tab2);
    tabHost.addTab(tab3);
}

private View createTabIndicator(String text) {
    View view = LayoutInflater.from(getActivity()).inflate(R.layout.tab_indicator, null);
    TextView textView = (TextView) view.findViewById(R.id.tv_indicator_label);
    textView.setText(text);
    return view;
}

Feel free to ask any questions or share suggestions to improve the code.