Cara Membuat Bottom Navigation di Android Studio

Bottom Navigation Android Studio

Bottom Navigation memungkinkan perpindahan antar tujuan dalam suatu aplikasi. Sesuai dengan namanya, letaknya berada di bagian paling bawah dari layar ponsel. Bottom Navigation dapat memiliki 3 sampai 5 item sebagai navigasinya. Pada tutorial ini, dalam pencontohannya, akan di buat 3 item sebagai navigasi perpindahan. Setiap item akan memiliki sebuah icon. Item pertama adalah navigasi Next, item kedua  navigasi ke Home, dan item terakhir navigasi Back.

Pada pencontohan ini hanya akan menggunakan satu aktivitas layout tunggal yakni aktivitas utama / activity_main.xml saja. Di dalam layout tersebut akan terdapat 3 komponen yaitu 1 komponen ScrollView, 1 komponen TextView yang akan berada di dalam komponen ScrollView dan terakhir komponen BottomNavigation itu sendiri.

Sehingga pada tutorial ini juga akan sedikit membahas mengenai penggunaan ScrollView. Komponen TextView disini berguna sebagai penempatan teks dengan jumlah kata yang sengaja di buat banyak agar melebihi kapasitas layar dari ponsel, sehingga akan membutuhkan bantuan dari komponen ScrollView untuk dapat menggulir layar ke bawah guna menunjukkan sisa kata-kata yang belum terlihat sebelumnya.

Gambar 1 : Contoh Bottom Navigation

Fungsi dari Bottom Navigation yang akan di buat ini nantinya adalah mengganti bahasa dari teks pada TextView tersebut. Bahasa awal nya adalah bahasa Indonesia, ketika item Next di pilih akan merubah nya ke dalam bahasa Inggris, lalu item Back akan merubahnya ke bahasa Spanish, sedangkan item Home akan me refresh aktivitas sehingga akan mengembalikan bahasa ke bahasa semula, yakni Indonesia.

Teks untuk contoh ini di ambil dari halaman depan Lorem Ipsum. Mengenai Lorem Ipsum ini tentu tidak akan di bahas.  Baiklah mari kita mulai tutorial, persiapkan project Anda!

Penerapan Bottom Navigation

