Search code examples
androidandroid-viewpagerandroid-tabsandroid-tablayout

Android TabLayout selected tab background


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>

Solution

  • 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>