Change the color of a checked menu item in a navigation drawer

Question

I am using the new Android Design Support library to implement a navigation drawer in my application   I can t figure out how to change the color of a selected item   Here is the xml of the menu     lt menu xmlns android  http   schemas android com apk res android  gt   lt group android checkableBehavior  single  gt       lt item         android id    id navigation item 1          android icon   drawable ic 1          android title   string navigation item 1   gt        lt item         android id    id navigation item 2          android icon   drawable ic 2          android title   string navigation item 2   gt   lt  group gt      And here is the navigationview xml which is placed inside a android support v4 widget DrawerLayout     lt android support design widget NavigationView     android id    id activity main navigationview      android layout width  wrap content      android layout height  match parent      android layout gravity  start      app headerLayout   layout drawer header      app itemIconTint   color black      app itemTextColor   color primary text      app menu   menu menu drawer  gt        lt TextView         android id    id main activity version          android layout width  wrap content          android layout height  wrap content          android layout gravity  bottom          android layout marginBottom   dimen activity vertical margin          android layout marginLeft   dimen activity horizontal margin          android textColor   color primary text    gt    lt  android support design widget NavigationView gt    Thank you for your help     EDIT  I have already looked at solutions such as this one   Change background color of android menu   It seems to be quite a hack and I thought that with the new Design Support Library  something cleaner would have been introduced

User · Answer

Here s how you can do it in your Activity s onCreate method   NavigationView navigationView   findViewById R id nav view   ColorStateList csl   new ColorStateList      new int               new int    -android R attr state checked      unchecked         new int     android R attr state checked      checked            new int             Color BLACK          Color RED          navigationView setItemTextColor csl   navigationView setItemIconTintList csl

User · Answer

Here is the another way to achive this   public boolean onOptionsItemSelected MenuItem item         int id   item getItemId         item setOnMenuItemClickListener new MenuItem OnMenuItemClickListener              Override         public boolean onMenuItemClick MenuItem item                item setEnabled true               item setTitle Html fromHtml   lt font color   ff3824  gt Settings lt  font gt                  return false                                    noinspection SimplifiableIfStatement     if  id    R id action settings            return true             return super onOptionsItemSelected item

User · Answer

One need to set NavigateItem checked true whenever item in NavigateView is clicked    listen for navigation events NavigationView navigationView    NavigationView findViewById R id navigation   navigationView setNavigationItemSelectedListener this      select the correct nav menu item navigationView getMenu   findItem mNavItemId  setChecked true     Add NavigationItemSelectedListener on NavigationView     Override   public boolean onNavigationItemSelected final MenuItem menuItem           update highlighted item in the navigation menu     menuItem setChecked true       mNavItemId   menuItem getItemId            allow some time after closing the drawer before performing real navigation        so the user can see what is happening     mDrawerLayout closeDrawer GravityCompat START       mDrawerActionHandler postDelayed new Runnable            Override       public void run             navigate menuItem getItemId                    DRAWER CLOSE DELAY MS       return true

User · Answer

Step 1   Build a checked unchecked selector    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 color   color yellow  android state checked  true    gt       lt item android color   color white  android state checked  false    gt   lt  selector gt    Step 2   use the xml attribute app itemTextColor within NavigationView widget for selecting the text color    lt android support design widget NavigationView     android id    id nav view      android layout width  wrap content      android layout height  match parent      android layout gravity  start      app headerLayout   layout navigation header layout      app itemTextColor   drawable selector      app menu   menu navigation menu    gt    Step 3  For some reason when you hit an item from the NavigationView menu  it doesn t consider this as a button check  So you need to manually get the selected item checked and clear the previously selected item  Use below listener to do that   Override public boolean onNavigationItemSelected  NonNull MenuItem item         int id   item getItemId            remove all colors of the items to the  unchecked  state of the selector     removeColor mNavigationView           check the selected item to change its color set by the  checked  state of the selector     item setChecked true        switch  item getItemId            case R id dashboard                           drawerLayout closeDrawer GravityCompat START       return true     private void removeColor NavigationView view        for  int i   0  i  lt  view getMenu   size    i              MenuItem item   view getMenu   getItem i           item setChecked false             Step 4  To change icon color  use the app iconTint attribute in the NavigationView menu items  and set to the same selector    lt  xml version  1 0  encoding  utf-8   gt   lt menu xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto  gt       lt item         android id    id nav account          android checked  true          android icon   drawable ic person black 24dp          android title  My Account          app iconTint   drawable selector    gt       lt item         android id    id nav settings          android icon   drawable ic settings black 24dp          android title  Settings          app iconTint   drawable selector    gt        lt item         android id    id nav logout          android icon   drawable logout          android title  Log Out          app iconTint   drawable selector    gt   lt  menu gt    Result

