Pada tutorial belajar android kali ini , kita akan mencoba membuat dan
menerapkan Navigation Drawer View dengan dukungan Material Design
Android.
1. Pertama buka Android Studio
2. Pilih Start a New Android Studio Project
 |
| Start a New Android Studio Project |
3.Kedua pada bagian Create New Project, sesuaikan dengan nama dan
package serta lokasi file yang akan kalian gunakan. Untuk contoh saya
menggunakan seperti yang ada di gambar di bawah. Jika sudah pilih Next.
- Application name: Contoh Navigation Drawer
- Company Domain : okedroid.com
- Package Name :com.okedroid.contohnavigationdrawer
 |
| Configure New Project |
4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.
 |
| Target Android Devices |
5. Nah pada bagian Add an Activity to Mobile , sebenarnya kita
tidak perlu lagi coding dan buat dari awal Navigation Drawer View
,karna sudah disediakan templatenya di Android Studio, dengan memilih Navigation Drawer Activity, namun disini kita akan membuatnya secara manual jadi kita pilih Empty Activity lalu pilih Next
 |
| Empty Activity |
6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.
 |
| Customize the Activity |
7.Setelah itu kita tunggu sampai proses building project gradle selesai .
8. Setelah selesai proses building , kita akan mencoba membuat Navigation Drawer View berikut langkah-langkahnya:
Sebelum memulai untuk secara default pastikan pada build gradle khususnya di bagian dependencies kalian setting seperti ini :
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
Pada bagian folder values (app/res/values) kalian terapkan baris intruksi (codingan) dibawah pada masing-masing file:
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!-- Customize your theme here. -->
</style>
strings.xml
<resources>
<string name="app_name">"Contoh Navigation Drawer "</string>
<string name="openDrawer">Drawer dibuka</string>
<string name="closeDrawer">Drawer ditutup</string>
<string name="navigation_view_item_1">Beranda</string>
<string name="navigation_view_item_2">Profil</string>
<string name="navigation_view_item_3">Daftar</string>
<string name="navigasi_kategori_2">Sub Item Navigasi</string>
<string name="navigation_view_item_4">Settings</string>
<string name="navigation_view_item_5">About</string>
3) Siapkan icon/gambar di drawable
Siapkan gambar .png atau vector .xml lalu simpan pada folder (app/res/drawable)
Contohnya seperti ini :
 |
| drawable |
Untuk membuat gambar vector di Android Studio.
Kalian dapat membaca artikel tips sebelumnya:
Baca : Tips Membuat Gambar SVG(Scalabe Vector Graphic) di Android Studio
4) Membuat folder menu
Secara default (bawaan) jika kita memilih Empty Activity , tidak disertakan folder menu di resource ,jadi kita akan membuatnya secara manual dengan cara:
 |
| Android Resource directory |
Pilih menu lalu pilih tombol OK.
 |
