Navigation Drawer

Prepared by
Smita Mande
 Navigation Drawer
• Navigation Drawer is a side menu panel that consists of different navigating
fragments. The menu is provided at the left of the screen which opens and
closes as per your user requirements, There are different fragments present in
the menu, so when you click on any one fragment it will lead you to a different
screen.
• The navigation drawer slides in from the left and contains the navigation
destinations for the app.
• The best example would be Gmail App, when you click on the menu a side
panel opens up that consists of All Inboxes, Primary, Promotions, and Socials
Steps to create navigation drawer in android

Adding a dependency to the project

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.
 Creating a menu in the menu folder
Create the menu folder under the res folder. To implement the menu.

https://www.geeksforgeeks.org/navigation-drawer-in-android/

<?xml version="1.0" encoding="utf-8"?>

XML <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>
 <?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">

activity_main.xml <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>
the menu drawer icon is still not appeared on the action bar. We need to set the icon and its open-
close functionality programmatically.

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>
 MainActivity.java
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);
}
}