How to change Tab Indicator color programmatically

Question

I am new to Android, and before starting programming i found that now a days many of the apps are using Fragments, especially Tab with Swipeable Views

How to change Tab Indicator/highlight color (I googled and changed ActionBar color to RED programmatically), but don't know how to change Tab Indicator color to RED. (priority programmatically)

still my ActionBar looks like this

I am using below lines to change background color of ActionBar, but i also need to change the color of Tab Indicator programmatically.

actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED));

This question and answer relates to a deprecated tab implementation. Tabs should new be implemented using TabLayout from the Design support library. The indicator color can be changed with the `tabIndicatorColor` style attribute and the height can be changed with the `tabIndicatorHeight` attribute. — Jade, Nov 06 '15 at 16:13

score 4 · Accepted Answer · answered Feb 18 '14 at 09:31

I use Jeff Gilfelt,s Android Action Bar Style Generator. You can use GUI to style your tabs and at the end you get the source code which you can use, review and modify accordingly. :)

Here's a link.

http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&neutralPressed=1&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100

score 2 · Answer 2 · answered Feb 18 '14 at 10:30

2

You can implement by create a custom tab indicator view and use setIndicator to implement different different indicator for tabs.

answered Feb 18 '14 at 10:30

hchouhan02

948
1
8
18

score 1 · Answer 3 · answered Feb 18 '14 at 08:43

The one and the best way to change selector color is to use Styles (I saw "Please Note", btw).

In drawable folder create tab_selector.xml and do something like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/tab_selected_pink" />
    <item android:state_selected="false" android:drawable="@drawable/tab_unselected_white" />
</selector>

and then in your values/styles.xml I guess, do something like this:

<style name="AppTheme" parent="Theme.AppCompat.Light">
     <item name="android:actionBarTabBarStyle">@style/MyTabStyle</item>
</style>

<style name="MyTabStyle" parent="android:Widget.ActionBar.TabBar">
    <item name="android:background">@drawable/tab_indicator_selector</item>
</style>

I'm possibly wrong with item name attribute in first style and parent attribute in second style. But in common it's will look like this.

As you can see it is easy to do. All that you really have to do is make 9patch drawables, if you want to support different screens.

Also you can look at Jake Wharton's ViewPagerIndicator that's is most flexible way to use any Navigation Mode.

This changes the entire tab's background. How do you change the indicator only? — CodeMonkey, Apr 23 '17 at 08:42

score 0 · Answer 4 · edited May 23 '17 at 10:27

0

You'll want to chain

setIcon(R.drawable.ic_icon_name_here)

for your tabs to have icons

For the tab colors you'll want to use a custom style, for more info on those solutions take a look at How do I change the background of an Android tab widget?

edited May 23 '17 at 10:27

Community

1
1

answered Feb 18 '14 at 08:05

david

11
1

i know setIcon require to use drawable, but don't know how can i use different-different for each and every tabs – JESUS Feb 18 '14 at 08:18

score 0 · Answer 5 · answered Oct 17 '18 at 14:26

If you know how many tabs you will have it is quite easy to change the icon color programmatically for each one or only a few of them.

All you need to do is copy your existing drawable file which is used for your tab, give it a name and then change the color within it.

Then all you need to do is get each tab and set the drawable you wish to use as the icon.

tabLayout.setupWithViewPager(pager, true);
tabLayout.getTabAt(0).setIcon(R.drawable.tab_color_grey);
tabLayout.getTabAt(1).setIcon(R.drawable.tab_color_black);
tabLayout.getTabAt(2).setIcon(R.drawable.tab_color_black);
tabLayout.getTabAt(3).setIcon(R.drawable.tab_color_black);
tabLayout.getTabAt(4).setIcon(R.drawable.tab_color_gold);

How to change Tab Indicator color programmatically

5 Answers5

Linked