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

Answer 1

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

Answer 2

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?

Answer 3

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

Answer 4

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.

Answer 5

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