Cara Membuat Navigation Drawer View Material Design Android

  • Post
    codeorayo
    Keymaster
    none
    Navigation Drawer View adalah salah satu komponen navigasi menu ,atau biasa disebut sliding menu yang berfungsi untuk membungkus dan menavigasikan sebuah konten di dalam Activity atau Fragment, dari Aplikasi. Navigation drawer sekarang didukung oleh Material Design Library. yang termasuk ke dalam library Appcompat (v21).Navigation Drawer View sering digunakan pada Aplikasi-Aplikasi yang sudah populer seperti BBM. Untuk menggunakanya user(pengguna ) hanya perlu menggeser jempol atau jari kalian kekanan maka Navigation Drawer View akan tampil.

    [img]https://4.bp.blogspot.com/-vg6Ju60l6jc/VvfWbSWPARI/AAAAAAAAFLI/MnHlLSNuEm4DwLTyBlhw2oO1-TTP7zyQw/s1600/android-studio-tutorial-development-apps-by-okedroid.png[/img]

    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 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=298]https://2.bp.blogspot.com/-UuGKl7Vgb3k/Vr_PQGoghiI/AAAAAAAAEqU/bymLc7Evl4U/s320/buat-new-project-android-studio-2.0.png[/img][/td]
    [td]Start a New Android Studio Project[/td]

                                            

    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


    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=205]https://4.bp.blogspot.com/-EmdjfQ_rWJk/Vya7t3giGMI/AAAAAAAAFaE/F1mOhcrea34sCEfjSPiLKguyUnShSZsHgCLcB/s320/Configure-New-Project.png[/img][/td]
    [td]Configure New Project[/td]

    4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=209]https://4.bp.blogspot.com/-T8vfh3frTms/Vr_Q-RuWMhI/AAAAAAAAEqk/k60bbG3fC8U/s320/target-android-devices.png[/img][/td]
    [td]Target Android Devices


    [/td]

    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 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=202]https://4.bp.blogspot.com/-PM62ys3R2CA/VsZUBFJY5HI/AAAAAAAAErs/I1Q5eBBisJI/s320/Add-An-Activity-to-Mobile.png[/img][/td]
    [td]Empty Activity


    [/td]

    6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=205]https://1.bp.blogspot.com/-DIE9lYCnsC8/VsZUiT8IV8I/AAAAAAAAErw/wNg-DKUDDEo/s320/Customize-the-Activity.png[/img][/td]
    [td]Customize the Activity[/td]

    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: 

    1) Setup Gradle


    Sebelum memulai untuk secara default pastikan pada build gradle khususnya di bagian dependencies kalian setting seperti ini :

  • dependencies {

  •     compile fileTree(dir: ‘libs’, include: )

  •     testCompile ‘junit:junit:4.12’

  •     compile ‘com.android.support:appcompat-v7:23.3.0’

  •     compile ‘com.android.support:design:23.3.0’

  • }


    2) Setup resource values


    Pada bagian folder values (app/res/values) kalian terapkan baris intruksi (codingan) dibawah pada masing-masing file:

    styles.xml


  •  

  •     

  •     

  •         @color/colorPrimary

  •         @color/colorPrimaryDark

  •         @color/colorAccent

  •         

  •     

  •  



  • Karna kita nanti akan membuat toolbar, maka kita set atau pilih thema “Theme.AppCompat.NoActionBar”

    strings.xml


  •     “Contoh Navigation Drawer “

  •     Drawer dibuka

  •     Drawer ditutup

  •         Beranda

  •         Profil

  •         Daftar

  •     Sub Item Navigasi

  •     Settings

  •     About

  •  

  •  



  • Pada file ini digunakan untuk menyimpan resource atau data text dari item navigasi menu.

    3) Siapkan icon/gambar di drawable

    Siapkan gambar .png atau vector .xml lalu simpan pada folder (app/res/drawable)

    Contohnya seperti ini :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img]https://2.bp.blogspot.com/-ldaV–VI1Iw/VybCsPWR-WI/AAAAAAAAFaU/E-B1i2t3lKQ0hSJBkNrAs61vLbNkid2HQCLcB/s1600/drawable-gambar-vecotr-android-studio.png[/img][/td]
    [td]drawable[/td]

    Untuk membuat gambar vector di Android Studio.

    Kalian dapat membaca artikel tips sebelumnya:

    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:

    Pada folder  res di struktur project Android Studio kalian, klik kanan lalu pilih New > pilih  Android Resource Directory  seperti pada gambar di bawah:

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=191]https://4.bp.blogspot.com/-f4fAgp01HeA/Vs7Mrq_czbI/AAAAAAAAEwA/moHKxCKXRqY/s320/android-resource-directory-studio.png[/img][/td]
    [td]Android Resource directory
    [/td]

     Pilih menu lalu pilih tombol OK.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=186]https://1.bp.blogspot.com/-mr5IgxN88sg/Vudg7h8vDjI/AAAAAAAAFD4/K_zoAzUNao8pe34Pc9mTfxmhBlFi4Zvsw/s320/menu-android-resource-directory.png[/img][/td]
    [td]Buat folder menu resource
    [/td]

    Buat file xmlnya saya memberikan nama item_navigasi.xml  (Terserah kalian )  pada file menu. Salin baris intruksi (codingan ) di bawah :

    item_navigasi.xml


  • http://schemas.android.com/apk/res/android“>
  •     

  •         

  •             android:id=”@+id/navigation1″

  •             android:checked=”false”

  •             android:icon=”@drawable/ic_beranda”

  •             android:title=”@string/navigation_view_item_1″ />

  •         

  •             android:id=”@+id/navigation2″

  •             android:checked=”false”

  •             android:icon=”@drawable/ic_profil”

  •             android:title=”@string/navigation_view_item_2″ />

  •         

  •             android:id=”@+id/navigation3″

  •             android:checked=”false”

  •             android:icon=”@drawable/ic_daftar”

  •             android:title=”@string/navigation_view_item_3″ />

  •  

  •  

  •     

  •  

  •  

  •     

  •         android:id=”@+id/navigasi_kategori_2″

  •         android:title=”@string/navigasi_kategori_2″>

  •         

  •             

  •                 android:id=”@+id/navigation4″

  •                 android:checked=”false”

  •                 android:icon=”@drawable/ic_setting”

  •                 android:title=”@string/navigation_view_item_4″ />

  •             

  •                 android:id=”@+id/navigation5″

  •                 android:checked=”false”

  •                 android:icon=”@drawable/ic_about”

  •                 android:title=”@string/navigation_view_item_5″ />

  •  

  •         

  •     

  •  



  • 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

  •     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”>

  •  

  •     

  •         android:layout_width=”match_parent”

  •         android:layout_height=”match_parent”

  •         android:measureWithLargestChild=”false”

  •         android:orientation=”vertical”>

  •  

  •         

  •             android:id=”@+id/toolbar”

  •             layout=”@layout/layout_toolbar” />

  •         

  •             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”/>

  •  

  •     

  •     

  •         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

    DATA HOSTED WITH ♥ BY PASTEBIN.COM – DOWNLOAD RAW – SEE ORIGINAL


  • http://schemas.android.com/apk/res/android“

  •                 android:layout_width=”match_parent”

  •                 android:layout_height=”190dp”

  •                 android:background=”#2ecc71″

  •                 android:orientation=”vertical”>

  •     

  •         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”/>

  •     

  •         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”>

  •  

  •         

  •             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” />

  •  

  •         

  •             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” />

  •     



  • layout_toolbar.xml


  •     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();

  •     }

  •  

  •  

  • }


    Quote:

     (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.

[table]

[tr]

[/tr]

[tr]

[/tr]

[/table]

[td][img width=163,height=320]https://1.bp.blogspot.com/-yJ-i55Im-bU/VybJg5dwgrI/AAAAAAAAFak/Yab7mKftC9Amd1I6-IsoOcmVA6mGEVgDACLcB/s320/Hasil-Navigation-Drawer-View-Material-Design-Android.png[/img][/td]
[td]Hasil Navigation Drawer Material Design Android

[/td]

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.