Skip to main content

5 Menit Membuat Floating Action Button Android

Halo semua, pada tutorial ini kita akan belajar membuat Floating Action Button Android menggunakan Android Studio.

Apa itu Floating Action Button

Floating Action Button (FAB) adalah salah satu komponen dari Material Desain. FAB merupakan sebuah tombol yang berbentuk lingkaran dan ditampilkan seperti melayang pada aplikasi android.

Biasanya widget ini terletak di sebelah kanan bawah aplikasi android. Berikut ini adalah contoh FAB pada aplikasi WhatsApp.

floating action button android

 

Cara Membuat Floating Action Button Android

Baiklah langsung saja inilah langkah-langkah untuk membuat Floating Action Button menggunakan Android Studio. Android Studio yang dipakai saat membuat tutorial ini yaitu Android Studio versi 3.5 (versi terbaru).

Buat Projek Baru

  • Buka Android Studio dan buat sebuah projek baru
  • Pilih Empty Activity

floating action button android

  • Konfigurasi Projek : nama projek, bahasa pemrograman yang dipakai, dan lainnya

floating action button android

 

Masukan Dependencies

  • Masukan dependencies pada build.gradle(module: app)
  • Silahkan copykan kode berikut ini
implementation 'com.google.android.material:material:1.1.0-alpha10'
  • Setelah itu klik perintah Sync Now dan pastikan laptop atau komputermu sudah terhubung dengan internet, sehingga dependencies build.gradle(module: app) menjadi seperti gambar di bawah ini

 

Menambahkan Gambar

Pada FAB biasanya terdapat icon atau gambar. Nah pada langkah ini mari kita masukan gambarnya. Caranya yaitu :

  • Klik kanan pada direktori drawable
  • Pilih New, lalu klik Vector Asset

  • Klik Clip Art pada Configure Asset Vector
  • Lalu pilih icon done, dan ubah warnanya menjadi warna putih dengan kode FFFFFF

floating action button android

  • Klik Next … sampai dengan Finish

 

Mengatur Layout dan Menambahkan Widget

Layout dan widget yang digunakan yaitu :

  • CoordinatorLayout
  • TextView
  • dan FloatingActionButton

Langsung saja buka Activity_main.xml, lalu tambahkan kode-kode di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="20dp"
    android:gravity="center"
    tools:context=".MainActivity">

        <TextView
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="match_parent"
            android:text="Membuat Floating Action Button"
            android:textSize="20sp" />


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_margin="15dp"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:elevation="6dp"
        android:backgroundTint="@color/colorPrimary"
        android:id="@+id/fab1"/>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Hasilnya layout akan menjadi seperti gambar berikut :

 

Menambahkan Kode Java

Disini kita akan menambahkan kode-kode java agar ketika tombol diklik bisa menampilkan sebuah teks, nah berarti kita harus menambahkan Toast. Caranya yaitu :

  • Buka MainActivity.java
  • Lalu tambahkan kode-kode berikut ini dibawah nama package
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

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

        FloatingActionButton floatingActionButton=findViewById(R.id.fab1);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Floating Action Button Berhasil dibuat", Toast.LENGTH_SHORT).show();
                
            }
        });
    }
}

Running Project

Jika semua langkah di atas sudah diikuti dengan baik, sekarang saatnya kita merunning project ini. Disini saya menjalankannya langsung ke smartphone Android. Dan hasilnya :

Lalu ketika FAB disentuh maka akan menampilkan teks seperti gambar di bawah ini :

 

Penutup

Itulah tutorial membuat Floating Action Button Android dengan Android Studio. Semoga bermanfaat dan jangan lupa praktekan juga share ke temanmu yang lainnya.

Guntoro

Freelancer web and mobile developement, blogger, and teacher.