How do I change a tab background color when using TabLayout

Question

This is my code in the main activity  public class FilterActivity extends AppCompatActivity       Override   protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity filter           Get the ViewPager and set it s PagerAdapter so that it can display items     ViewPager viewPager    ViewPager  findViewById R id viewpager       PageAdapter pageAdapter   new PageAdapter getSupportFragmentManager    FilterActivity this       viewPager setAdapter pageAdapter           Give the TabLayout the ViewPager     final TabLayout tabLayout    TabLayout  findViewById R id sliding tabs       tabLayout setupWithViewPager viewPager              And this is my code in the XML   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical  gt        lt include         android id    id app bar          layout   layout app bar  gt       lt  include gt        lt android support design widget TabLayout         android id    id sliding tabs          android layout width  fill parent          style   style MyCustomTabLayout          android layout height  48dp   gt        lt android support v4 view ViewPager         android id    id viewpager          android layout width  match parent          android layout height  0px          android layout weight  1          android background   android color white    gt    lt  LinearLayout gt    I want to change the background color of one tab when it s selected

User · Answer

One of simplest solution is to change colorPrimary from colors xml file

User · Answer

One of the ways I could find is using the tab indicator like this   lt com google android material tabs TabLayout     android layout width  quot match parent quot      android layout height  quot wrap content quot      app tabBackground  quot  color normal unselected color quot      app tabIndicatorColor  quot  color selected color quot      app tabIndicatorGravity  quot center quot      app tabIndicatorHeight  quot 150dp quot      app tabSelectedTextColor  quot  color selected text color quot      app tabTextColor  quot  color unselected text color quot  gt             tab items here         lt  com google android material tabs TabLayout gt   Trick is to   Make the tab indicator to align in center Make the indicator height sufficiently large so that it covers the whole tab  This also takes care of the smooth animation while switching tabs

User · Answer

You can change the background color of the tab by this attribute   lt android support design widget TabLayout android id    id tabs  style   style CategoryTab  android layout width  match parent  android layout height  wrap content   android background   color primary color   gt

User · Answer

Have you tried checking the API   You will need to create a listener for the OnTabSelectedListener event  then when a user selects any tab you should check if it is the correct one  then change the background color using tabLayout setBackgroundColor int color   or if it is not the correct tab make sure you change back to the normal color again with the same method

User · Answer

As I found best and suitable option for me and it will work with animation too   You can use indicator it self as a background   You can set app tabIndicatorGravity  stretch  attribute to use as background   Example       lt android support design widget TabLayout         android id    id tab layout          android layout width  match parent          android layout height  wrap content          app tabIndicatorGravity  stretch          app tabSelectedTextColor   color white          app tabTextColor   color colorAccent  gt            lt android support design widget TabItem             android layout width  wrap content              android layout height  wrap content              android text  Chef    gt             lt android support design widget TabItem             android layout width  wrap content              android layout height  wrap content              android text  User    gt        lt  android support design widget TabLayout gt    Hope it will helps you

User · Answer

You can change the background or ripple color of each Tab like this         set ripple color for each tab     for int n   0  n  lt  mTabLayout getTabCount    n              View tab     ViewGroup mTabLayout getChildAt 0   getChildAt n            if tab    null  amp  amp  tab getBackground   instanceof RippleDrawable               RippleDrawable rippleDrawable    RippleDrawable tab getBackground                if  rippleDrawable    null                    rippleDrawable setColor ColorStateList valueOf rippleColor

User · Answer

What finally worked for me is similar to what      DJ suggested  but the tabBackground should be in the layout file and not inside the style  so it looks like   res layout somefile xml    lt android support design widget TabLayout              app tabBackground   drawable tab color selector                gt    and the selector res drawable tab color selector xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   color tab background selected  android state selected  true   gt       lt item android drawable   color tab background unselected   gt   lt  selector gt

User · Answer

Since ViewPager is tending to be replaced by ViewPager2 and we will need to migrate to it  A quick work around using Java would be something like this      final List lt String gt  colors   new ArrayList lt String gt                           add  quot  FF0000 quot                add  quot  800000 quot                add  quot  FFFF00 quot                               ViewPager2 viewPager   findViewById R id viewPager       ViewPagerAdapter adapter   new ViewPagerAdapter your data structure       viewPager setAdapter adapter        final TabLayout tabs   findViewById R id tabs        tabs addOnTabSelectedListener new TabLayout OnTabSelectedListener              Override         public void onTabSelected TabLayout Tab tab                tab view setAlpha  float  0 5                       Override         public void onTabUnselected TabLayout Tab tab                tab view setAlpha 1                       Override         public void onTabReselected TabLayout Tab tab                            TabLayoutMediator mediator   new TabLayoutMediator tabs  viewPager  new TabLayoutMediator TabConfigurationStrategy              Override         public void onConfigureTab  NonNull TabLayout Tab tab  int position                tab setText  quot Tab quot    position                                               With this feature the TabIndicator color is ignored                 or covered by the new color ex  if alpha channel is changed the indicator can be seen through                             tab view setBackgroundColor Color parseColor colors get position       You can use your HEX string color                        mediator attach

User · Answer

You can have it in the xml    lt android support design widget TabLayout         android id    id tabs          app tabTextColor   color colorGray          app tabSelectedTextColor   color colorWhite          android layout width  match parent          android layout height  wrap content   gt

User · Answer

After some messing around this is how I got the desired look  at least in the emulator  and it keeps the ripple effect      lt com google android material tabs TabLayout     android id    id tabs      android layout width  match parent      android layout height  wrap content      app tabBackground   drawable tab selector      app tabIconTint   drawable tab selector      app tabIconTintMode  src atop      app tabTextColor   drawable tab selector    gt    And the  drawable tab selector    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color colorPrimary  android drawable   color colorPrimaryDark  android state selected  true    gt       lt item android color   color colorPrimaryDark  android drawable   color colorPrimary    gt   lt  selector gt    FYI  This is what the emulator showed before I added the color argument to  drawable tab selector

User · Answer

Add atribute in xml    lt android support design widget TabLayout              app tabBackground   drawable tab color selector                gt    And create in drawable folder  tab color selector xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   color tab background selected  android state selected  true   gt       lt item android drawable   color tab background unselected   gt   lt  selector gt

User · Answer

You can try this    lt style name  MyCustomTabLayout  parent  Widget Design TabLayout  gt       lt item name  tabBackground  gt  drawable background lt  item gt   lt  style gt    In your background xml file    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state selected  true  android drawable   color white    gt       lt item android drawable   color black    gt   lt  selector gt

[android] How do I change a tab background color when using TabLayout?

Examples related to android

Examples related to android-tabs

Examples related to android-tablayout