Sami Eltamawy Sami Eltamawy
  • Home
  • About Me
  • Knowledge Base
    • Articles
    • Book Recommendations
    • Press & Media
    • Videos
    • Online Courses
  • Contact Me
  • Login/Signup
  • Log in
  • Home
  • About Me
  • Knowledge Base
    • Articles
    • Book Recommendations
    • Press & Media
    • Videos
    • Online Courses
  • Contact Me
  • Login/Signup
  • Log in
  • Home
  • Technical
  • How To Create A TabHost Of A ListView In Android?

Articles Technical

11 Jun

How To Create A TabHost Of A ListView In Android?

  • By Sami Eltamawy
  • In Technical

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
  • Share:
Sami Eltamawy
My name is Sami Eltamawy. I am an Application Security Manager at Meta (Formerly Facebook), and Co-Founder of Pet With It, insydo and Brandripplr. I am very passionate about technology, entrepreneurship, cybersecurity, self-development, helping others, and sharing everything I learn or experience.

You may also like

The Arab Cryptanalysts and Al-Kindi’s Method

The Arab Cryptanalysts and Al-Kindi’s Methods

  • 11/04/2022
  • by Sami Eltamawy
  • in Technical
Al-Kindi (801-873), Abu Yusuf Yaqub ibn Is-haq ibn as Sabbah ibn ‘omran ibn Ismail Al-Kindi, was...
What is spear phishing attack or gift card scam and how to detect it?
What is spear phishing attack or gift card scam and how to detect it?
28/02/2021
Facebook pixel targeting retargeting
Make The Most Out Of Your Marketing Budget Using Facebook Targeting/Retargeting
07/07/2017
How To Fix The Camera Intent Rotated Image In Android
11/06/2017

Latest Posts

Never Quit Your Job For These 10 Reasons
15Aug,2022
The Arab Cryptanalysts and Al-Kindi’s Method
The Arab Cryptanalysts and Al-Kindi’s Methods
11Apr,2022
The Reactive, Proactive and Approachable Helpful Colleague – How Can You Become A Truly Helpful Team Member?
05Sep,2021

Tags

android (2) culture (1) entrepreneurship (1) house (1) marketing (1) Media & Press (2) tech house (1)

Like My Page

Social Accounts

Menu

  • Courses
  • Articles
  • Contact
  • Success Stories
  • About Me
  • Log in

GET IN TOUCH

sami@samieltamawy.com

Dubai, UAE.

 

Social Links

  • Facebook
  • Linkedin
  • Instagram
  • Youtube

Podcast

Listen to the Tech Entrepreneurship Simplified podcast

All rights reserved - Sami Eltamawy

  • Home
  • Courses
  • Articles
  • Contact
  • About Me
  • Log in