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.
Tags:android