Create a Navigation Drawer in Android – Android Studio

Hello guys! This post talks about another commonly used UI pattern namely the “Navigation drawer”. With the navigation drawer one can navigate to many screens or functionalities of the app by clicking on the ‘hamburger’ icon. Swiping from the left is also a way to bring the drawer into view, a screen then slides in, showing many items. You can click on these said items and go to those screens to use that feature of the app. So Let’s get started!

Navigation Drawer in Android – Android Studio

Download project files of Android Navigation Drawer with all custom designs and image resources.

Step 1:
Create a new project in Android Studio in a normal way. Open your build.gradle file and add the following lines in your dependencies.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'


    implementation 'com.android.support:design:28.+'

    implementation('com.mikepenz:materialdrawer:5.9.1@aar') {
        transitive = true
    }

    // For image
    implementation('com.squareup.picasso:picasso:2.5.2') {
        exclude group: 'com.android.support'
        exclude module: 'appcompat-v7'
        exclude module: 'support-v4'

        //For drawer
        implementation("com.mikepenz:materialdrawer:6.0.6@aar") {
            transitive = true
        }
        //For font
        implementation 'com.mikepenz:fontawesome-typeface:4.7.0.0@aar'
    }
}

Change according to your target SDK version.

Step 2:
Add the below style codes in your styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- your app branding color for the app bar -->
        <item name="colorPrimary">#009688</item>
        <!-- darker variant for the status bar and contextual app bars -->
        <item name="colorPrimaryDark">#00897B</item>
        <!-- theme UI controls like checkboxes and text fields -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Step 3:
Open your activity_main.xml file. Use a LinearLayout to arrange the text views and buttons. You can adjust the textSize to suit various devices.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:background="#EEEEEE">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/kdjnc"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:drawablePadding="0dp"
                android:gravity="center_vertical|start"
                android:paddingLeft="4dp"
                android:paddingRight="4dp"
                android:textColor="#ffffff"
                android:text="Navigation Drawer"
                android:textSize="20dp"
                android:textStyle="bold"
                />
        </LinearLayout>

    </android.support.v7.widget.Toolbar>

</LinearLayout>

Step 4:
Open your MainActivity.java file, it will look like this.

package com.example.mahmudul.navigationdrawer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import com.mikepenz.fontawesome_typeface_library.FontAwesome;
import com.mikepenz.materialdrawer.AccountHeader;
import com.mikepenz.materialdrawer.AccountHeaderBuilder;
import com.mikepenz.materialdrawer.Drawer;
import com.mikepenz.materialdrawer.DrawerBuilder;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem;

public class MainActivity extends AppCompatActivity {

    //Created by Mahmudul Hasan

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

        //add toolbar start

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        //if you want to update the items at a later time it is recommended to keep it in a variable
        PrimaryDrawerItem item1 = new PrimaryDrawerItem().withIdentifier(1).withName("TOOLBAR");

        //to add image in drawer
        AccountHeader headerResult = new AccountHeaderBuilder()
                .withActivity(this)
                .withHeaderBackground(R.drawable.pic)

                .build();

       //create the drawer and remember the `Drawer` result object
        Drawer result = new DrawerBuilder()

                .withActivity(this)
                .withAccountHeader(headerResult)
                .withToolbar(toolbar)
                //Create the drawer result object
                .addDrawerItems(
                        new PrimaryDrawerItem().withName("Home").withIcon(FontAwesome.Icon.faw_home).withIdentifier(1).withSelectable(true),
                        new PrimaryDrawerItem().withName("Picture").withIcon(FontAwesome.Icon.faw_picture_o).withIdentifier(2).withSelectable(true),
                        new PrimaryDrawerItem().withName("About").withIcon(FontAwesome.Icon.faw_info).withIdentifier(3).withSelectable(true)

                )
                .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {

                        return true;
                    }
                })
                .build();

        //add toolbar fisish
        
    }
}

Step 5:
Finally add your AndroidManifest.xml looks like this.

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme" >
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>


</application>

You are done. Now run and test the app. You can add your custom designs and also other features now. It was really easy.

Leave a Reply