User · Answer

I believe app itemBackground expects a drawable  So follow the steps below    Make a drawable file highlight color xml with following contents      lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt        lt solid android color  YOUR HIGHLIGHT COLOR   gt   lt  shape gt    Make another drawable file nav item drawable xml with following contents    lt selector xmlns android  http   schemas android com apk res android  gt           lt item android drawable   drawable highlight color  android state checked  true   gt   lt  selector gt    Finally add app itemBackground tag in the NavView      lt android support design widget NavigationView android id    id activity main navigationview  android layout width  wrap content  android layout height  match parent  android layout gravity  start  app headerLayout   layout drawer header  app itemIconTint   color black  app itemTextColor   color primary text  app itemBackground   drawable nav item drawable  app menu   menu menu drawer  gt    here the highlight color xml file defines a solid color drawable for the background  Later this color drawable is assigned to nav item drawable xml selector   This worked for me  Hopefully this will help                                                   UPDATED                                                  Though the above mentioned answer gives you fine control over some properties  but the way I am about to describe feels more SOLID and is a bit COOLER   So what you can do is  you can define a ThemeOverlay in the styles xml for the NavigationView like this         lt style name  ThemeOverlay AppCompat navTheme  gt            lt  -- Color of text and icon when SELECTED -- gt           lt item name  colorPrimary  gt  color color of your choice lt  item gt             lt  -- Background color when SELECTED -- gt           lt item name  colorControlHighlight  gt  color color of your choice lt  item gt         lt  style gt    now apply this ThemeOverlay to app theme attribute of NavigationView  like this    lt android support design widget NavigationView android id    id activity main navigationview  android layout width  wrap content  android layout height  match parent  android layout gravity  start  app theme   style ThemeOverlay AppCompat navTheme  app headerLayout   layout drawer header  app menu   menu menu drawer  gt    I hope this will help

User · Answer

Well you can achieve this using Color State Resource  If you notice inside your NavigationView you re using  app itemIconTint   color black  app itemTextColor   color primary text    Here instead of using  color black or  color primary test  use a Color State List Resource  For that  first create a new xml  e g drawer item xml  inside color directory  which should be inside res directory   If you don t have a directory named color already  create one   Now inside drawer item xml do something like this    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  checked state color  android state checked  true    gt       lt item android color  your default color    gt   lt  selector gt    Final step would be to change your NavigationView    lt android support design widget NavigationView     android id    id activity main navigationview      android layout width  wrap content      android layout height  match parent      android layout gravity  start      app headerLayout   layout drawer header      app itemIconTint   color drawer item      notice here     app itemTextColor   color drawer item     and here     app itemBackground   android color transparent    and here for setting the background color to tranparent     app menu   menu menu drawer  gt        Like this you can use separate Color State List Resources for IconTint  ItemTextColor  ItemBackground   Now when you set an item as checked  either in xml or programmatically   the particular item will have different color than the unchecked ones

[android] Change the color of a checked menu item in a navigation drawer

Examples related to android

Examples related to androiddesignsupport