Hal pertama yang harus di lakukan adalah mengimpor library dari Bottom Navigation pada file build.gradle (Module: app). Buka file tersebut, letaknya ada pada Gradle Scripts > build.gradle (Module: app) lalu masukkan implementation di bawah ini ke dalam dependencies { , setelah itu lakukan sync gradle. Jika Anda perlu panduan, Anda bisa melihatnya pada bagian pertengahan postingan Cara Install Iklan Banner AdMob.

implementation 'com.google.android.material:material:1.1.0'

Berikutnya adalah membuat terlebih dahulu icon-icon nya melalui Vector Asset. Untuk mengakses Vector Asset, letaknya berada pada res > New > Vector Asset. Disini untuk icon-icon di beri nama navigasi_next untuk item Next, navigasi_home untuk item Home dan navigasi_back untuk item Back.

Selanjutnya membuat menu untuk Bottom Navigation. Cara membuat menu adalah dengan klik kanan pada folder res kemudian New > Android Resource File. Pada tab konfigurasi yang muncul, baris File name isi dengan nama dari menu, pada baris Resource type pilih Menu lalu klik OK. Pada contoh ini File name nya di beri nama navigasi_bawah. Selengkapnya mengenai cara membuat Icon Vector dan cara membuat Menu bisa di lihat pada postingan Cara Membuat Options Menu ini.

Di bawah ini isi lengkap dari menu navigasi_bawah.xml pada contoh ini :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_back"
        android:title="BACK"
        android:icon="@drawable/navigasi_back"/>
    <item
        android:id="@+id/menu_home"
        android:title="HOME"
        android:icon="@drawable/navigasi_home"/>
    <item
        android:id="@+id/menu_next"
        android:title="NEXT"
        android:icon="@drawable/navigasi_next"/>
</menu>

Kemudian beralih ke activity_main.xml. Disini layout yang di gunakan adalah RelativeLayout. Pertama-tama dengan menempatkan komponen ScrollView terlebih dahulu, untuk membuat nya yaitu dengan menggunkan tag <ScrollView. Lalu menempatkan sebuah komponen TextView di dalam ScrollView tersebut. Perlu di ketahui bawha sebuah ScrollView hanya dapat memiliki 1 komponen child view saja.

Komponen terakhir yang di buat adalah Bottom Navigation itu sendiri. Untuk membuatnya, panggil dengan tag   <com.google.android.material.bottomnavigation.BottomNavigationView. Berikut ini isi keseluruhan activity_main.xml dari contoh project tutorial 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:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ScrollView
        android:id="@+id/scrollv"
        android:layout_marginTop="15dp"
        android:layout_above="@id/navigasi_bawah"
        android:layout_marginBottom="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/teks"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-smallcaps"
            android:layout_marginStart="10dp"
            android:text="@string/teks_home"
            android:textSize="20sp" />
    </ScrollView>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigasi_bawah"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorAccent"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
        app:menu="@menu/navigasi_bawah" />

</RelativeLayout>

Pada komponen Bottom Navigation di atas, atribut

• app:itemIconTint="@color/colorPrimary" memberi warna untuk icon-icon yang ada pada bottom navigation. Bisa juga menggunakan HTML atau HEX color code, misalnya app:itemIconTint="#FFFFFF"
• app:itemTextColor="@color/colorPrimary" memberi warna untuk teks nama dari item-item yang ada pada bottom navigation.
• app:menu="@menu/navigasi_bawah" sumber file menu yang di gunakan untuk komponen bottom navigation tersebut.

Untuk atribut android:text="@string/teks_home" pada komponen TextView di atas, teks nya sudah di buat terlebih dahulu pada file strings.xml dengan nama teks_home. Letak file ini dapat di akses melalui res > value > strings.xml. Sehingga untuk memunculkan teks kita hanya perlu memanggil file sumbernya dengan cara seperti yang terlihat pada atribut tersebut. Pada bagian akhir postingan  Penerapan Switch dan RadioButton sebelumnya, sedikit di bahas mengenai strings.xml ini. Silahkan merujuk kesana jika Anda memerlukan panduan.

Selanjutnya menuju ke MainActivity.java. Seluruh kodingan yang di perlukan di letakkan di dalam metode onCreate. Langkah pertama untuk tahapan ini adalah menentukan variabel dan mendapatkan id dari object/class TextView dan BottomNavigation. Disini variabel TextView nya kita buat dengan kalimat, dan id komponen TextView nya pada layout adalah teks. Lalu untuk BottomNavigation variabel nya kita buat bottom dan id nya pada layout adalah navigasi_bawah.

Variabel dari object TextView digunakan sebanyak lebih dari satu kali pada contoh penerapan ini. Karena kita menetapkan variabel TextView di dalam metode onCreate, maka penetapan variabel ini harus di deklarasikan final.

final TextView kalimat = findViewById(R.id.teks);
BottomNavigationView bottom = findViewById(R.id.navigasi_bawah);

Langkah selanjutnya membuat klik listener untuk Bottom Navigation dengan menggunakan setOnNavigationItemSelectedListener (new BottomNavigationView.OnNavigationItemSelectedListener(). Jika di ketik secara manual, akan muncul sebuah sugesti untuk metode baru. Klik Enter pada sugesti yang muncul tersebut dan secara otomatis sebuah metode baru akan terbuat, yaitu public boolean onNavigationItemSelected (@NonNull MenuItem item).

Di dalam metode baru tersebut, kita menggunakan metode switch case untuk implementasi klik item-item yang ada pada BottomNavigation. Berikut ini kode keseluruhan pada MainActivity.java :

package com.gwnbs.proyekkedua;

import android.content.Intent;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    @Override    

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView kalimat = findViewById(R.id.teks);
        BottomNavigationView bottom = findViewById(R.id.navigasi_bawah);

        bottom.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override            

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_next :
                        kalimat.setText(getString(R.string.teks_next));
                        break;
                    case R.id.menu_home :
                        Intent home = new Intent(MainActivity.this, MainActivity.class);
                        startActivity(home);
                        finish();
                        break;
                    case R.id.menu_back :
                        kalimat.setText(getString(R.string.teks_back));
                        break;
                }
                return true;
            }
        });
    }
}

Pada setiap metode case di atas (kecuali case R.id.menu_home), jika item Next (id nya menu_next) di klik, teks pada komponen TextView akan berubah menjadi bahasa inggris. Untuk teks bahasa inggris nya sendiri sudah di buat terlebih dahulu pada file strings.xml dengan nama teks_next, sama seperti yang sudah di bahas di atas. Sehingga kita hanya perlu memanggil nya dengan cara getString (R.string.teks_next).

Begitupun untuk item Back (id nya menu_back), teks bahasa spanish nya sudah di buat terlebih dahulu pada file strings.xml dengan nama teks_back. Lalu untuk item Home (id nya menu_home), jika di klik maka halaman akan di refresh. Jika halaman di refresh tentu saja teks akan kembali menjadi bahasa Indonesia karena bahasa Indonesia adalah defaultnya, yang di tetapkan pada komponen TextView di activity.main.xml sebelumnya.

Pengujian Bottom Navigation

Tahap terakhir tentunya menguji apakah penerapan sudah benar atau ada error. Setiap tutorial di blog ini yang menggunakan pencontohan penerapan, pembuatan contoh nya di lakukan bersamaan dengan penulisan postingan nya. Sehingga jika seandainya Anda mengikuti tutorial dan mengalami error, mungkin ada langkah atau penulisan yang terlewat.

Android Studio juga kerap melakukan pembaharuan pada library, apabila Anda mengalami error, coba periksa pada file build.gradle (Module: app), jika ada library yang di sorot dengan warna tertentu, artinya library tersebut perlu di perbaharui.

Berikut video pendek demo dari contoh tutorial ini. Sekian dan terima kasih. Jika ada pertanyaan silahkan di posting di kolom komentar.