• Register
294 points
‚óŹ3

How to make Navigation Drawer in Android ???

Let’s Start With Steps which we will do for setting up navigation drawer in andorid.

  1. Add material design dependency.
  2. Setup DrawerLayout.
  3. Setup NavigationView.
  4. Selecting fragment for the navigation menu Item.
Let’s  see every stepss  in deep.
 
Step 1 — Add material design dependency
 
Add material dependency as below in your app  build.gradle file.

implementation "com.google.android.material:material:1.3.0”

Step 2 — Setup DrawerLayout

In Android, DrawerLayout acts as a top-level container for window content that allows for interactive “drawer” views to be pulled out from one or both vertical edges of the window. Drawer position and layout is controlled by using the layout_gravity attribute on child views corresponding to which side of view we want the drawer to emerge from like left to right.
 
<?xml version="1.0" encoding="utf-8"?>
<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/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" />

    <com.google.android.material.navigation.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"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

Also, under the DrawerLayout we need to add AppBarLayout for the Toolbar and the Fragment viewholder the FrameLayout.

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.velmurugan.navigationdrawerexample.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

Once created the layout files, Create ActionBarDrawerToggle for the drawerLayout listener.

 

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

 

ActionBarDrawerToggle: This is used with a DrawerLayout to implement the recommended functionality of Navigation Drawers. It has the following usages:

  • Acts as a listener, for opening and closing of drawers.
  • Provides the hamburger icons in the ToolBar/ActionBar.
  • It allows for the animation between the hamburger icon and the arrow to exist.

addDrawerListener(toggle): This listener is used to keep notified of drawer events.

syncState(): will synchronize the icon’s state and display the hamburger icon or back arrow depending on whether the drawer is closed or open. Omitting this line of code won’t change the back arrow to the hamburger icon when the drawer is closed.

 

Step 3 -Setup NavigationView

 

NavigationView is an easy way to display a navigation menu from a menu resource.

This is most commonly used in conjunction with DrawerLayout to implement Material navigation drawers. Navigation drawers are modal elevated dialogs that come from the start/left side, used to display in-app navigation links.

 

<com.google.android.material.navigation.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"
        app:menu="@menu/activity_main_drawer" />

 

The NavigationView essentially consists of two major components,

1. HeaderLayout

This View is typically displayed at the top of the Navigation Drawer. It essentially holds the profile picture, name email address, and a background cover pic. This view is defined in a separate layout file that we’ll look at in a bit.

2. App Menu

After finishing creating the header we need to create a menu resource file that will hold the items to be displayed in the drawer. Here’s how to create the menu resource file:
Right-click the res folder →Select new →Android resource file →Choose ‘menu’ under the resource type drop-down list.
Name the file as ‘activity_main_drawer.xml’ and copy-paste the following code into the file.

 

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

 

setNavigationItemSelectedListener(NavigationView.OnNavigationItemSelectedListener listener):This method is used to set a listener that will be notified when a menu item is selected.

 

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);

 

 

Step 4 — Selecting fragment for the navigation menu Item

In your Activity implement the NavigationView.OnNavigationItemSelectedListener and override the onNavigationItemSelected(MenuItem item).By using the MenuItem Id we can able to launch the correct Fragment.

 

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();
    Fragment fragment = null;
    FragmentManager fragmentManager = getSupportFragmentManager();
    if (id == R.id.nav_camera) {
       fragment = new ImportFragment();
    } else if (id == R.id.nav_gallery) {
        fragment = new GalleryFragment();
    } 
    fragmentManager.beginTransaction().replace(R.id.frameLayout, fragment).commit();
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

Display The Default Fragment

In the OnCreate() By default, we need to display the default Fragment. For that, we need to use

navigationView.setCheckedItem(R.id.nav_camera);


And Also need to start the fragment for the same,
FragmentManager fragmentManager = getSupportFragmentManager();
ImportFragment fragment = new ImportFragment();
fragmentManager.beginTransaction().replace(R.id.frameLayout, fragment).commit();


You can also like share and comment on my other blog as well.

https://kodlogs.com/blog/9850/how-call-rest-services-in-android-application
https://kodlogs.com/blog/9848/how-to-get-started-with-admob-in-your-android-app
https://kodlogs.com/blog/9173/what-is-intent-in-android
https://kodlogs.com/blog/9172/have-you-ever-wondered-receive-push-notifications-android
https://kodlogs.com/blog/9019/how-to-configure-firebase-project-your-android-application

 

2 Comments

Comment

Sakshi this post is very helpful and useful for me. Your article are always full of knowledge and motivation. Continue to post. Thank u so much. yes

Today you have taught me something new. Great job. Continue to post :)