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

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
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?
28Feb,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