Cara menambahkan menu pada floating action button Android

Floating action button (FAB) adalah salah satu komponen material design pada android dengan bentuk seperti tombol lingkaran yang terlihat seakan mengambang pada layout aplikasi. Floating action button (FAB) biasa digunakan sebagai indikator aksi utama yang bisa dilakukan oleh user di suatu aktivitas/activity.

Untuk contohnya, kamu bisa lihat di gambar bawah ya..

Sekarang, mari kita buat Floating action button dengan menambahkan beberapa menu seperti contoh di atas.

1. Buka file activity_main.xml, yang ada di folder res/layout/activity_main.xml
2. Tambahkan script di bawah ini :

Catatan : Hilangkan spasi pada < TextView dan < com

< TextView
 android:id="@+id/textfab2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab1"
 android:layout_alignParentRight="true"
 android:layout_alignRight="@id/fab2"
 android:layout_marginRight="68dp"
 android:visibility="invisible"
 android:layout_marginBottom="27dp"
 android:background="#ebe7d6"
 android:textSize="20dp"
 android:textStyle="bold"
 android:text="Menu 2" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
 android:id="@+id/fab2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab1"
 android:layout_alignParentRight="true"
 android:layout_marginRight="25dp"
 android:layout_marginBottom="10dp"
 android:visibility="invisible"
 android:src="@drawable/ic_menu2"
 app:backgroundTint="@color/colorFAB" />
< TextView
 android:id="@+id/textfab1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab"
 android:layout_alignParentRight="true"
 android:layout_alignRight="@id/fab1"
 android:background="#ebe7d6"
 android:layout_marginRight="74dp"
 android:layout_marginBottom="20dp"
 android:textSize="20dp"
 android:visibility="invisible"
 android:textStyle="bold"
 android:text="Menu 1" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
 android:id="@+id/fab1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@+id/fab"
 android:layout_alignParentRight="true"
 android:layout_marginRight="25dp"
 android:layout_marginBottom="1dp"
 android:visibility="invisible"
 android:src="@drawable/ic_menu1"
 app:backgroundTint="@color/colorFAB" />
< com.google.android.material.floatingactionbutton.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentRight="true"
 android:layout_margin="@dimen/fab_margin"
 app:backgroundTint="@color/cardview_dark_background"
 app:srcCompat="@android:drawable/ic_input_add" />

Cara menambahkan icon :
- Klik kanan pada folder res, lalu pilih New->Vector Asset.
- Buatlah 2 icon dengan nama : ic_menu1 dan ic_menu2

4. Setelah langkah-langkah di atas selesai. Mari kita buka file MainActivity.java yang ada di folder java

5. Pada method onCreate, tambahkan script di bawah ini :

fab = (FloatingActionButton)findViewById(R.id.fab);
fab1 = (FloatingActionButton)findViewById(R.id.fab1);
fab2 = (FloatingActionButton)findViewById(R.id.fab2);
textfab1 = (TextView)findViewById(R.id.textfab1);
textfab2 = (TextView)findViewById(R.id.textfab2);
open_fab = AnimationUtils.loadAnimation(getApplicationContext(), R.animation.open_fab);
close_fab = AnimationUtils.loadAnimation(getApplicationContext(),R.animation.close_fab);
forward_rotate = AnimationUtils.loadAnimation(getApplicationContext(), R.animation.forward_rotate);
backward_rotate = AnimationUtils.loadAnimation(getApplicationContext(),R.animation.backward_rotate);

//Berikut adalah contoh action saat floating button di click
fab.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    int id = view.getId();
    animateFAB();
   }
});

6. Tambahkan juga script berikut di bawah public class MainActivity extends AppCompatActivity :

private FloatingActionButton fab,fab1,fab2;
private TextView textfab1,textfab2;
private Animation open_fab,close_fab,forward_rotate,backward_rotate;

7. Supaya terlihat cantik ketika menekan tombol floating, mari kita tambahkan beberapa animasi.

    Buat folder animation pada folder res, dan buatlah file-file berikut

Catatan : Hilangkan spasi pada < ?xml, < set, < scale, < alpha dan < rotate
    a. close_fab.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    < scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:animation/linear_interpolator"
        android:toXScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.0" />
    < alpha android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:interpolator="@android:animation/accelerate_interpolator"
        android:duration="300"/>
< /set>

    b. open_fab.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    < scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:animation/linear_interpolator"
        android:toXScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.8" />
    < alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:animation/accelerate_interpolator"
        android:duration="300"/>
< /set>

    c. backward_rotate.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    < rotate android:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:animation/linear_interpolator"/>
</ set>

    d. forward_rotate.xml

< ?xml version="1.0" encoding="utf-8"?>
< set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    < rotate android:fromDegrees="0"
        android:toDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:animation/linear_interpolator"/>
< /set>

8. Setelah selesai menambahkan file-file di atas, silahkan buka kembali file MainActivity.java yang ada di folder java. Lalu tambahkan script di bawah ini :

public void animateFAB(){
 if(isFabOpen){
  fab.startAnimation(backward_rotate);
  fab1.startAnimation(close_fab);
  fab2.startAnimation(close_fab);
  textfab1.startAnimation(close_fab);
  textfab2.startAnimation(close_fab);

  fab1.setClickable(false);
  fab2.setClickable(false);
  isFabOpen = false;

 } else {
  fab.startAnimation(forward_rotate);
  fab1.startAnimation(open_fab);
  fab2.startAnimation(open_fab);
  textfab1.startAnimation(open_fab);
  textfab2.startAnimation(open_fab);

  fab1.setClickable(true);
  fab2.setClickable(true);
  isFabOpen = true;

 }
}

Selamat ! kamu berhasil membuat floating action button beserta dengan menunya.