Belajar Membuat Floating Action Button di Android

Floating Action Button adalah salah satu komponen khas dari Material Design di Android. Bentuknya adalah sebuah tombol berbentuk lingkaran yang terlihat seakan mengambang pada layout aplikasi. Floating Action Button atau biasa disebut FAB biasanya digunakan sebagai indikator action utama yang bisa dilakukan oleh user di suatu activity. Sebagai contoh pada aplikasi GMail, action utamanya adalah “membuat email baru”, karena itu ketika FAB pada GMail diklik kita akan langsung menuju ke halaman untuk membuat dan mengirim email baru.

Dari aturan yang ditetapkan oleh Google, pada suatu layar aplikasi Android hanya boleh mempunyai paling banyak satu buah floating action button, karena sebagai penanda main action yang bisa dilakukan user pada layar tersebut.

Bagaimana cara untuk membuatnya? Simply, ikuti langkah-langkah di bawah ini :

1. Pertama-tama, buatlah project baru di Android Studio.
2. Setelah itu, masukkan dependency library berikut pada file build.gradle yang ada di project kalian

   1 2 3 4 5 6

   dependencies {     compile fileTree(dir: 'libs', include: ['*.jar'])     compile 'com.android.support:appcompat-v7:22.2.0'     compile 'com.android.support:design:22.2.0'     compile 'com.android.support:support-v4:22.2.0' }

3. Kemudian, pada file activity_main.xml masukkan view FloatingActionButton seperti berikut :

   1 2 3 4 5 6 7 8 9 10

   <android.support.design.widget.FloatingActionButton     android:id="@+id/fab"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:src="@drawable/ic_add_white"     android:layout_marginBottom="20dp"     android:layout_marginRight="20dp"     android:layout_alignParentBottom="true"     android:layout_alignParentRight="true"     app:fabSize="normal" />

   Untuk icon dari floating action button, kalian bisa memasukkan icon sembarang yang berukuran 36×36 pixel. Sedangkan untuk warnanya, warna fab akan mengikuti warna accent yang telah ditentukan pada tema aplikasi kalian.
4. Setelah itu, pada class MainActivity.java, kita bisa mengakses floating action button tersebut dengan cara yang sama seperti saat kita mengakses Button standar, menggunakan findViewById.

   1 2 3 4 5 6 7 8 9 10 11 12 13

   // inisialisasi fab private FloatingActionButton fab; // pada method onCreate, panggil fab dari xml fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() {     @Override     public void onClick(View view) {     } }); // rest of the code...

   Kita juga bisa mengeset onClickListener pada fab dengan cara yang sama seperti pada Android Button biasa. Pada onClickListener kita kemudian bisa mendefinisikan action yang akan dilakukan ketika tombol tersebut diklik.
5. Jika sudah, voila! Floating Action Button kalian sudah berhasil dibuat 

Jika aplikasi dijalankan, maka akan tampak floating action button seperti di pojok kanan bawah seperti gambar berikut :