Tutorial Dasar Cara Membuat Floating Action Button di Android Studio

Halo para android developer muda, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial dasar cara menggunakan widget floating action button di android studio.

Floating Action Button atau yang biasa di singkat FAB digunakan untuk tindakan yang dipromosikan atau diutamakan. FAB ini tersedia dalam dua ukuran yang berbeda, standar dan mini. Ukuran default FAB digunakan untuk sebagian besar kasus dan ukuran mini hanya digunakan untuk membuat kontiuitas virtual dengan elemen activity lainnya. Menerapkan button ini di aplikasi menggunakan library material design.

Aplikasi yang biasa kita temui menggunakan button FAB adalah aplikasi chatting WhatsApp. widget ini berbeda fungsi dari tiap-tiap tab yang dibuka. Secara default pada aplikasi WhatsApp, Floating Action Button membuka opsi chat untuk para user.

- Advertisement -

Dalam tutorial ini, kalian akan belajar cara membuat dan menerapkan Floating Action Button (FAB) di Android Studio menggunakan library material design dengan cara yang dasar sederhana.

Tutorial Dasar Cara Menerapkan Floating Action Button (FAB) di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:FAB App
Package Name:com.androidrion.fabapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

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

Library Material Design

Untuk menggunakan FAB pada project android studio, kalian harus menambahkan library material design. Untuk menambahkan library material design, kalian memerlukan kode di bawah ini.

Gradle Scripts/build.gradle (Module: app)

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

Ikuti tutorial di bawah ini untuk menambahkan library material design kedalam projek android studio.

CARA MENAMBAHKAN LIBRARY KE DALAM PROJEK ANDROID STUDIO

Drawable File

Pada tutorial ini, saya menggunakan aplikasi WhatsApp sebagai acuan dari project ini. Jika kita lihat dari aplikasi tersebut, tombol yang berada di bawah kanan memiliki ikon. Untuk itu, tambahkan ikon berikut ini ke dalam projek android studio kalian.

Ikuti tutorial di bawah ini untuk menambahkan ikon kedalam project android studio.

CARA MENAMBAHKAN IKON KE DALAM PROJEK ANDROID STUDIO

XML Layout File

Buka file activity_main.xml dalam folder layout pada project android studio kalian. Tambahkan widget material design FloatingActionButton di dalam Relative Layout. 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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="20dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_message"
        android:tint="@android:color/white"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:rippleColor="@color/colorPrimaryDark" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Java Activity File

Buka file MainActivity.java dalam folder java pada project android studio kalian. Dalam tutorial ini saya menampilkan Snackbar ketika FAB di klik. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.fabapp/MainActivity.java

Run ‘app’

Sekarang jalankan project android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat adanya tombol seperti aplikasi WhatsApp di bagian bawah kanan aplikasi. Jika kalian mengklik tombol tersebut, maka aplikasi akan menampilkan Snackbar. Berikut ini gambar apabila kode diatas tidak terjadi error.

Jika kalian ingin menampilkan FAB di bawah tengah atau kiri bawah, maka kalian cukup mengubah atributnya menjadi bottom|center dan bottom. Berikut ini adalah kode lengkap untuk membuat Floating Action Button berada di posisi lain.

<?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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="20dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_camera"
        android:tint="@android:color/white"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:rippleColor="@color/colorPrimaryDark" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_margin="20dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_call"
        android:tint="@android:color/white"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:rippleColor="@color/colorPrimaryDark" />
    
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="20dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_message"
        android:tint="@android:color/white"
        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:rippleColor="@color/colorPrimaryDark" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Maka hasil dari kode diatas akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat Floating Action Button di Android Studio. Jika kita lihat dari tutorial yang sangat dasar di atas, bahwa FAB tidak cocok untuk menampilkan toast karena akan menutup button tersebut. Widget ini sangat cocok menampilkan snackbar yang berjalan pada CoordinatorLayout.

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.

- Advertisement -

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.