Cara Menciptakan Navigation Drawer View Material Design Android

Navigation Drawer View yaitu salah satu komponen navigasi sajian ,atau biasa disebut sliding sajian yang berfungsi untuk membungkus dan menavigasikan sebuah konten di dalam Activity atau Fragment, dari Aplikasi. Navigation drawer kini didukung oleh Material Design Library. yang termasuk ke dalam library Appcompat (v21).Navigation Drawer View sering dipakai pada Aplikasi-Aplikasi yang sudah terkenal menyerupai BBM. Untuk menggunakanya user(pengguna ) hanya perlu menggeser jempol atau jari kalian kekanan maka Navigation Drawer View akan tampil.



 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android



Pada tutorial berguru android kali ini , kita akan mencoba menciptakan dan menerapkan Navigation Drawer View dengan pinjaman Material Design Android.


1. Pertama buka Android Studio 

2. Pilih Start a New Android Studio Project 

 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
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 teladan aku memakai menyerupai yang ada di gambar di bawah. Jika sudah pilih Next.


  • Application name: Contoh Navigation Drawer
  • Company Domain : okedroid.com
  • Package Name   :com.okedroid.contohnavigationdrawer



 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
Configure New Project


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

 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
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 menentukan Navigation Drawer Activity, namun disini kita akan membuatnya secara manual jadi kita pilih Empty Activity lalu pilih Next 

 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
Empty Activity

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


 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
Customize the Activity


7.Setelah itu kita tunggu hingga proses building project gradle akibat .


8. Setelah akibat proses building , kita akan mencoba menciptakan  Navigation Drawer View berikut langkah-langkahnya: 


1) Setup Gradle

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




2) Setup resource values


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


styles.xml

Karna kita nanti akan menciptakan toolbar, maka kita set atau pilih thema "Theme.AppCompat.NoActionBar"


strings.xml



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



3) Siapkan icon/gambar di drawable

Siapkan gambar .png atau vector .xml kemudian simpan pada folder (app/res/drawable)
Contohnya menyerupai ini :


 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
drawable


Untuk menciptakan gambar vector di Android Studio.
Kalian sanggup membaca artikel tips sebelumnya:

Baca : Tips Membuat Gambar SVG(Scalabe Vector Graphic) di Android Studio



4) Membuat folder menu


Secara default (bawaan) kalau kita menentukan 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 kemudian pilih New > pilih  Android Resource Directory  seperti pada gambar di bawah:


 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
Android Resource directory





 Pilih menu lalu pilih tombol OK.


 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
Buat folder sajian resource

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


item_navigasi.xml




Pada file tersebut kita akan mendefinisikan item sajian 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="Cara Membuat Navigation Drawer View Material Design Android "  = memanggil file data text yang terdapat di folder resource strings.xml.




5) Layout

Pada folder layout ,kita akan menerapkan baris aba-aba (codingan) dibawah  di file activity_main.xml , layout_header.xml (header navigasi drawer) ,layout_toolbar.xml ( toolbar untuk Actionbar).


activity_main.xml


layout_header.xml




layout_toolbar.xml





6) Activity 


Pada file MainActivity.java  kalian sanggup menerapkan baris intruksi (codingan) dibawah:


MainActivity.java 





(i) Disini kita akan memakai pesan text Toast ,  ketika user (pengguna) mengklik salah satu item navigasi menu. Kalian sanggup 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. Kaprikornus masing-masing sajian punya halaman yang beda



7) Run project Aplikasi

Setelah akibat semua kita coba jalankan Aplikasinya lewat Android Studio.

Hasilnya kurang lebih akan terlihat menyerupai ini.



 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android
Hasil Navigation Drawer Material Design Android


 yaitu salah satu komponen navigasi sajian  Cara Membuat Navigation Drawer View Material Design Android

Untuk lebih jelasnya kalian sanggup lihat Video Demo App berikut :




Sumber https://www.okedroid.com/
Show comments
Hide comments

0 Response to "Cara Menciptakan Navigation Drawer View Material Design Android"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close