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:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.aureliafriska.androidbottomnavigationview"
        minSdkVersion 14
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    compile 'com.android.support:design:25.3.1'
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:support-v4:25.3.1'
    testCompile 'junit:junit:4.12'
}

Langkah 3: Menambah String dan Color

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

<resources>
<string name="app_name">AndroidBottomNavigationView</string>
<string name="buku">Buku</string>
<string name="musik">Musik</string>
<string name="film">Film</string>
<string name="fragment_buku">Fragment Buku</string>
<string name="fragment_film">Fragment Film</string>
<string name="fragment_musik">Fragment Musik</string>
</resources>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#9C27B0</color>
<color name="colorAccent">#68EFAD</color>
<color name="colorCheck">#ffffff</color>
<color name="colorUncheck">#B2D7D2</color>
</resources>

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:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/colorCheck" />
<item android:color="@color/colorUncheck" />
</selector>

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:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_buku"
        android:icon="@drawable/ic_library_books_white_24dp"
        android:title="@string/buku"/>
    <item
        android:id="@+id/menu_musik"
        android:icon="@drawable/ic_library_music_white_24dp"
        android:title="@string/musik"/>
    <item
        android:id="@+id/menu_film"
        android:icon="@drawable/ic_video_library_white_24dp"
        android:title="@string/film"/>
</menu>

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:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.aureliafriska.androidbottomnavigationview.FragmentBuku">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fragment_buku"
        android:textStyle="bold"
        android:layout_gravity="center"/>

</FrameLayout>

c. Buka fragment_musik.xml dan tambah code berikut:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.aureliafriska.androidbottomnavigationview.FragmentMusik">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fragment_musik"
        android:textStyle="bold"
        android:layout_gravity="center"/>

</FrameLayout>

d. Buka fragment_film.xml dan tambah code berikut:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.aureliafriska.androidbottomnavigationview.FragmentFilm">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/fragment_film"
        android:textStyle="bold"
        android:layout_gravity="center"/>

</FrameLayout>

Langkah 6: Mengubah MainActivity

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.aureliafriska.androidbottomnavigationview.MainActivity">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:animateLayoutChanges="true">

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"/>

</RelativeLayout>

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

package com.aureliafriska.androidbottomnavigationview;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private BottomNavigationView bottomNavigation;
    private Fragment fragment;
    private FragmentManager fragmentManager;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        bottomNavigation = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigation.inflateMenu(R.menu.bottom_navigation_items);
        fragmentManager = getSupportFragmentManager();
        
        //Untuk inisialisasi fragment pertama kali
        fragmentManager.beginTransaction().replace(R.id.main_container, new FragmentBuku()).commit();
        
        //Memberikan listener saat menu item di bottom navigation diklik
        bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();
                switch (id){
                    case R.id.menu_buku:
                        fragment = new FragmentBuku();
                        break;
                    case R.id.menu_musik:
                        fragment = new FragmentMusik();
                        break;
                    case R.id.menu_film:
                        fragment = new FragmentFilm();
                        break;
                }
                final FragmentTransaction transaction = fragmentManager.beginTransaction();
                transaction.replace(R.id.main_container, fragment).commit();
                return true;
            }
        });
    }
}

Langkah 7: Menjalankan aplikasi

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

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

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