CODEWITHSUNDEEP
android
user694688
user694688

Reputation: 683

Tab Indicator colour

enter image description hereHow 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.

Upvotes: 2

Views: 3446

Answers (5)

Augustus Francis
Augustus Francis

Reputation: 2670

    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.

Upvotes: -1

Vikram
Vikram

Reputation: 51571

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.

Upvotes: 7

Nitin Sethi
Nitin Sethi

Reputation: 1336

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));

Upvotes: 0

Glenford Fernandes
Glenford Fernandes

Reputation: 547

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"/>

Upvotes: 0

Ali Imran
Ali Imran

Reputation: 9217

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

  1. tab_selected_holo.9.png
  2. tab_unselected_holo.9.png

Upvotes: 3

Related Questions