Android support: NavigationView design checked menu items

Question

I recently started converting an Android app to use the latest support library called support: design.

When introducing a new navigation element, I came across a problem with displaying selected menu items.

My navdrawer_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_home" android:icon="@drawable/ic_home_black" android:title="@string/navdrawer_item_home" /> </group> <item android:id="@+id/navigation_subheader" android:title="@string/navdrawer_subheader_title1"> <menu> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_sub_item1" android:icon="@drawable/ic_home_black" android:title="@string/navdrawer_sub_item1" /> </group> </menu> </item> </menu> 

Then I set the menu item to check in my onNavigationItemSelected:

 @Override public boolean onNavigationItemSelected(final MenuItem menuItem) { menuItem.setChecked(true); drawerLayout.closeDrawer(GravityCompat.START); mDrawerActionHandler.postDelayed(new Runnable() { @Override public void run() { displayView(menuItem.getItemId()); } }, DRAWER_CLOSE_DELAY_MS); return true; } 

This works fine if I use only the normal menu items between tags, but it does not work very well for subtitles. Clicking on sub-items will not check them until I double-click the same item and it unchecks the previous item.

It looks like this:

Answer 1

Each element must be inside the group, so the group can control the visual behavior of the element when the user selects. Try:

 <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_home" android:icon="@drawable/ic_home_black" android:title="@string/navdrawer_item_home" /> <item android:id="@+id/navigation_subheader" android:title="@string/navdrawer_subheader_title1"> <menu> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_sub_item1" android:icon="@drawable/ic_home_black" android:title="@string/navdrawer_sub_item1" /> </group> </menu> </item> </group> </menu> 

Answer 2

I solved this recurring problem in a way that works very well.

We just need to remember the identifier of the selected item, replenish the menu in the navigation menu and select the item again.

To do this, you need to have your own menu box, as a way:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/section_1" android:title="@string/section_title"> <menu> <group android:checkableBehavior="single"> <item android:id="@+id/item_1_section_1" android:icon="@drawable/ic_icon" android:title="@string/title"/> <item android:id="@+id/item_2_section_1" android:icon="@drawable/ic_icon" android:title="@string/title"/> ... </group> </menu> </item> ... <item android:id="@+id/section_x" android:title="@string/section_title"> <menu> <group android:checkableBehavior="single"> <item android:id="@+id/item_1_section_x" android:icon="@drawable/ic_icon" android:title="@string/title"/> <item android:id="@+id/item_2_section_x" android:icon="@drawable/ic_icon" android:title="@string/title"/> ... </group> </menu> </item> </menu> 

So my solution is:

 public class YourActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { ... private NavigationView mNavigationView; private int mNavItemId; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ... // load saved navigation state if present if (null == savedInstanceState) { mNavItemId = R.id.item_1_section_1; } else { mNavItemId = savedInstanceState.getInt(NAV_ITEM_ID); } // listen for navigation events mNavigationView = (NavigationView) findViewById(R.id.navigation_view); mNavigationView.setNavigationItemSelectedListener(this); // select the correct nav menu item mNavigationView.getMenu().findItem(mNavItemId).setChecked(true); } @Override public boolean onNavigationItemSelected(final MenuItem menuItem) { // update highlighted item in the navigation menu 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() { ... } }, DRAWER_CLOSE_DELAY_MS); // Reload menuDrawer to keep selected item mNavigationView.getMenu().clear(); mNavigationView.inflateMenu(R.menu.menu_drawer); mNavigationView.getMenu().findItem(mNavItemId).setChecked(true); return true; } ... } 

Answer 3

It's simple. Just add android: checkable = "true" for each element.

eg.

 <item android:id="@+id/navigation_item_home" android:icon="@drawable/ic_home_black" android:title="@string/navdrawer_item_home" android:checkable="true" /> 

Answer 4

I suggest making the decision provided by @MichelFortes because it solved my problem with submenu items in NavigationView. This is my code and it works

 <group android:checkableBehavior="single"> <item android:id="@+id/your_id_item" android:icon="@drawable/your_icon_if_you_want" android:title="@string/title_for_this_item" /> <!-- you can add here as many items as you want --> </group> <item android:title="@string/submenu_title"> <menu> <group android:checkableBehavior="single"> <item android:id="@+id/submenu_item_id" android:icon="@drawable/icon_if_exists" android:title="@string/title_for_item" /> <!-- you can add here as many items as you want --> </group> </menu> </item> 

Here, each item you select will be checked and highlighted! Thanks @MichelFortes again;)