How to Create Selectable Headers in Navigation Drawer

Question

In my application, I am programmatically populating my NavigationView menu with something like

val menu = navigation.menu
menu.setGroupCheckable(MENU_GROUP, true, true)
val subMenu = menu.addSubMenu(MENU_GROUP, 0, 0, "New group")

subMenu.add(0, 0, 0, "item 1").apply { isCheckable = true }
subMenu.add(0, 1, 1, "item 2").apply { isCheckable = true }
subMenu.add(0, 2, 2, "item 3").apply { isCheckable = true }
subMenu.add(0, 3, 3, "item 4").apply { isCheckable = true }

val subMenu1 = menu.addSubMenu(MENU_GROUP, 1, 1, "New group 2")
subMenu1.add(1, 0, 0, "item 1").apply { isCheckable = true }
subMenu1.add(1, 1, 1, "item 2").apply { isCheckable = true }
subMenu1.add(1, 2, 2, "item 3").apply { isCheckable = true }
subMenu1.add(1, 3, 3, "item 4").apply { isCheckable = true }

This allows me to get any of those "item *" MenuItems to be selectable but I am not able to select any of the SubMenu headers.

According to this,

Checkable items appear only in submenus or context menus.

This is my understanding of it, however I am having a hard time finding a way around it. The Material Components NavigationView specifically does different cases for these two types of menu's

My current solution essentially re-implements a menu with normal views to achieve this. Is there any way to avoid this and just get the SubMenu to be selectable / checkable directly?

score 1 · Answer 1 · answered Jan 19 '20 at 22:37

The Navigation Drawer doesn't support selectable headers. But we can use a well-known library MaterialDrawer to achieve this.

I will make the setup easier for you

Dependencies:

implementation "com.mikepenz:materialdrawer:7.0.0"
implementation 'com.google.android.material:material:1.0.0'
implementation "androidx.recyclerview:recyclerview:1.1.0"
implementation "androidx.annotation:annotation:1.1.0"
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

Some of these dependencies you might already have in your project and you don't need to add them again

Just add this to onCreate of your Activity where you want to add the drawer

DrawerBuilder()
        .withActivity(this)
        .withToolbar(toolbar)
        .addDrawerItems(
            SecondaryDrawerItem().withName("New group"),
            PrimaryDrawerItem().withName("Item 1").withIcon(R.drawable.ic_icon),
            PrimaryDrawerItem().withName("Item 2").withIcon(R.drawable.ic_icon),
            PrimaryDrawerItem().withName("Item 3").withIcon(R.drawable.ic_icon),
            DividerDrawerItem(),
            SecondaryDrawerItem().withName("New group 2"),
            PrimaryDrawerItem().withName("Item 1").withIcon(R.drawable.ic_icon),
            PrimaryDrawerItem().withName("Item 2").withIcon(R.drawable.ic_icon),
            PrimaryDrawerItem().withName("Item 3").withIcon(R.drawable.ic_icon)
        )
        .build()

You can find lots of customization info here the sample app in the repo is also contains lots of these customizations.

The result would be something like this

How to Create Selectable Headers in Navigation Drawer

1 Answers1