Navigation Drawer Android Studio - Create a simple UI design navigation drawer in Android Studio

A navigation drawer is a commonly used user interface pattern in Android apps that provides a convenient way for users to navigate through the app. It is a sliding panel that appears from the left-hand side of the screen when the user swipes from the edge of the screen or taps on the navigation icon.

Navigation Drawer Android Studio

In this article, we will discuss how to implement a navigation drawer in Android Studio. We will go through the process step-by-step and provide code snippets for each step.

Step 1: Create an Empity Activty in your project.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="false">

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

            <!--Put your content here-->

            <Button
                android:id="@+id/openButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:text="Open Drawer"/>


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Navigation Drawer Tasting"/>


        </LinearLayout>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>


    <!--drawer layout-->

    <LinearLayout
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/transparent"
        android:orientation="horizontal"
        android:fitsSystemWindows="false">

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

    </LinearLayout>


</androidx.drawerlayout.widget.DrawerLayout>

Step 2: Create a xml layout and give the name drawer_layout.xml.

drawer_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clickable="true"
    android:orientation="vertical"
    android:background="@color/white"
    android:layout_height="match_parent">


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


        <androidx.cardview.widget.CardView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            app:cardCornerRadius="100dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/app_logo"/>


        </androidx.cardview.widget.CardView>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginRight="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="30dp"
            android:gravity="bottom"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/nameText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:letterSpacing="0.05"
                android:textColor="@color/black"
                android:textSize="18sp"
                android:layout_marginLeft="8dp"
                android:alpha="0.7"
                android:text="RECKLET"/>

            <TextView
                android:id="@+id/emailText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:letterSpacing="0.05"
                android:textColor="@color/black"
                android:textSize="12sp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="8dp"
                android:alpha="0.7"
                android:text="https://recklet.com"/>


        </LinearLayout>


    </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:alpha="0.2"
        android:background="@color/black"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:fillViewport="true">

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


            <LinearLayout
                android:id="@+id/drawerYoutube"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="20dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/youtube_icon" />


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="YouTube"
                    android:textSize="18sp" />


            </LinearLayout>

            <LinearLayout
                android:id="@+id/drawerTelegram"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/telegram_icon" />


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Telegram"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerInstagram"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/instagram_icon" />


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Instagram"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerTutorial"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/baseline_videocam_24"
                    app:tint="@color/purple_500"/>


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Watch Tutorial"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerShare"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/baseline_share_24"
                    app:tint="@color/purple_500" />


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Share"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerPrivacy"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/baseline_privacy_tip_24"
                    app:tint="@color/purple_500"/>


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Privacy Policy"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerTerms"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/baseline_info_24"
                    app:tint="@color/purple_500"/>


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Terms &amp; Conditions"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerAbout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/baseline_account_circle_24"
                    app:tint="@color/purple_500"/>


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="About Us"
                    android:textSize="18sp" />


            </LinearLayout>


            <LinearLayout
                android:id="@+id/drawerLogout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginLeft="15dp"
                    android:src="@drawable/baseline_logout_24"
                    app:tint="@color/purple_500"/>


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:gravity="center_vertical"
                    android:textColor="@color/black"
                    android:alpha="0.6"
                    android:text="Logout"
                    android:textSize="18sp" />


            </LinearLayout>

        </LinearLayout>


    </ScrollView>




</LinearLayout>

Step 3: Here is the java code for the Activity.

MainActivity.java

package com.my.navigationdrawer;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {


    DrawerLayout drawerLayout;
    Button openButton;
    LinearLayout navView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        drawerLayout = findViewById(R.id.drawerLayout);
        openButton = findViewById(R.id.openButton);
        navView = findViewById(R.id.navView);


        setupDrawer();


        openButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                drawerLayout.openDrawer(GravityCompat.START);

            }
        });


    }

    private void setupDrawer() {


        LinearLayout drawerYoutube = navView.findViewById(R.id.drawerYoutube);
        LinearLayout drawerInstagram = navView.findViewById(R.id.drawerInstagram);

        drawerYoutube.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent i = new Intent(Intent.ACTION_VIEW);
                i.setData(Uri.parse("https://Youtube.com/@Recklet"));
                startActivity(i);

            }
        });

    }

    @Override
    public void onBackPressed() {

        if(drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else{
            super.onBackPressed();
        }

    }
}

Step 4: Now add all icon resources into your project. I have not given icons becuase of copyright issue.

You can Download this project from PROJECT STORE

Important things related to Navigation Drawer

When implementing a Navigation Drawer in Android Studio, it's important to consider the following points:

Step 1: Plan your navigation: Before creating the Navigation Drawer, it's important to plan out the navigation flow of your app. Determine which screens or sections of your app will be accessible through the Navigation Drawer.

Step 2: Customize the header: The header of the Navigation Drawer is an important part of the user interface. Make sure to customize it with appropriate images, text, and colors that match the design of your app.

Step 3: Use appropriate icons: The Navigation Drawer typically includes icons next to each menu item. Use appropriate icons that represent the corresponding screen or section of your app.

Step 4: Use the correct layout: Make sure to use the DrawerLayout and NavigationView layout as described in the Android documentation. This will ensure that the Navigation Drawer functions correctly and provides a smooth user experience.

Step 5: Handle item selection: When a user selects a menu item in the Navigation Drawer, you need to handle the selection event and update the content of the main activity accordingly.

By keeping these points in mind, you can create a well-designed and functional Navigation Drawer in your Android app that enhances the user experience and makes navigation more intuitive.