Cara Menambahkan Floating Action Button (FAB) Pada Bottom Navigation Bar di Android Studio

Tutorial Cara Menambahkan FAB ke Bottom Navigation View di Android Studio

Halo para Android Developer. Bagaimana kabar kalian semua hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya, saya sudah membagikan tutorial Cara Menambahkan Floating Action Button ke Bottom App Bar di Android Studio dan sekarang saya akan membagikan tutorial Cara Menambahkan Floating Action Button (FAB) Pada Bottom Navigation Bar di Android Studio.

Tutorial ini hampir sama dengan tutorial sebelumnya. Hanya saja untuk tutorial ini, kita akan menambahkan Floating Action Button (FAB) pada Bottom Navigation View. Kalau sebelumnya menambahkan FAB pada Bottom App Bar, maka sekarang menambahkan FAB pada Bottom Navigation View. Ok, langsung saja kalian ikuti tutorial di bawah ini.

Tutorial Cara Menambahkan Floating Action Button (FAB) Pada Bottom Navigation Bar di Android Studio Dengan Mudah

Buatlah project Android Studio baru dengan informasi dibawah ini.

Application Name:Bottom Nav FAB App
Package Name:com.androidrion.bottomnavfabapp
Language:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml

Daftar file xml menu yang digunakan dalam project ini:

  1. menu_navigation_bar.xml

Daftar file vector asset drawable yang digunakan dalam project ini:

  1. ic_baseline_add_24.xml
  2. ic_baseline_favorite_24.xml
  3. ic_baseline_home_24.xml
  4. ic_baseline_person_24.xml
  5. ic_baseline_search_24.xml

Daftar file java activity yang digunakan dalam project ini:

  1. MainActivity.java

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

Vector Asset Drawable File

Dapatkan vector asset seperti gambar diatas dengan cara mengikuti tutorial dibawah ini;

XML Menu File

Untuk membuat directory menu dalam folder res, silahkan ikuti tutorial pada link dibawah ini;

Jika sudah, silahkan Anda klik kanan pada folder menu, lalu pilih New>Menu Resource File. Buat dan simpan file dengan nama menu_navigation_bar. Dibawah ini adalah kode lengkap untuk file menu_navigation_bar.xml

app/res/menu/menu_navigation_bar.xml

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

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

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

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

    <item
        android:id="@+id/profile"
        android:icon="@drawable/ic_baseline_person_24"
        android:title="Profile" />

</menu>

XML Layout File (activity_main.xml)

Buka file activity_main.xml dalam folder layout lalu tambahkan komponen BottomAppBar, BottomNavigationView dan FloatingActionButton. Tambahkan juga atribut di masing-masing komponen seperti kode dibawah ini. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="20dp">

                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/bottomNavbar"
                    style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="16dp"
                    android:layout_marginRight="16dp"
                    app:backgroundTint="@android:color/transparent"
                    app:menu="@menu/menu_navigation_bar" />
    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Java Activity File (MainActivity.java)

Buka file MainActivity dalam folder java, deklarasikan komponen BottomNavigationView serta setBackground menjadi null. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.bottomnavfabapp/MainActivity.java

package com.androidrion.bottomnavfabapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

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

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavbar);
        bottomNavigationView.setBackground(null);
        bottomNavigationView.getMenu().getItem(2).setEnabled(false);
    }
}

Run ‘app’

Jika sudah kalian tambahkan kode diatas, sekarang jalankan project Android Studio kalian. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Bagaimana Cara Menambahkan FAB (Floating Action Button) ke Bottom Navigation Bar di Android Studio. Tutorial diatas sangatlah mudah untuk dikerjakan karena tidak terlalu banyak menggunakan kode baik itu pada tampilan layout (xml) atau back end (java).

Jika kalian mengalami kendala saat melakukan tutorial di atas, Silahkan beri komentar pada artikel ini dibawah. Jangan lupa untuk Subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian semua. Terima kasih.

Download Project

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

Exit mobile version