Membuat Menu Di Android Studio

Android Login With Google Tutorial

Cara Membuat Navigation Drawer View Material Design Android

Ditulis oleh Fathurrahman 02 Mei 2016

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.

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: 

1) Setup Gradle

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

2) Setup resource values

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

Karna kita nanti akan membuat toolbar, maka kita set atau pilih thema "Theme.AppCompat.NoActionBar" 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 :

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:

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

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 :

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.

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

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

(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

Setelah selesai semua kita coba jalankan Aplikasinya lewat Android Studio.

Hasilnya kurang lebih akan terlihat seperti ini.

Hasil Navigation Drawer Material Design Android

Untuk lebih jelasnya kalian bisa lihat Video Demo App berikut :

Gallery Membuat Menu Di Android Studio

Design A Title Screen Godot Engine Latest Documentation

Android Textview Justify Text Stack Overflow

Import And Use External Database In Android

Android Gridview Tutorial Raywenderlich Com

Android Studio Plugin To Clear Cache Proandroiddev

15 Menit Membuat Option Menu Di Android Badoy Studio

Options Menu With Sub Items Android Studio Tutorial

Create An Android Project Android Developers

Android Studio Indonesia Membuat Menu Dalam Aplikasi Android

Recyclerview Adapter With Multiple View Items Zocada

Pagination In Recyclerview In Android Androidwave

Simple Android Tabhost And Tabwidget Example Viral Android

Build A Ui With Layout Editor Android Developers

How To Add Android Studio To The Launcher In Ubuntu Quora

How To Integrate Your Unity Program To Android Studio

Membuat Toolbar Dan Menu Di Action Bar Android Studio

Android Sliding Menu Using Navigation Drawer

Percantik Tampilan Dengan Navigation Drawer Menu Dan Option

Bottom Navigation Bar Android Example Androidwave

Build Your First Android Ar App With Arcore And Sceneform In

Android Search View With Php And Mysql

Tutorial Android Contoh Penggunaan Bottomnavigation

Membuat Tab Menu Di Aplikasi Android Jagocoding Com

Android Working With Bottom Navigation

Adding A Map With A Marker Maps Sdk For Android Google

Android Collapsingtoolbarlayout Example Journaldev

Create A Project Android Developers

Cara Membuat Desain Menu Dashboard Pada Android The Heran

Share this post