How To Add Navigation Drawer In Your Application Using Android Studio

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

Navigation drawers are recommended for:

  • Apps with five or more top-level destinations
  • Apps with two or more levels of navigation hierarchy
  • Quick navigation between unrelated destinations

So lets start by creating a project in android studio or you can just add the below code in your project and make the neccessary changes.

Step 1: Open your mainactivity in which you want to add your navigation drawer and then add a drawer layout in it.After adding an drawer layout you can add navigation View in the layout after the view that you have already added.

<?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:context=".MainActivity"
tools:openDrawer="start">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/design_default_color_primary"
android:id="@+id/toolbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:elevation="4dp"/>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView"
android:layout_width="202dp"
android:layout_height="46dp"
android:layout_marginTop="32dp"
android:text="Navigation Drawer Example"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="@+id/nav_view"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawer_menu"/>

</androidx.drawerlayout.widget.DrawerLayout>

Step 2: the next step would be adding a nav header, which would be passed as an value to “app:headerLayout” attribute.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="176dp"
android:background="@color/colorAccent"
android:gravity="bottom"
android:orientation="vertical"
android:paddingTop="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:text="NoteMate"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

This is how the nav Header looks like.

Step 3: Create a android resource directory(Resource type=Menu) in the res folder and name the file name of your choice.

<?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>
<item
android:id="@+id/A"
android:icon="@drawable/ic_sign_out"
android:title="A"
tools:ignore="HardcodedText" />
<item
android:id="@+id/B"
android:icon="@drawable/ic_sign_out"
android:title="B"
tools:ignore="HardcodedText" />
<item
android:id="@+id/C"
android:icon="@drawable/ic_sign_out"
android:title="C"
tools:ignore="HardcodedText" />
<item
android:id="@+id/D"
android:icon="@drawable/ic_sign_out"
android:title="D"
tools:ignore="HardcodedText" />
</group>

</menu>

Step 4: In Strings.XML enter the following two string in the file as it will be needed as attributes in mainActivity.

<resources>
<string name="app_name">Navigation_Drawer</string>
<!-- add only the following two code -->
<string name="navigation_drawer_open">Open Navigation drawer</string>
<string name="navigation_drawer_close">Close Navigation drawer</string>

</resources>

Step 5: Open your Main Activity and paste the following code in it.

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawer;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
drawer = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_open);
drawer.addDrawerListener(toggle);
toggle.syncState();
}

@Override
public void onBackPressed() {
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
}
else {
super.onBackPressed();
}

}
}

Output: After you run the application it would look like the below images.

Make sure to comment below and let us know whether it worked for you or not.

Happy Coding mates!

1 thought on “How To Add Navigation Drawer In Your Application Using Android Studio”

  1. Pingback: Activity Lifecycle - Code-Tech Community

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shopping Cart