How to change the color of tab indicator

16,259

This solution works for me and also its working for 2.1+ android, its create custom tab layout

Code:

private TabHost mTabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    setupTabHost();
    mTabHost.getTabWidget().setDividerDrawable(R.drawable.fake_divider);

    setupTab(new TextView(this), "123", R.id.tab1);
    setupTab(new TextView(this), "abc", R.id.tab2);
    setupTab(new TextView(this), "fav", R.id.tab3);

    mTabHost.setCurrentTab(0);
}

private void setupTabHost() {
    mTabHost = (TabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup();
}

private void setupTab(final View view, final String tag, final int res) {
    View tabview = createTabView(mTabHost.getContext(), tag);
    TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(res);
    mTabHost.addTab(setContent);
}

private static View createTabView(final Context context, final String text) {
    View view = LayoutInflater.from(context).inflate(R.layout.tabwidget_bg, null);
    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);
    return view;
}

in main.xml:

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

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

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_divider" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:measureAllChildren="true" >

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:baselineAligned="true"
                android:orientation="vertical" >
        ... etc

custom layout tabwidget_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/tab_bg_selector"
    android:gravity="center"
    android:padding="10dp"
    android:layout_margin="0dp" >

    <TextView
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="15sp" />

</LinearLayout>

Now you can customize your custom tab layot as u can, and color of your active tab n tab_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Active tab -->
    <item android:drawable="@drawable/tab_bg_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
    <!-- Inactive tab -->
    <item android:drawable="@drawable/tab_bg_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <!-- Pressed tab -->
    <item android:drawable="@drawable/tab_bg_active" android:state_pressed="true"/>
    <!-- Selected tab (using d-pad) -->
    <item android:drawable="@drawable/tab_bg_selected" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

</selector>
Share:
16,259
Gauraw
Author by

Gauraw

Updated on June 04, 2022

Comments

  • Gauraw
    Gauraw almost 2 years

    I am using tabHost in my application and the requirement is that when any tab is selected the color of tab indicator should change ,I referred this example How to set Tab View Indicator background color in Android but i didn't understood Here is my code:

        TabHost tabHost = getTabHost();  // The activity TabHost
    
                TabHost.TabSpec spec;  // Reusable TabSpec for each tab
                Intent intent;  // Reusable Intent for each tab
    
                // Create an Intent to launch an Activity for the tab (to be reused)
                intent = new Intent().setClass(this, HomePage.class);
                // Initialize a TabSpec for each tab and add it to the TabHost
                spec = tabHost.newTabSpec("tabOne");  
                spec.setContent(intent);  
                spec.setIndicator("Home");  
                tabHost.addTab(spec);
                // Squash the tab a little bit horizontally
                tabHost.getTabWidget().getChildAt(0).getLayoutParams().height = 40;
                tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 50;
    
                // Bump the text size upll.getChildAt(0);
    
                // Do the same for the other tabs
                intent = new Intent().setClass(this, MoteIt.class);
                spec = tabHost.newTabSpec("tabTwo");  
                spec.setContent(intent);  
                spec.setIndicator("moteit");
    
                tabHost.addTab(spec);
                tabHost.getTabWidget().getChildAt(1).getLayoutParams().height = 40;
    
    
                intent = new Intent().setClass(this, Lifeline.class);
                spec = tabHost.newTabSpec("tabThree");  
                spec.setContent(intent);  
                spec.setIndicator("lifeline");
                tabHost.addTab(spec);
                tabHost.getTabWidget().getChildAt(2).getLayoutParams().height = 40;
    
    
                intent = new Intent().setClass(this, CircleOfTrust.class);
                spec = tabHost.newTabSpec("tabfour");  
                spec.setContent(intent);  
                spec.setIndicator("Cot");
                tabHost.addTab(spec);
                tabHost.getTabWidget().getChildAt(3).getLayoutParams().height = 40;
    
                intent = new Intent().setClass(this, Search.class);
                spec = tabHost.newTabSpec("tabFive");  
                spec.setContent(intent);  
                spec.setIndicator("Search");
                tabHost.addTab(spec);
                tabHost.getTabWidget().getChildAt(4).getLayoutParams().height = 40;
                tabHost.getTabWidget().setStripEnabled(true);
                tabHost.setCurrentTab(0);
    

    Thanks in advance