How to implement Navigation Drawer with Android Navigation Component

In this android programming source code example, we are going to implement Navigation Drawer with Android Navigation Component.

You can copy and adopt this source code example to your android project without reinventing the wheel.

Below is a step by step source code to implement Navigation Drawer with Android Navigation Component.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"    tools:context=".BluetoothAndNavigation.BluetoothAndNavigationActivity19">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar">

        <fragment
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph9" />

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

    </androidx.drawerlayout.widget.DrawerLayout>

</RelativeLayout>

res/layout/drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="178dp"
    android:background="#9c9c9c"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

  <ImageView
     android:id="@+id/profile_image"
     android:layout_width="70dp"
     android:layout_height="70dp"
     android:layout_marginTop="15dp"
     android:src="@mipmap/ic_launcher" />

   <TextView
     android:id="@+id/username_field"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_below="@+id/profile_image"
     android:text="Username"
     android:textAppearance="@style/TextAppearance.AppCompat.Body1"
     android:textStyle="bold" />

    <TextView
     android:id="@+id/email_field"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_below="@+id/username_field"
     android:text="Email"
     android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</RelativeLayout>

res/navigation/nav_graph9.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/nav_graph9"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.bluapp.androidview2.BluetoothAndNavigation.NavSecFragment"
        android:label="fragment_nav_sec"
        tools:layout="@layout/fragment_nav_sec" />
    <fragment
        android:id="@+id/directionFragment"
        android:name="com.bluapp.androidview2.BluetoothAndNavigation.NavSecFragment"
        android:label="fragment_nav_sec"
        tools:layout="@layout/fragment_nav_sec" />
    <fragment
        android:id="@+id/commentFragment"
        android:name="com.bluapp.androidview2.BluetoothAndNavigation.NavSecFragment"
        android:label="fragment_nav_sec"
        tools:layout="@layout/fragment_nav_sec" />

</navigation>

res/menu/drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">

    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/tab_home"
        android:title="Home"/>

    <item
        android:id="@+id/directionFragment"
        android:icon="@drawable/tab_direction"
        android:title="Direction"/>

    <item
        android:id="@+id/commentFragment"
        android:icon="@drawable/tab_comment"
        android:title="Comment"/>

    </group>

</menu>

fragment_nav_sec.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/constraintlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BluetoothAndNavigation.NavSecFragment">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Blank Fragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

NavSecFragment.java

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class NavSecFragment extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_nav_sec, container, false);
        return rootView;
    }
}

app/build.gradle

implementation 'androidx.navigation:navigation-fragment:2.1.0-alpha06'
implementation 'androidx.navigation:navigation-ui:2.1.0-alpha06'

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment