Belajar Membuat Floating Action Button di Android Material Design

Last Updated on 9 years by Mas Herdi

Sekitar dua bulan yang lalu, Google mengeluarkan sebuah library baru untuk mendukung implementasi Material Design di semua aplikasi Android yang akan dan telah diluncurkan. Nama library-nya adalah Android Design Support Library. Library ini mendukung banyak view dan layout yang ada pada Material Design, salah satunya adalah Floating Action Button.

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.

Pre-requisites

1. Tutorial Membuat Aplikasi HelloWorld Menggunakan Android Studio
2. Membuat Theme Material Design Style

Membuat Floating Action Button Android

Terimakasih kepada Android Support Design library, karena dengan library official tersebut kita bisa membuat FAB dengan mudah. Bagaimana cara untuk membuatnya? Simply, ikuti langkah-langkah di bawah ini :

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

   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 :

       <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. Tutorial cara membuat tema material design di Android, bisa dilihat di sini.

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.

   
           // 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 🙂

Demo

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

Contoh Android Floating Action Button

That’s all!

Source code ada di GitHub saya, jangan lupa untuk follow dan star projectnya ya 😀 Bagi yang kurang jelas silahkan tanya di bagian komentar.