MY SOFTWERE IT

 

Steps to Implement Navigation Drawer in Android

Step 1: Create a New Android Studio Project

Create an empty activity android studio project. Refer to Android | How to Create/Start a New Project in Android Studio? on how to create an empty activity android studio project.

Step 2: Adding a dependency to the project

In this discussion, we are going to use the Material Design Navigation drawer. So add the following Material design dependency to the app-level Gradle file.

implementation 'com.google.android.material:material:1.3.0-alpha03'

Refer to the following image if unable to locate the app-level Gradle file that invokes the dependency (under project hierarchy view). After invoking the dependency click on the “Sync Now” button. Make sure the system is connected to the network so that Android Studio downloads the required files.

Step 3: Creating a menu in the menu folder

Create the menu folder under the res folder. To implement the menu. Refer to the following video to create the layout to implement the menu.

Video Player

00:00

00:31

Invoke the following code in the navigation_menu.xml

• XML

 

<?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:ignore="HardcodedText">        <item         android:id="@+id/nav_account"         android:title="My Account" />        <item         android:id="@+id/nav_settings"         android:title="Settings" />        <item         android:id="@+id/nav_logout"         android:title="Logout" />    </menu>

Step 4: Working with the activity_main.xml File

Invoke the following code in the activity_main.xml to set up the basic things required for the Navigation Drawer. 

• XML

 

<?xml version="1.0" encoding="utf-8"?>    <!-- the root view must be the DrawerLayout -->    <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/my_drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity"     tools:ignore="HardcodedText">        <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent">            <TextView             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_marginTop="128dp"             android:gravity="center"             android:text="GeeksforGeeks"             android:textSize="18sp" />     </LinearLayout>        <!-- this the navigation view which draws and shows the navigation drawer -->     <!-- include the menu created in the menu folder -->     <com.google.android.material.navigation.NavigationView         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:layout_gravity="start"         app:menu="@menu/navigation_menu" />    </androidx.drawerlayout.widget.DrawerLayout>

 Output UI: 

 

One thing to be noticed is that the menu drawer icon is still not appeared on the action bar. We need to set the icon and its open-close functionality programmatically. 

Step 5: Include the Open Close strings in the string.xml 

Invoke the following code in the app/res/values/strings.xml file. 

• XML

 

<resources>     <string name="app_name">Navigation Drawer</string>     <!-- to toggle the open close button of the navigation drawer -->     <string name="nav_open">Open</string>     <string name="nav_close">Close</string> </resources>

Step 6: Working with the MainActivity File

• Invoke the following code in the MainActivity file to show the menu icon on the action bar and implement the open-close functionality of the navigation drawer.
• Comments are added inside the code for better understanding.

• Java
• Kotlin

 

import androidx.annotation.NonNull; import androidx.appcompat.app.ActionBarDrawerToggle; import androidx.appcompat.app.AppCompatActivity; import androidx.drawerlayout.widget.DrawerLayout; import android.os.Bundle; import android.view.MenuItem;    public class MainActivity extends AppCompatActivity {        public DrawerLayout drawerLayout;     public ActionBarDrawerToggle actionBarDrawerToggle;        @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            // drawer layout instance to toggle the menu icon to open          // drawer and back button to close drawer         drawerLayout = findViewById(R.id.my_drawer_layout);         actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close);            // pass the Open and Close toggle for the drawer layout listener         // to toggle the button         drawerLayout.addDrawerListener(actionBarDrawerToggle);         actionBarDrawerToggle.syncState();            // to make the Navigation drawer icon always appear on the action bar         getSupportActionBar().setDisplayHomeAsUpEnabled(true);     }        // override the onOptionsItemSelected()     // function to implement      // the item click listener callback     // to open and close the navigation      // drawer when the icon is clicked     @Override     public boolean onOptionsItemSelected(@NonNull MenuItem item) {            if (actionBarDrawerToggle.onOptionsItemSelected(item)) {             return true;         }         return super.onOptionsItemSelected(item);     } }

Output: Run on Emulator 

Video Player

00:00

00:08

Feeling lost in the vast world of Backend Development? It's time for a change! Join our Java Backend Development - Live Course and embark on an exciting journey to master backend development efficiently and on schedule.
What We Offer:

• Comprehensive Course
• Expert Guidance for Efficient Learning
• Hands-on Experience with Real-world Projects
• Proven Track Record with 100,000+ Successful Geeks