Navigation Drawer layout

Navigation Drawer layout

Components to create Navigation Drawer Layout

1. DrawerLayout

  • <androidx.drawerlayout.widget.DrawerLayout> ... </androidx.drawerlayout.widget.DrawerLayout>
    • to hold the whole navigation layout
 

2. NavigationView Layout

  • <com.google.android.material.navigation.NavigationView .... />
    • To Create Navigation Drawer with
        1. Navigation header
            • with app:headerLayout="@layout/header_view" which is custom layout in layout folder it can be max height of 200dp
        1. menu list
            • app:menu="@menu/nav_menu" which is menu layout created inside menu folder which define form of menu list
             

3. Custom Action Bar / tool Bar

  • <androidx.appcompat.widget.Toolbar tag can help to create custom action bar that will later be used programmatically to set up drawer design
 
 
<?xml version="1.0" encoding="utf-8"?> <!--layout to hold navigation like Drawer --> <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/ddrawerlayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".NoActionBarTheme"> <!-- page design layout --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- Custom ActionBar / toolBar--> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:fontFamily="@font/amaranth_bold" android:gravity="center_vertical" android:text="@string/home" android:textSize="24sp" /> </androidx.appcompat.widget.Toolbar> <!-- Body of page --> <LinearLayout android:id="@+id/llinearmain" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" /> </LinearLayout> <!--NavigationView for Drawer layout--> <com.google.android.material.navigation.NavigationView android:id="@+id/nnavigationlayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/header_view" app:menu="@menu/nav_menu" /> </androidx.drawerlayout.widget.DrawerLayout>