How to create a sublevel in navigation menu in android?

Question

I would like to achieve the same effect like this:

http://mmenu.frebsite.nl/

when you click on document/ tutorial/ support, the menu will go to sublevel menu. It is not a expandable listview, nor a submenu item below the parent menu title.

I have tried create the menu using navigation view like this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_event"
            android:title="Home" />
        <item
            android:id="@+id/nav_profile"
            android:icon="@drawable/ic_dashboard"
            android:title="Perfil" />
    </group>

    <item android:title="More Options">
        <menu>
            <item
                android:icon="@drawable/ic_forum"
                android:title="Forum" />
            <item
                android:icon="@drawable/ic_headset"
                android:title="Headset" />
        </menu>
    </item>
</menu>

The problem is , it does not go to sublevel when I click on the parent menu title. How to achieve that in android? Thanks a lot

Answer 1

I believe, I archived the desired effect:

The idea behind is to clear() existing menu and re-inflateMenu every time user click on the menu item, which should lead to a submenu. (And on getting back - do pretty much the same)

As a root menu (activity_main_drawer.xml), I used this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/action_item1"
            android:icon="@drawable/ic_menu_camera"
            android:title="Item 1" />
        <item
            android:id="@+id/action_expand"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Sub Menu to expand" />
    </group>
</menu>

This is a submenu (activity_submenu_drawer.xm):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="Go Back"
        android:icon="@drawable/ic_back"
        android:id="@+id/back_to_main"/>

    <item
        android:id="@+id/sub_item1"
        android:icon="@drawable/ic_menu_share"
        android:title="Subitem 1" />
    <item
        android:id="@+id/sub_item2"
        android:icon="@drawable/ic_menu_send"
        android:title="Subitem 2" />
</menu>

MainActivity.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main" />

</android.support.v4.widget.DrawerLayout>

And here's the MainActivity class (which do the switching):

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        .....
        navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.inflateMenu(R.menu.activity_main_drawer);
        navigationView.setNavigationItemSelectedListener(this);
    }

    ....


    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.action_expand) {
            navigationView.getMenu().clear();
            navigationView.inflateMenu(R.menu.activity_submenu_drawer);
        } else if (id == R.id.back_to_main) {
            navigationView.getMenu().clear();
            navigationView.inflateMenu(R.menu.activity_main_drawer);
        }

        return true;
    }
}

I've uploaded my test-project to my dropbox - feel free to check it out

I hope, it helps

Answer 2

one idea i had was to have each menu item open another fragment with a transition. Underneath, the navigation drawer is just a listview inside a fragment right ? so launch another fragment from the adapter of the navaigation drawer list.