Tutorial Pemrograman

Tutorial Membuat Android Bottom Navigation View dengan Fragment

Halo teman-teman inwepo! Kali ini kita akan belajar membuat Android Bottom Navigation pada Android. Bottom Navigation ini merupakan salah satu cara dalam bernavigasi ke beberapa halaman di aplikasi Android dan cocok untuk 3-5 halaman saja.

Jika terdapat lebih dari 5 halaman di destinasi utama, maka sangat direkomendasikan menggunakan Android Navigation Drawer. Kalian juga dapat menggunakan Android Tab untuk 1 atau 2 level destinasi utama. Untuk mengikuti panduan dalam membuat Bottom Navigation View, disarankan kalian untuk membaca Google User Guide for Bottom Navigation View terlebih dahulu.

Persiapan:

Yang dibutuhkan adalah Android Studio, Android SDK versi terbaru (versi 25) dan tools (termasuk SDK tools, build-tools, platform-tools, support repository).

Langkah 1: Membuat projek baru

a. Buka Android Studio buat projek baru, klik File → New Project.  Masukan data sebagai berikut

Project name: AndroidBottomNavigationView,

Package: com.aureliafriska.androidbottomnavigationview (boleh diganti sesuai namamu) lalu klik Next.

b. Pastikan Phone and Tablet tercentang dan pilih Minimum SDK: Android 4.0 (IceCream Sandwich) lalu klik Next.

c. Pilih Empty Activity dan masukkan Activity Name: MainActivity, lainnya biarkan default.

Sekarang kita telah membuat Android project, jika kalian tidak menggunakan targetSdkVersion 25, kalian dapat meng-update-nya di SDK Manager.

Langkah 2: Menambahkan design support library

Buka file  build.gradle pada Gradle Script dan masukkan
compile 'com.android.support:design:25.3.1' pada scope dependencies sehingga terlihat seperti kode di bawah:

Langkah 3: Menambah String dan Color

a. Buka file strings.xml di dalam folder res dan tambah code berikut ini:

b. Buka file colors.xml di dalam folder res dan tambah code berikut ini:

c. Buat file selector baru dengan mengklik kanan folder drawable dalam folder res lalu pilih New → Drawable resource files. Beri nama nav_item_color_state.xml dan tambah code berikut ini:

Langkah 4: Mengunduh resource dan membuat item menu

a. Sekarang kita membutuhkan resource berupa icon yang dapat dengan mudah kita download dari Google Material Icon. Icon yang saya pakai yaitu library books, library movie, dan libary music.

Setelah mengunduh, buka zip dan masuk ke dalam folder Android. Copy semua folder di dalamnya dan paste ke dalam folder res. Jika dialog terbuka pilih saja “Yes”.

b. Selanjutnya membuat menu resource folder (jika belum ada) dengan mengklik kanan folder res → Android resource directory.

Masukkan Directory name: menu, Resource type: menu. Jika folder sudah terbuat, buat file menu baru dengan mengklik kanan folder menu lalu pilih New → Menu resouce file. Beri nama bottom_navigation_items.xml dan tambah code berikut ini:

Langkah 5: Membuat 3 Fragment

a. Klik kanan pada direktori utama java kita dan pilih New → Fragment → Fragment (Blank). Beri Fragment name: FragmentBuku, Fragment layout: fragment_buku, include fragment factory methods dan interface callback tidak tercentang. Lakukanlah ini sebanyak 2 kali untuk FragmentMusik dan FragmentFilm.

b. Buka fragment_buku.xml dan tambah code berikut:

c. Buka fragment_musik.xml dan tambah code berikut:

d. Buka fragment_film.xml dan tambah code berikut:

Langkah 6: Mengubah MainActivity

a. Buka activity_main.xml pada folder res → layout dan tambah code berikut ini:

b. Buka  MainActivity.java dan tambah code berikut ini:

Langkah 7: Menjalankan aplikasi

Buka emulator di AVD Manager dan jalankan aplikasinya. Hasilnya akan seperti ini:

Aplikasi secara garis besar akan seperti di dalam video berikut ini:

Code Github dapat kalian lihat di sini: Android Bottom Navigation View

Tutorial Bottom Navigation sudah selesai. Sampai bertemu di tutorial selanjutnya! 🙂


nulis di inwepo


A bookworm, an artist and a dreamer rolled into one.



Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk menyelesaikan masalahnya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo


Copyright © 2017 Inwepo. Server by GoCloud

To Top