3

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>
Community
  • 1
  • 1
Zuop
  • 584
  • 5
  • 7
  • 21

1 Answers1

3

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>
Daniel Nugent
  • 43,104
  • 15
  • 109
  • 137
loadjang
  • 327
  • 1
  • 3
  • how does this answer NOT hide the indicator? – Zuop Jul 05 '16 at 12:17
  • app:tabIndicatorColor="@android:color/transparent" app:tabIndicatorHeight="0dp" – loadjang Jul 05 '16 at 12:34
  • i think you got me wrong, i want the indicator to be available and displayed not hidden! – Zuop Jul 05 '16 at 12:36
  • 1
    – loadjang Jul 05 '16 at 12:39
  • my god finally thanks, simple, easy.. I feel stupid now for even asking – Zuop Jul 05 '16 at 12:51
  • Is it possible to have a custom background like the above and keep the ripple effect as well? (on tap ripple) – Steve McMeen Nov 02 '16 at 07:02
  • this code is not working for custom tab view while for default tablayout its working fine – Erum Aug 23 '17 at 06:47
  • This approach have the downside that applies to all the TabLayouts in your application. In some cases you really don't want that, so the approach to use a and set is as the tabLayout background could be preferable – Marino Sep 07 '17 at 10:38