How to change the new TabLayout indicator color and height

Question

I was playing around with the new android support design widget TabLayout  and found a problem  in the class definition  there are no methods to change the indicator color  and default height    Doing some research  found that the default indicator color is taken from the AppTheme  Specifically from here    lt item name  colorAccent  gt  FF4081 lt  item gt    Now  in my case  if I change the colorAccent  it will affect all the other views which uses this value as background color  for example ProgressBar  Now is there any way to change the indicatorColor to other thing besides the colorAccent

User · Answer

To change indicator color and height programmatically you can use reflection. for example for indicator color use code below:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

and to change indicator height use "setSelectedIndicatorHeight" instead of "setSelectedIndicatorColor" then invoke it by your desired height

User · Answer

app tabIndicatorColor   android color white

User · Answer

Since I can t post a follow-up to android developer s comment  here s an updated answer for anyone else who needs to programmatically set the selected tab indicator color   tabLayout setSelectedTabIndicatorColor Color parseColor   FFFFFF       Similarly  for height   tabLayout setSelectedTabIndicatorHeight  int   2   getResources   getDisplayMetrics   density      These methods were only recently added to revision 23 0 0 of the Support Library  which is why Soheil Setayeshi s answer uses reflection

User · Answer

With the design support library you can now change them in the xml   To change the color of the TabLayout indicator   app tabIndicatorColor   color color    To change the height of the TabLayout indicator   app tabIndicatorHeight  4dp

User · Answer

Foto indicator use this    tabLayout setSelectedTabIndicatorColor ContextCompat getColor this  R color colorWhite     put your color

User · Answer

Having the problem that the new TabLayout uses the indicator color from the value colorAccent  I decided to dig into the android support design widget TabLayout implementation  finding that there are no public methods to customize this  However I found this style specification of the TabLayout    lt style name  Base Widget Design TabLayout  parent  android Widget  gt       lt item name  tabMaxWidth  gt  dimen tab max width lt  item gt       lt item name  tabIndicatorColor  gt  attr colorAccent lt  item gt       lt item name  tabIndicatorHeight  gt 2dp lt  item gt       lt item name  tabPaddingStart  gt 12dp lt  item gt       lt item name  tabPaddingEnd  gt 12dp lt  item gt       lt item name  tabBackground  gt  attr selectableItemBackground lt  item gt       lt item name  tabTextAppearance  gt  style TextAppearance Design Tab lt  item gt       lt item name  tabSelectedTextColor  gt  android textColorPrimary lt  item gt   lt  style gt    Having this style specification  now we can customize the TabLayout like this    lt android support design widget TabLayout     xmlns app  http   schemas android com apk res-auto      android id   id pages tabs      android layout width  match parent      android layout height  wrap content      android background   attr colorPrimary      android minHeight   attr actionBarSize      android theme   style ThemeOverlay AppCompat Dark ActionBar      app tabIndicatorColor   android color white      app tabIndicatorHeight  4dp   gt    And problem solved  both the tab indicator color and height can be changed from their default values

User · Answer

Just put this line in your code  If you change the color then change the color value in parentheses   tabLayout setSelectedTabIndicatorColor Color parseColor   FFFFFF

User · Answer

You can change this using xml  app tabIndicatorColor   fff

User · Answer

from xml     app tabIndicatorColor   fff    from java    tabLayout setSelectedTabIndicatorColor Color parseColor   FFFFFF     tabLayout setSelectedTabIndicatorHeight  int   2   getResources   getDisplayMetrics   density

User · Answer

Android makes it easy   public void setTabTextColors int normalColor  int selectedColor        setTabTextColors createColorStateList normalColor  selectedColor        So  we just say  mycooltablayout setTabTextColors Color parseColor   1464f4    Color parseColor   880088       That will give us a blue normal color and purple selected color   Now we set the height  public void setSelectedTabIndicatorHeight int height        mTabStrip setSelectedIndicatorHeight height       And for height we say   mycooltablayout setSelectedIndicatorHeight 6

User · Answer

With the desing support library v23 you can set programmatically the color and the height   Just use for the height   TabLayout setSelectedTabIndicatorHeight int height    Here the official javadoc   Just use for the color   TabLayout setSelectedTabIndicatorColor int color    Here the official javadoc   Here you can find the info in the Google Tracker

[android] How to change the new TabLayout indicator color and height

Examples related to android

Examples related to material-design

Examples related to android-design-library