Android TabLayout selected tab background

10,623

style change

  <style name="Base.Widget.Design.TabLayout" parent="android:Widget">
      <item name="tabBackground">@drawable/tab_background</item>
      <item name="tabIndicatorColor">#000000</item> 
      <item name="tabIndicatorHeight">5dp</item>      
  </style> 
Share:
10,623
Zuop
Author by

Zuop

Updated on June 27, 2022

Comments

  • Zuop
    Zuop almost 2 years

    Is there really really no easy way to use a TabLayout and be able to set the colors of the tabs (selected, not selected)? Like the selected tab background uses colorPrimary, non selected tabs uses colorPrimaryDark or something? I've searched the web including this and this and much more. I can change the background color with solution 1 but now the indicator is missing and I want it back.

    This can't be so hard to do..

    missing indicator

    Solution of first link:

    <style name="Base.Widget.Design.TabLayout" parent="android:Widget">
            <item name="tabBackground">@drawable/tab_background</item>
    </style>
    
    // tab_background
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
        <item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
    </selector>
    

    ANSWER:

    <style name="Base.Widget.Design.TabLayout" parent="android:Widget">
            <item name="tabBackground">@drawable/tab_background</item>
            <item name="tabIndicatorColor">@color/colorAccent</item>
            <item name="tabIndicatorHeight">3dp</item>
    </style>