| Buat folder menu resource |
Buat file xmlnya saya memberikan nama item_navigasi.xml (Terserah kalian ) pada file menu. Salin baris intruksi (codingan ) di bawah :
item_navigasi.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="all">
<item
android:id="@+id/navigation1"
android:checked="false"
android:icon="@drawable/ic_beranda"
android:title="@string/navigation_view_item_1" />
<item
android:id="@+id/navigation2"
android:checked="false"
android:icon="@drawable/ic_profil"
android:title="@string/navigation_view_item_2" />
<item
android:id="@+id/navigation3"
android:checked="false"
android:icon="@drawable/ic_daftar"
android:title="@string/navigation_view_item_3" />
</group>
<item
android:id="@+id/navigasi_kategori_2"
android:title="@string/navigasi_kategori_2">
<menu>
<item
android:id="@+id/navigation4"
android:checked="false"
android:icon="@drawable/ic_setting"
android:title="@string/navigation_view_item_4" />
<item
android:id="@+id/navigation5"
android:checked="false"
android:icon="@drawable/ic_about"
android:title="@string/navigation_view_item_5" />
</menu>
</item>
Pada file tersebut kita akan mendefinisikan item menu navigasi apa saja ,yang akan kita tampilkan.
- android:id="@+id/navigation1" = id identifikasi yang nanti akan dipanggil (called) pada file Activity Java.
- android:icon="@drawable/ic_beranda" = memanggil file icon gambar vector yang terdapat di folder resource drawable yang telah kita buat.
- android:title="@string/navigation_view_item_1" = memanggil file data text yang terdapat di folder resource strings.xml.
5) Layout
Pada folder layout ,kita akan menerapkan baris instruksi (codingan) dibawah di file activity_main.xml , layout_header.xml (header navigasi drawer) ,layout_toolbar.xml ( toolbar untuk Actionbar).
activity_main.xml
<android.support.v4.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:measureWithLargestChild="false"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/layout_toolbar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Ini adalah Contoh isi konten dengan widget TextView yang dibungkus oleh Navigation Drawer"
android:id="@+id/textView" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/layout_header"
app:menu="@menu/item_navigasi" />
layout_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="190dp"
android:background="#2ecc71"
android:orientation="vertical">
<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/icon_profile" android:layout_alignBottom="@+id/linearLayout"
android:layout_alignParentRight="true" android:layout_alignParentEnd="true"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
android:id="@+id/linearLayout">
<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="Okedroid.com"
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="Blog Android and Teknologi"
android:textColor="#fff" />
</LinearLayout>
layout_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat">
6) Activity
Pada file MainActivity.java kalian bisa menerapkan baris intruksi (codingan) dibawah:
MainActivity.java
package com.okedroid.contohnavigationdrawer;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
//Mendefinisikan variabel
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Menginisiasi Toolbar dan mensetting sebagai actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Menginisiasi NavigationView
navigationView = (NavigationView) findViewById(R.id.navigation_view);
//Mengatur Navigasi View Item yang akan dipanggil untuk menangani item klik menu navigasi
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Memeriksa apakah item tersebut dalam keadaan dicek atau tidak,
if(menuItem.isChecked()) menuItem.setChecked(false);
else menuItem.setChecked(true);
//Menutup drawer item klik
drawerLayout.closeDrawers();
//Memeriksa untuk melihat item yang akan dilklik dan melalukan aksi
switch (menuItem.getItemId()){
// pilihan menu item navigasi akan menampilkan pesan toast klik kalian bisa menggantinya
//dengan intent activity
case R.id.navigation1:
Toast.makeText(getApplicationContext(), "Beranda Telah Dipilih", Toast.LENGTH_SHORT).show();
return true;
case R.id.navigation2:
Toast.makeText(getApplicationContext(),"Profil Telah Dipilih",Toast.LENGTH_SHORT).show();
return true;
case R.id.navigation3:
Toast.makeText(getApplicationContext(),"Daftar Telah Dipilih",Toast.LENGTH_SHORT).show();
return true;
case R.id.navigation4:
Toast.makeText(getApplicationContext(),"Setting telah dipilih",Toast.LENGTH_SHORT).show();
return true;
case R.id.navigation5:
Toast.makeText(getApplicationContext(),"About telah dipilih",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Kesalahan Terjadi ",Toast.LENGTH_SHORT).show();
return true;
}
}
});
// Menginisasi Drawer Layout dan ActionBarToggle
drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
@Override
public void onDrawerClosed(View drawerView) {
// Kode di sini akan merespons setelah drawer menutup disini kita biarkan kosong
super.onDrawerClosed(drawerView);
}
@Override
public void onDrawerOpened(View drawerView) {
// Kode di sini akan merespons setelah drawer terbuka disini kita biarkan kosong
super.onDrawerOpened(drawerView);
}
};
//Mensetting actionbarToggle untuk drawer layout
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//memanggil synstate
actionBarDrawerToggle.syncState();
}
(i) Disini kita akan menggunakan pesan text Toast , ketika user (pengguna) mengklik salah satu item navigasi menu. Kalian bisa mereplace (mengganti) kode
Toast.makeText(getApplicationContext(), "Beranda Telah Dipilih", Toast.LENGTH_SHORT).show(); dengan
Intent i =new Intent(getApplicationContext(),MainActivity2.class); startActivity(i); untuk menghubungkan Activity satu dengan Activity lainya. Jadi masing-masing menu punya halaman yang beda
7) Run project Aplikasi
Setelah selesai semua kita coba jalankan Aplikasinya lewat Android Studio.
Hasilnya kurang lebih akan terlihat seperti ini.
 |
| Hasil Navigation Drawer Material Design Android |
Wow, makasih penjelasannya..
BalasHapus