Floating Action Button 활용하기

res > anim > fab_open.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:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.8"
        android:toYScale="0.8" />

    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

res > anim > fab_close.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:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0" />

    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />

</set>

res > layout > activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_contact_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/fab_user_add"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="15dp"
        android:src="@drawable/baseline_contact_phone_white_36"
        android:visibility="invisible" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_user_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/fab_main"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="15dp"
        android:src="@drawable/baseline_playlist_add_white_36"
        android:visibility="invisible" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/baseline_add_white_36" />
</RelativeLayout>

MainActivity

public class MainActivity extends AppCompatActivity {
  private Boolean isFabOpen = false;
  private Animation fabOpen, fabClose;
  
  // ButterKnife
  @BindView(R.id.fab_main)
  FloatingActionButton mFabMain;

  @BindView(R.id.fab_contact_add)
  FloatingActionButton mFabContactAdd;

  @BindView(R.id.fab_user_add)
  FloatingActionButton mFabUserAdd;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);
    
    fabOpen = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_open);
    fabClose = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_close);
  }
  
  @OnClick(R.id.fab_main)
  void mainClicked() {
    if (isFabOpen) {
      //mFabMain.setImageResource(R.drawable.baseline_add_white_36);
      mFabContactAdd.startAnimation(fabClose);
      mFabUserAdd.startAnimation(fabClose);
      mFabContactAdd.setClickable(false);
      mFabUserAdd.setClickable(false);
      isFabOpen = false;
    } else {
      //mFabMain.setImageResource(R.drawable.baseline_close_white_36);
      mFabContactAdd.startAnimation(fabOpen);
      mFabUserAdd.startAnimation(fabOpen);
      mFabContactAdd.setClickable(true);
      mFabUserAdd.setClickable(true);
      isFabOpen = true;
    }
  }
}