Tutorial Dasar Cara Membuat BottomNavigationView di Android Studio

Tutorial Dasar Cara Menggunakan BottomNavigationView di Android Studio

Halo guys, bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial dasar cara membuat atau menampilkan menu pada bagian bawah aplikasi seperti aplikasi Instagram menggunakan widget BottomNavigationView di Android Studio.

BottomNavigationView adalah widget yang berfungsi untuk memberikan kemudahan dalam navigasi dengan menaruh menu tambahan pada bagian bawah aplikasi. Bentuk dari tampilan ini seperti widget TabLayout. Aplikasi yang populer menggunakan tampilan seperti ini adalah Instagram. Dengan menggunakan tampilan menu pada bagian bawah, pengguna sangat mudah untuk beralih dari tampilan home ke tampilan akun.

Untuk itu, dalam tutorial ini kalian akan belajar cara membuat menu pada bagian bawah aplikasi seperti aplikasi Instagram menggunakan widget BottomNavigationView di Android Studio.

Tutorial Dasar Cara Membuat BottomNavigationView di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Bottom App
Package Name:com.androidrion.bottomapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  • activity_main.xml
  • menu_bottom_nav.xml
  • color_state.xml

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Bottom App.

Dependencies File

BottomNavigationView berada dalam Google Material Design. Untuk itu, kalian tidak bisa menggunakannya sebelum menambahkan kode dependensi google material design. Berikut ini adalah kode untuk menggunakan widget BottomNavigationView pada projek android studio.

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

Untuk menambahkan kode diatas pada projek android studio, kalian bisa mengikuti tutorial pada link dibawah ini.

CARA MENAMBAHKAN KODE DEPENDENSI DI ANDROID STUDIO

Drawable File

Pada tutorial ini, saya ingin mengimplementasikan aplikasi Instagram. Pada aplikasi tersebut memiliki lima menu yaitu home, search, add, favorit dan account. Untuk itu, buatlah icon pada projek android studio kalian seperti pada gambar di bawah ini.

Untuk mendapatkan ikon tersebut, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MENAMBAHKAN IKON PADA PROJEK ANDROID STUDIO

XML Menu File

Buatlah folder menu pada projek android studio kalian. Untuk membuat folder menu pada proje android studio, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MEMBUAT FOLDER MENU DI PROJEK ANDROID STUDIO

Jika kalian sudah membuat folder menu pada projek android studio, buatlah file xml didalamnya dengan cara klik kanan pada folder menu lalu pilih New>Menu resource file. Simpan file xml menu tersebut dengan nama menu_bottom_nav. Berikut ini adalah kode lengkap untuk file menu_bottom_nav.xml

app/res/menu/menu_bottom_nav.xml

[sociallocker id=”1410″]

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="Search" />

    <item
        android:id="@+id/add"
        android:icon="@drawable/ic_add_box"
        android:title="Add" />

    <item
        android:id="@+id/fav"
        android:icon="@drawable/ic_favorite"
        android:title="Favorite" />

    <item
        android:id="@+id/account"
        android:icon="@drawable/ic_person"
        android:title="Account" />

</menu>

[/sociallocker]

XML Drawable File

Buatlah file xml drawable untuk membuat warna pada ikon aktif dan tidak aktif di BottomNavigationView. Klik kanan pada folder drawable lalu pilih New>Drawable resource file. Simpan file xml drawable tersebut dengan nama color_state. Berikut ini adalah kode lengkap untuk file color_state.xml

app/res/drawable/color_state.xml

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

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Ganti layout default yang telah dibuat oleh aplikasi menjadi RelativeLayout. Lalu tambahkan di dalamnya widget BottomNavigationView. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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"
    android:background="#EEEEEE"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@android:color/white"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/color_state"
        app:itemTextColor="@drawable/color_state"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/menu_bottom_nav" />

</RelativeLayout>

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat menu di bagian bawah aplikasi seperti pada aplikasi Instagram. Secara default, icon home telah aktif dan kalian bisa mengaktifkan icon lain dengan cara menyentuhnya. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

Bonus Tips!!!

Jika kalian ingin menampilkan teks dari ikon, ubah atribut pada widget BottomNavigationView dalam folder activity_main.xml di line code 18. ubah unlabeled menjadi labeled. Maka menu akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial dasar cara mengunakan BottomNavigationView pada Android Studio. Mengingat ini adalah tutorial dasar, maka tutorial diatas sangatlah mudah dikerjakan karena kita kita menggunakan file java. Pada tutorial selanjutnya, kita akan menampilkan activity di tiap-tiap menu.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

[sociallocker id=”1406″]

[/sociallocker]

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.