How to Add Icons in Navigation Drawer in Android?

Android navigation drawer is a user interface that shows the app’s main navigation menu. It appears when the user touches the drawer icon in the app bar or when the user swipes their fingers or does some kind of action on the screen. It is not visible by default and it needs to open either by sliding from the left or clicking its icon in the ActionBar. It shows all the internal of the app and its functionalities.

Android Icons

Android icons represent our app on a device’s Home and All Apps screens. They are the symbolic representation of all functions present in the app.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2:

In your res folder make a menu folder. In it add xml file name nav_menu. Add this below code.

XML

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tool="http//schemas.android. com/tools"
    tool:showIn ="navigation_view">
    <group
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:title="Home"
            android:icon="@drawable/home">
        </item>

        <item
            android:title="Attendance Track"
            android:id="@+id/attend_track"
            android:icon="@drawable/baseline_how_to_reg_24">
        </item>

        <item
            android:title="QR Scan"
            android:id="@+id/scan_qr"
            android:icon="@drawable/baseline_qr_code_scanner_24">
        </item>
    </group>

    <item android:title="General">
        <menu>
                <item android:title="Profile"
                    android:id="@+id/profile"
                    android:icon="@drawable/user"/>

            <item android:title="Settings"
                android:id="@+id/settings"
                android:icon="@drawable/baseline_settings_24"/>
        </menu>
    </item>

    <item android:title="Communicate">
        <menu>
                <item
                    android:title="How To Use"
                    android:icon="@drawable/baseline_emoji_people_24"
                    android:id="@+id/use"/>
                <item
                    android:title="Suggestions"
                    android:icon="@drawable/question"
                    android:id="@+id/sugg"/>
                <item android:title="Share App"
                    android:icon="@drawable/baseline_share_24"
                    android:id="@+id/share"/>
        </menu>
    </item>
</menu>

Step 3:

In your layout folder add nav_header.xml. Add the below code

XML

<?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:orientation="vertical"
    android:gravity="top"
    android:padding="10dp"
    android:background="@drawable/grad">

    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Navigation Bar"
        android:layout_marginLeft="9dp"
        android:fontFamily="@font/regular"
        android:textSize="20sp"
        android:textColor="@color/white"
        android:textStyle="bold"/>

</LinearLayout>

Step 4:

In your drawable folder make a grad.xml .Add this code to it.

XML

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="15dp"
                android:bottomRightRadius="15dp">
            </corners>
            <gradient
                android:startColor="#615EE8"
                android:endColor="#7F6CEF"/>
        </shape>
    </item>
</selector>

Step 5:

Go to your main activity and add the code given below.

XML

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"
    tools:context=".MainActivity">

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

        <Toolbar
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:id="@+id/toolbar"
            android:elevation="4dp"
            android:background="@color/grad_1"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            tools:targetApi="lollipop" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/frag_con"/>

    </LinearLayout>

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

</com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

Output: