Tab Indicator colour

Question

enter image description here How to set the tabindicator colour of the tab widget without using image.

private TextView makeTabIndicator(String text, Context context) {
    int tabHeight = 44;
    //String tab_text_color = context.getString(R.string.fixed_tab_text_color);
    TextView tabView = new TextView(getContext());
    tabView.setBackgroundColor(Utils.getColor("#0a223a"));
    LayoutParams lp3 = new LayoutParams(LayoutParams.WRAP_CONTENT, CommonUtils.getDimension(tabHeight), 1);
    //lp3.setMargins(1, 0, 1, 0);
    tabView.setLayoutParams(lp3);
    tabView.setText(text);
    //tabView.setTextColor(Utils.getColor(tab_text_color));
    tabView.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);

    ColorDrawable unselectedState = new ColorDrawable(Utils.getColor("2c8efd"));
    ColorDrawable selectedState = new ColorDrawable(Utils.getColor("00ffff"));
    ColorDrawable focusState = new ColorDrawable(Utils.getColor("ffffff"));
    ColorDrawable pressedState = new ColorDrawable(Utils.getColor(""));

    StateListDrawable sld = new StateListDrawable();

    sld.addState(new int[] { android.R.attr.state_selected }, selectedState);
    sld.addState(new int[] { android.R.attr.state_pressed }, pressedState);
    sld.addState(new int[] { android.R.attr.state_focused }, focusState);
    sld.addState(new int[] {}, unselectedState);

    tabView.setBackgroundDrawable(sld);
    tabView.setPadding(2, 0, 2, 0);
    return tabView;
}

This is setting the colour for the entire tab. But, i want to give the colour only for the line below the tab text with a height of 5dp. Please let me know how we can achieve this.

Are you using the returned `TextView` in the `setIndicator()` method of a `TabHost.TabSpec` class? If I'm not mistaken setting a view there should disable the strip at the bottom. Right now do you see it? — user, Sep 14 '13 at 16:47

Vikram · Answer 1 · 2013-09-14T21:11:14.933

The blue line that you see at the bottom of a selected tab is actually a 9-patch drawable. A set of 6 different 9-patch drawables is used to create a state-selector drawable. This state-selector drawable is used as the background for the View that you use with TabSpec.setIndicator(View).

Following combinations of states is addressed in the default state-selector drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

So, if you want to create a StateListDrawable, you should address all these combinations of states. Also, ColorDrawables will fill the entire tab with the specified color. If you only need to change the blue line at the bottom, you'll need to create 9-patch drawables yourself.

Now, go to:

[ android sdk installation directory on your hard drive ] > [ sdk ] > [ platforms ] > [ android-XX (XX > 11) ] > [ data ] > [ res ] > [ drawable-hdpi ]

Locate the corresponding drawables (for example, the first drawable you'll look for is tab_unselected_holo.9.png) from the state-selector above. Open them with an image editor (http://pixlr.com/editor/ would be fine) and change the solid blue portion with the color of your choice. Save these drawables in your project's res/drawable-hdpi folder. Be careful about naming them with .9.png extension. Create a state-selector from the code above and change the drawables to those that you created. Save this state-selector in res/drawable of your project. For the following code, I am assuming you named this state-selector my_tab_drawable.xml:

Create a xml layout file named tab_indicator.xml. We will use it for creating tab's view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/my_tab_drawable"   <<==== state-selector drawable
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dip" >

    <TextView
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15dip" />

</LinearLayout>

Change your makeTabIndicator(String, Context) to:

private View makeTabIndicator(String text, Context context) {

    // Inflate the layout file we defined above
    View view = LayoutInflater.from(context).inflate(R.layout.tab_indicator, null);   

    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);

    return view;

}

Notice that we are returning View in place of TextView. You'll be using makeTabIndicator(String, Context) as:

mtTabSpec.setIndicator(makeTabIndicator("TAB TEXT", this));

Or if you want to create the TextView dynamically(as you are doing currently), you do not need to create my_tab_drawable.xml, or define the layout tab_indicator.xml:

