Navigation Drawer

Navigation Drawer is a view that pulled out from one or both vertical edges of the window. It can be seen as a container that displays menu options that make it possible to navigate to fragments or activities of an app.

Why to use? 

According to Material Design, Navigation Drawer is recommended for:

• Apps with five or more top-level destinations;
• Apps with two or more levels of navigation hierarchy;
• Quick navigation between unrelated destinations.

How it is implemented? 

It is implemented by the NavigationView viewgroup. The NavigationView is associated with a menu, implemented in the resources of the app, and it must necessarily be the child of the DrawerLayout. The latter contains a layout with the main UI content, over which the NavigationDrawer will be shown, and the NavigationView viewgroup. The image below illustrates a complete DrawerLayout.

And the image below illustrates a Navigation Drawer's XML.

<androidx.drawerlayout.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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <!-- Main UI Content -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        ...

    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:clipToPadding="false"
        android:fitsSystemWindows="true"
        app:menu="@menu/main_menu"
        />

</androidx.drawerlayout.widget.DrawerLayout>

The menu to be displayed by the NavigationDrawer is defined in the tag app:menu. Another important tag is android:layout_gravity that defines which side of the window you want the drawer to emerge from: start or bottom.

Types

There are 3 types: Standard drawer, Modal Side drawer and Modal Bottom drawer.  The first is a fixed menu on the start side of the window, showed simultaneously with main UI content, then, it isn't used on mobile screens. The second and third types is used only on mobile, because the menu is only showed when the user clicks on hamburger icon. On the second type, the menu is opened on start edge of window and, on the third type, the menu is opened on bottom edge of window. The second and third type is differentiated by the tag android:layout_gravity. Modal Bottom drawer is only recommended for bottom app bar.