Tutorial Dasar Cara Membuat Navigation Drawer di Android Studio

Halo para android developer muda, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial dasar cara membuat navigation drawer di android studio.

Navigation Drawer adalah komponen dari library material design yang sangat keren. Komponen ini biasanya muncul dari sisi kiri layar. Di waktu biasa, navigation drawer tidak terlihat, komponen ini akan terlihat jika user mengetuk ikon pada actionbar atau menggeser layar dari kiri ke kanan.

Dalam tutorial ini, kalian akan belajar cara membuat aplikasi android untuk menampilkan komponen navigation drawer di android studio menggunakan library material design dengan cara yang sederhana dan mudah.

Tutorial Dasar Cara Membuat Navigation Drawer di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Navigation Drawer
Package Name:com.androidrion.navigationdrawer
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml
  2. layout_header_drawer.xml

Daftar file xml menu yang digunakan dalam project ini:

  1. menu_navigation.xml

Daftar file java yang digunakan dalam project ini:

  1. MainActivity.java

Berikut adalah gambar dari struktur project dari aplikasi Navigation Drawer.

Di bawah ini adalah langkah-langkah dalam pembuatan aplikasi Navigation Drawer.

Library Material Design

Untuk menggunakan komponen ini dalam project android studio, kalian harus menambahkan terlebih dahulu library material design. Tambahkan kode dibawah ini pada project android studio kalian dalam file build.gradle (Module: app)

Gradle Scripts/build.gradle (Module: app)

    implementation 'com.google.android.material:material:1.0.0'

Ikuti tutorial di bawah ini untuk menambahkan library material design kedalam projek android studio.

CARA MENAMBAHKAN LIBRARY KE DALAM PROJEK ANDROID STUDIO

Styles File

Buka file styles.xml dalam folder values. Ubah theme default menjadi NoActionBar. Berikut ini adalah kode lengkap untuk file styles.xml

app/res/values/styles.xml

<resources>

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

</resources>

Drawable File

Dalam tutorial ini saya menggunakan beberapa ikon material untuk di tampilkan pada aplikasi ini. Berikut ini adalah ikon yang digunakan.

Simpan masing-masing dari ikon tersebut seperti pada gambar struktur project di atas. Ikuti tutorial di bawah ini untuk menambahkan ikon material di atas ke dalam projek android studio.

CARA MENAMBAHKAN IKON MATERIAL KE DALAM PROJECT ANDROID STUDIO

Menu Resource Directory

Buatlah folder menu dalam project android studio kalian dengan cara klik kanan pada folder res, lalu pilih Android Resource Directory. Karena langkahnya panjang, kalian bisa mengikuti tutorial di bawah ini untuk selanjutnya.

CARA MENAMBAHKAN FOLDER RESOURCE DIRECTORY DI PROJECT ANDROID STUDIO

XML Menu File

Buat file xml menu dengan cara klik kanan pada folder menu, lalu pilih New>Menu resource file. Simpan file tersebut dengan nama menu_navigation. Berikut ini adalah kode lengkap untuk file menu_navigaiton.xml

app/res/menu/menu_navigation.xml

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

    <group
        android:id="@+id/grp_1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:checked="true"
            android:icon="@drawable/ic_home"
            android:title="Dashboard" />
        <item
            android:id="@+id/nav_account"
            android:icon="@drawable/ic_account_circle"
            android:title="My Accout" />
        <item
            android:id="@+id/nav_notification"
            android:icon="@drawable/ic_notifications"
            android:title="Notification" />
    </group>
    <group
        android:id="@+id/grp_2"
        android:checkableBehavior="none">
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings"
            android:title="Settings" />
        <item
            android:id="@+id/nav_help"
            android:icon="@drawable/ic_help"
            android:title="Help" />
    </group>

</menu>

Hasil dari kode diatas akan terlihat seperti pada gambar dibawah ini.

XML Layout File

Buat file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file tersebut dengan nama layout_header_drawer.xml. Berikut ini adalah kode untuk layout_header_drawer.xml

app/res/layout/layout_header_drawer.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="172dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/background_nav" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="15dp"
        android:orientation="vertical">

        <TextView
            style="@style/TextAppearance.AppCompat.Body2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:text="Android Rion"
            android:textColor="@android:color/white" />

        <TextView
            style="@style/TextAppearance.AppCompat.Body1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[email protected]"
            android:textColor="@android:color/white" />

    </LinearLayout>

</RelativeLayout>

Dalam kode ini, kalian akan mendapati kode yang error. Itu karena kalian tidak memiliki gambar yang dijadikan background untuk ImageView. Untuk mengatasi masalah ini, tambahkan gambar ke dalam project android studio kalian dengan nama background_nav. Simpan gambar tersebut dalam folder drawable.

Buka file activity_main.xml dalam folder layout. Ubah layout default menjadi DrawerLayout. Lalu di dalamnya, tambahkan CoordinatorLayout dan NavigationView. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

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

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentInsetStartWithNavigation="0dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false"
        app:headerLayout="@layout/layout_header_drawer"
        app:menu="@menu/menu_navigation" />
</androidx.drawerlayout.widget.DrawerLayout>

Java Activity File

Buka file MainActivity dalam folder java. Di bawah ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.navigationdrawer/MainActivity.java

package com.androidrion.navigationdrawer;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {

    Menu menu_nav;

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeButtonEnabled(true);
            getSupportActionBar().setTitle("Navigation Drawer");
        }

        final NavigationView nav_view = findViewById(R.id.nav_view);
        final DrawerLayout drawer = findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar,
                R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                //updateCounter(nav_view);
                super.onDrawerOpened(drawerView);
            }
        };

        //updateCounter(nav_view);
        menu_nav = nav_view.getMenu();

        toggle.syncState();
        nav_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                Toast.makeText(getApplicationContext(), menuItem.getTitle() + " Selected",
                        Toast.LENGTH_SHORT).show();
                drawer.closeDrawers();
                return true;
            }
        });
    }

    private void updateCounter(NavigationView nav) {
        Menu menu = nav.getMenu();
        TextView badgeText = menu.findItem(R.id.nav_notification).getActionView().findViewById(R.id.text);
        badgeText.setText("3 new");
        badgeText.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
    }
}

Run ‘app’

Sekarang jalankan project android studio kalian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat tampilan navigation drawer di aplikasi android. Tutorial di atas sangatlah mudah untuk dikerjakan karena masih dasar. Mungkin selanjutnya saya akan membagikan tutorial bagaimana cara membuka activity baru ketika menu pada navigation drawer di klik.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Projek

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Get real time updates directly on you device, subscribe now.

You might also like

Leave A Reply

Your email address will not be published.