Selected tab s color in Bottom Navigation View

Question

I m adding a BottomNavigationView to a project  and I would like to have a different text  and icon tint  color for the selected tab  to achieve greying out non-selected tabs effect   Using a different color with android state selected  true  in a color selector resource file doesn t seem to work  I also tried having additional item entries with android state focused  true  or android state enabled  true   no effect unfortunately  Also tried setting the state selected attribute to false  explicitly  for the default  non-selected  color  with no luck   Here is how I add the view to my layout    lt android support design widget BottomNavigationView         android id    id bottom navigation          android layout width  match parent          android layout height  wrap content          android layout alignParentBottom  true          app itemBackground   color silver          app itemIconTint   color bnv tab item foreground          app itemTextColor   color bnv tab item foreground          app menu   menu bottom nav bar menu    gt    Here is my color selector  bnv tab item foreground 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 color   android color darker gray     gt       lt item android state selected  true  android color   android color holo blue dark    gt   lt  selector gt    And my menu resource  bottom nav bar menu xml     lt  xml version  1 0  encoding  utf-8   gt   lt menu xmlns android  http   schemas android com apk res android  gt        lt item         android id    id action home          android icon   drawable ic local taxi black 24dp          android title   string home    gt       lt item         android id    id action rides          android icon   drawable ic local airport black 24dp          android title   string rides   gt       lt item         android id    id action cafes          android icon   drawable ic local cafe black 24dp          android title   string cafes   gt       lt item         android id    id action hotels          android icon   drawable ic local hotel black 24dp          android title   string hotels   gt    lt  menu gt    I would appreciate any help

User · Answer

Try using android state enabled rather than android state selected for the selector item attributes

User · Answer

1  Inside res create folder with name color  like drawable   2  Right click on color folder  Select  new-  color resource file-  create color xml file  bnv tab item foreground    Figure 1  File Structure   3  Copy and paste bnv tab item foreground   lt android support design widget BottomNavigationView             android id    id navigation              android layout width  0dp              android layout height  wrap content              android layout marginEnd  0dp              android layout marginStart  0dp              app itemBackground   color appcolor   diffrent color             app itemIconTint   color bnv tab item foreground    inside folder 2 diff colors             app itemTextColor   color bnv tab item foreground              app layout constraintBottom toBottomOf  parent              app layout constraintLeft toLeftOf  parent              app layout constraintRight toRightOf  parent              app menu   menu navigation    gt    bnv tab item foreground     lt  xml version  1 0  encoding  utf-8   gt       lt selector xmlns android  http   schemas android com apk res android  gt           lt item android state checked  true  android color   color white    gt           lt item android color   android color darker gray     gt       lt  selector gt    Figure 1  File Structure

User · Answer

Instead of creating selector  Best way to create a style    lt style name  AppTheme BottomBar  gt       lt item name  colorPrimary  gt  color colorAccent lt  item gt    lt  style gt    and to change the text size  selected or non selected    lt dimen name  design bottom navigation text size  tools override  true  gt 11sp lt  dimen gt   lt dimen name  design bottom navigation active text size  tools override  true  gt 12sp lt  dimen gt    Enjoy Android

User · Answer

It s too late to answer but might be helpful for someone  I was doing a very silly mistake  I was using a selector file named as bottom color nav xml for Select and unselect color change but still it was not reflecting any color change in BottomNavigationView   Then I realize  I was returning false in onNavigationItemSelected method  It will work fine if you ll return true in this method

User · Answer

I am using a com google android material bottomnavigation BottomNavigationView  not the same as OP s  and I tried a variety of the suggested solutions above  but the only thing that worked was setting app itemBackground and app itemIconTint to  my selector color worked for me            lt com google android material bottomnavigation BottomNavigationView             style   style BottomNavigationView              android foreground   attr selectableItemBackground              android theme   style BottomNavigationView              app itemBackground   color tab color              app itemIconTint   color tab color              app itemTextColor   color bottom navigation text color              app labelVisibilityMode  labeled              app menu   menu bottom navigation    gt    My color tab color xml uses android state checked   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 grassSelected  android state checked  true    gt       lt item android color   color grassBackground    gt   lt  selector gt    and I am also using a selected state color for color bottom navigation text color xml    Not totally relevant here but for full transparency  my BottomNavigationView style is as follows        lt style name  BottomNavigationView  parent  Widget Design BottomNavigationView  gt           lt item name  android layout width  gt match parent lt  item gt           lt item name  android layout height  gt  dimen bottom navigation height lt  item gt           lt item name  android layout gravity  gt bottom lt  item gt           lt item name  android textSize  gt  dimen bottom navigation text size lt  item gt       lt  style gt

User · Answer

In order to set textColor  BottomNavigationView has two style properties you can set directly from the xml   itemTextAppearanceActive itemTextAppearanceInactive  In your layout xml file   lt com google android material bottomnavigation BottomNavigationView             android id  quot   id bnvMainNavigation quot              style  quot  style NavigationView quot   gt      In your styles xml file       lt style name  quot NavigationView quot  parent  quot Widget MaterialComponents BottomNavigationView quot  gt         lt item name  quot itemTextAppearanceActive quot  gt  style ActiveText lt  item gt         lt item name  quot itemTextAppearanceInactive quot  gt  style InactiveText lt  item gt       lt  style gt       lt style name  quot ActiveText quot  gt         lt item name  quot android textColor quot  gt  color colorPrimary lt  item gt       lt  style gt       lt style name  quot InactiveText quot  gt         lt item name  quot android textColor quot  gt  color colorBaseBlack lt  item gt       lt  style gt

User · Answer

While making a selector  always keep the default state at the end  otherwise only default state would be used  You need to reorder the items in your selector as    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state checked  true  android color   android color holo blue dark    gt       lt item android color   android color darker gray     gt   lt  selector gt    And the state to be used with BottomNavigationBar is state checked not state selected

User · Answer

This will work   setItemBackgroundResource android R color holo red light

User · Answer

If you want to change icons  and texts  colors programmatically   ColorStateList iconsColorStates   new ColorStateList              new int                          new int   -android R attr state checked                       new int   android R attr state checked                             new int                        Color parseColor   123456                        Color parseColor   654321                        ColorStateList textColorStates   new ColorStateList              new int                          new int   -android R attr state checked                       new int   android R attr state checked                             new int                        Color parseColor   123456                        Color parseColor   654321                        navigation setItemIconTintList iconsColorStates       navigation setItemTextColor textColorStates

User · Answer

BottomNavigationView uses colorPrimary from the theme applied for the selected tab and it uses android textColorSecondary for the inactive tab icon tint   So you can create a style with the prefered primary color and set it as a theme to your BottomNavigationView in an xml layout file   styles xml     lt style name  BottomNavigationTheme  parent  Theme AppCompat Light  gt           lt item name  colorPrimary  gt  color active tab color lt  item gt           lt item name  android textColorSecondary  gt  color inactive tab color lt  item gt    lt  style gt    your layout xml    lt android support design widget BottomNavigationView             android id    id navigation              android layout width  match parent              android layout height  wrap content              android background   android attr windowBackground              android theme   style BottomNavigationTheme              app menu   menu navigation    gt

[android] Selected tab's color in Bottom Navigation View

Examples related to android

Examples related to material-design

Examples related to navigationbar