private TextView makeTabIndicator(String text, Context context) {
    int tabHeight = 44;
    //String tab_text_color = context.getString(R.string.fixed_tab_text_color);
    TextView tabView = new TextView(getContext());
    //tabView.setBackgroundColor(Utils.getColor("#0a223a"));
    LayoutParams lp3 = new LayoutParams(LayoutParams.WRAP_CONTENT, CommonUtils.getDimension(tabHeight), 1);
    //lp3.setMargins(1, 0, 1, 0);
    tabView.setLayoutParams(lp3);
    tabView.setText(text);
    //tabView.setTextColor(Utils.getColor(tab_text_color));
    tabView.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);

    StateListDrawable sld = new StateListDrawable();

    sld.addState(new int[] { android.R.attr.state_selected }, context.getResources().getDrawable(R.drawable.tab_selected_holo_changed));

    sld.addState(new int[] { android.R.attr.state_focused }, context.getResources().getDrawable(R.drawable.tab_unselected_focused_holo_changed));

    sld.addState(new int[] { android.R.attr.state_focused, android.R.attr.state_selected }, 
            context.getResources().getDrawable(R.drawable.tab_selected_focused_holo_changed));

    sld.addState(new int[] { android.R.attr.state_pressed },
            context.getResources().getDrawable(R.drawable.tab_unselected_pressed_holo_changed));

    sld.addState(new int[] { android.R.attr.state_selected, android.R.attr.state_pressed },
            context.getResources().getDrawable(R.drawable.tab_selected_pressed_holo_changed));

    sld.addState(new int[] { android.R.attr.state_focused, android.R.attr.state_pressed },
            context.getResources().getDrawable(R.drawable.tab_unselected_pressed_holo_changed));

    sld.addState(new int[] { android.R.attr.state_focused, android.R.attr.state_pressed, android.R.attr.state_selected },
            context.getResources().getDrawable(R.drawable.tab_selected_pressed_holo_changed));

    tabView.setBackgroundDrawable(sld);

    // Consider increasing the padding values
    tabView.setPadding(2, 0, 2, 0);
    return tabView;
}

You will still need to create the 9-patch drawable.

If you need help with preparing/changing the 9-patch drawables, let me know.

Thanks a lot. Am going to give the bounty for you. Can you help me on one more thing. The tabs have a separator "|" as in the image attached. Can you please let me know how to achieve that. — user694688, Sep 16 '13 at 17:42
@user694688 Sure. You will need a 9-patch drawable for this too. You can use this one if you like: [Link](http://ge.tt/5GqlDMs/v/0?c). Now, before adding any of the tabs, call this: ` mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);`. I hope this helps. — Vikram, Sep 16 '13 at 20:14
If I am creating tabs without using TabHost, using just textviews inside a linear layout, then is it possible to set the state using StateListDrawable for the tabs? — user694688, Sep 27 '13 at 08:26

score 3 · Answer 2 · answered Sep 12 '13 at 09:47

3

Use this library for custom view pager and change the color of the following drawables.

tab_selected_holo.9.png
tab_unselected_holo.9.png

answered Sep 12 '13 at 09:47

Ali Imran

8,927
3
39
50

Thanks. But, i dont want to use any library for this. – user694688 Sep 12 '13 at 09:49
Attach some images of what you are doing and what you want, This may attract the attention of someone. – Ali Imran Sep 12 '13 at 12:50
also see this :-http://stackoverflow.com/questions/11794273/custom-tabbar-android – Ali Imran Sep 12 '13 at 12:51
i have added the image for reference. – user694688 Sep 12 '13 at 14:27

score 0 · Answer 3 · answered Sep 14 '13 at 15:55

Create a custom selector in yoour drawables using RGB colors on different events eg.

<!--

<item android:state_selected="false" android:state_focused="false"
    android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
-->

<item android:drawable="@drawable/tripple_tab_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
<!-- Inactive tab -->
<item android:drawable="@drawable/tripple_tab_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>

<!-- Pressed tab -->
<item android:drawable="@android:color/transparent" android:state_pressed="true"/>
<!-- Selected tab (using d-pad) -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

score 0 · Answer 4 · answered Sep 14 '13 at 16:47

You can use layer draawable to achieve the effects. For example for one of the state, Create an xml file as below with name header_background_layer_drawable.xml.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@color/aw_wsblue"/>
    <item
        android:bottom="5dp"
        android:drawable="@color/black"/>

</layer-list>

Add it as a background to your tabview as below.

tabView.setBackgroundDrawable(getResources().getDrawable(R.drawable.header_background_layer_drawable));

Augustus Francis · Answer 5 · 2013-09-21T13:38:26.177

    private View makeTabIndicator(Drawable drawable){
    ImageView Tabimage = new ImageView(this);
    LayoutParams LP = new           LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT,1);
    LP.setMargins(1, 0, 1, 0);
    Tabimage.setLayoutParams(LP);
    Tabimage.setImageDrawable(drawable);
    Tabimage.setBackgroundResource(R.drawable.tabview);
    return Tabimage;
 }

Just Google change the tab color android in google or even in stackoverflow. This question has been answered as much as it can be.

All the Best.

Tab Indicator colour

5 Answers5