Android Navigation Drawer in Android-Java using Androidx

thumbnail

In this tutorial, you’ll learn to implement a navigation drawer in Android applications using the newest library Androidx. Android navigation drawer is a sliding menu and it’s an important user interface component in Android application. You will see navigation drawer in most of the Android applications, it’s the same as navigation menu bars in the websites.

Androidx

Androidx is the open-source project that the Android team uses to develop, test, package, version, and release libraries within Jetpack. Androidx is major improvement to the original Android Support Library. Like the Support Library, AndroidX ships separately from the Android OS and provides backwards-compatibility across Android releases. AndroidX fully replaces the Support Library by providing feature parity and new libraries. If you don’t know about the mapping of artifact in android, then you don’t need to worry about because there’s a page from developer.android.com that list all of it. You can check the artifact mappings through this artifact mappings link.

Android Navigation Drawer

Android Navigation Drawer is a sliding left menu that is used to display the important links, screen or menus in the application. With the implementation of navigation drawer, it makes user to navigate easily from one to another between those links. It’s not visible by default and it needs to opened either by clicking its icon in the ActionBar or slider from left to right in the screen.

In wider terms, navigation drawer is an overlay panel, which is a replacement of an activity screen which was specifically dedicated to show all the options and links in the apps.

Now we will begin to learn about the implementation of navigation drawer. First, you need to add dependency in build.gradle.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation "androidx.core:core-ktx:1.1.0"
    implementation "com.android.support.constraint:constraint-layout:1.1.3"
    implementation "androidx.coordinatorlayout:coordinatorlayout:1.0.0"
    implementation 'com.google.android.material:material:1.0.0'

    // Drawer Layout
    implementation "androidx.drawerlayout:drawerlayout:1.0.0"
}

The AndroidManifest.xml code is given below.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.inpows.creativejava">

    <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=".DashboardActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

There are also several icons you need to add to the drawable folder, such as: exit to app, account box, apps, explore, and grade icon.

The values folder is given in several xml files below.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

dimen.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="toolbar_elevation_size" tools:override="true">4dp</dimen>
    <dimen name="event_title_text_size" tools:override="true">20sp</dimen>

</resources>

strings.xml

<resources>
    <string name="app_name">Creative Android - Java</string>
    <string name="dashboard">Dashboard</string>
    <string name="favourite">Favourite</string>
    <string name="login">Login</string>
    <string name="profile">Profile</string>
    <string name="explore">Explore</string>
    <string name="trending">Trending</string>
    <string name="news">News</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

    <string name="screen_dashboard">Dashboard Screen</string>
    <string name="screen_login">Login Screen</string>
    <string name="screen_explore">Explore Screen</string>
    <string name="screen_trending">Trending Screen</string>
    <string name="screen_profile">Profile Screen</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <!-- Disable windowActionBar. -->
    <style name="AppTheme.WithoutActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="ToolBarStyle" parent="ToolBarStyle.Base"/>

    <style name="ToolBarStyle.Base" parent="">
        <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
        <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    </style>

    <style name="ToolBarStyle.Event" parent="ToolBarStyle">
        <item name="titleTextAppearance">@style/TextAppearance.Widget.Event.Toolbar.Title</item>
    </style>

    <style name="TextAppearance.Widget.Event.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <!--Any text styling can be done here-->
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">@dimen/event_title_text_size</item>
        <item name="android:textAlignment">center</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:gravity">center</item>
        <item name="android:ellipsize">end</item>
        <item name="android:maxLines">2</item>
    </style>

</resources>

To implement the Navigation Drawer, we first need to add androidx.drawerlayout.widget.DrawerLayout as the root of the activity layout as shown below.

activity_main.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:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".DashboardActivity">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/mainAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            >
            <androidx.appcompat.widget.Toolbar
                style="@style/ToolBarStyle.Event"
                android:id="@+id/mainToolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:elevation="@dimen/toolbar_elevation_size">

            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/screenText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Dashboard Screen"
            android:gravity="center"
            app:layout_constraintTop_toBottomOf="@id/mainAppBar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>


    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:itemIconTint="#ff1b6bae"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_view_items" />
