Lab: 04 Develop an application for working with Menus and screen

Navigation
The navigation drawer is the most common feature offered by android and the
navigation drawer is a UI panel that shows your app’s main navigation menu. It is also
one of the important UI elements, which provides actions preferable to the users like
example changing user profile, changing settings of the application, etc.

The user can view the navigation drawer when the user swipes a finger from the left
edge of the activity. They can also find it from the home activity by tapping the app icon
in the action bar. The drawer icon is displayed on all top-level destinations that use a
DrawerLayout. Have a look at the following image to get an idea about the Navigation
drawer.

Steps to Implement Navigation Drawer in Android

Step 1: Create an Android Studio Project

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 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.
Create the layout to implement the menu.
• Invoke the following code in the navigation_menu.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 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 styles.xml file.
<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.java file

Invoke the following code in the MainActivity.java 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. 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