</androidx.drawerlayout.widget.DrawerLayout>

navigation_view_items.xml

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

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_apps_black_24dp"
        android:title="@string/dashboard" />
    <item
        android:id="@+id/navigation_login"
        android:icon="@drawable/ic_exit_to_app_black_24dp"
        android:title="@string/login" />

    <item
        android:id="@+id/navigation_explore"
        android:icon="@drawable/ic_explore_black_24dp"
        android:title="@string/explore" />
    <item
        android:id="@+id/navigation_trending"
        android:icon="@drawable/ic_grade_black_24dp"
        android:title="@string/trending" />

    <item
        android:id="@+id/navigation_profile"
        android:icon="@drawable/ic_account_box_black_24dp"
        android:title="@string/profile" />
</menu>

navigation_header.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@color/colorPrimaryDark" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="100dp"
        android:padding="30dp"
        android:src="@drawable/ic_launcher_background" />

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

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="16dp"
            android:text="USERNAME"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:text="EMAIL"
            android:textColor="#fff" />
    </LinearLayout>
</FrameLayout>

The DashboardActivity.java source code is given below.

DashboardActivity.java

package com.inpows.creativejava;

import android.content.res.Configuration;
import android.os.Bundle;
import android.view.MenuItem;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatTextView;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;

import com.google.android.material.navigation.NavigationView;

import org.jetbrains.annotations.NotNull;

public class DashboardActivity extends AppCompatActivity implements
        NavigationView.OnNavigationItemSelectedListener{

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle drawerToggle;
    NavigationView navigationView;
    AppCompatTextView screenText;
    Toolbar toolbar;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dashboard);

        toolbar = findViewById(R.id.mainToolbar);
        toolbar.setTitle(R.string.dashboard);
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        drawerLayout = findViewById(R.id.drawerLayout);
        drawerToggle = new ActionBarDrawerToggle(DashboardActivity.this, drawerLayout, R.string.hello_world, R.string.hello_world);
        drawerLayout.addDrawerListener(drawerToggle);
        drawerToggle.syncState();
        navigationView  = findViewById(R.id.navigation_view);
        navigationView.setNavigationItemSelectedListener(this);
        screenText = findViewById(R.id.screenText);
        screenText.setText(R.string.screen_dashboard);

    }

    @Override
    public void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        drawerToggle.syncState();
    }

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

    @Override
    public void onConfigurationChanged(@NotNull Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        menuItem.setChecked(true);
        drawerLayout.closeDrawers();
        int id = menuItem.getItemId();
        switch (id) {
            case R.id.navigation_dashboard:
                //Do some thing here
                // add navigation drawer item onclick method here
                toolbar.setTitle(R.string.dashboard);
                screenText.setText(R.string.screen_dashboard);
                break;
            case R.id.navigation_explore:
                //Do some thing here
                // add navigation drawer item onclick method here
                toolbar.setTitle(R.string.explore);
                screenText.setText(R.string.screen_explore);
                break;
            case R.id.navigation_login:
                //Do some thing here
                // add navigation drawer item onclick method here
                toolbar.setTitle(R.string.login);
                screenText.setText(R.string.screen_login);
                break;
            case R.id.navigation_profile:
                //Do some thing here
                // add navigation drawer item onclick method here
                toolbar.setTitle(R.string.profile);
                screenText.setText(R.string.screen_profile);
                break;
            case R.id.navigation_trending:
                //Do some thing here
                // add navigation drawer item onclick method here
                toolbar.setTitle(R.string.profile);
                screenText.setText(R.string.screen_trending);
                break;
        }
        return false;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        if (drawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Android Navigation Drawer Output

Below is the output produced by implementing the above source code.

Back To Top