안드로이드 플로팅 액션 버튼 스피드 다이얼 floating action button speed dial 만들기

안녕하세요 알통몬입니다. 공감 및 댓글은 포스팅 하는데 아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께 도움이 되길 바라며 더 깔끔하고 좋은 포스팅을 만들어 나가겠습니다^^

이번 포스팅에서는 안드로이드 플로팅 액션 버튼 스피드 다이얼 만드는 법에 대해 알아보겠습니다.

안드로이드 머터리얼 디자인 사이트에서는 스피드 다이얼에 대해 설명하고 있지만, 실제 구현하는 코드에 대해서는 나와있지 않습니다.

그리고 스택오버플로우에서도 스피드 다이얼은 사용자가 알아서 구현을 해야한다고 하더라구요 ㅎㅎ

그래서 이미 라이브러리를 만들어 배포하시는 분들이 있었지만, 정상적으로 사용이 안되더라구요

그래서 유튜브 영상을 보며 구현을 해보았고 저와 같은 고민을 했던 다른 분들께 도움이 되고자 이 포스팅을 올립니다 ^^

가장 먼저  build.gradle(Module: app) 안의 dependencies{

안에다가

compile 'com.android.support:support-v4:25.2.0'

compile 'com.android.support:design:25.2.0'

이 두가지 코드를 넣고 sync를 해야 floating action button 태그를 사용할 수 있게 됩니다.

그럼 이제 xml에 대표가 될 플로팅 액션 버튼과 이 대표 버튼을 눌렀을 때 보여주고 싶은 플로팅 액션 버튼을 선언합니다.

activity_main.xml

<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:fab="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/ic_email_white_24dp"

    android:layout_gravity="bottom|end"

    android:layout_marginEnd="16dp"

    android:layout_marginBottom="180dp"

    fab:backgroundTint="@color/colorAccent"

    android:visibility="invisible"

    fab:pressedTranslationZ="12dp"

    android:elevation="6dp"

    android:id="@+id/fabMsg"/>

<android.support.design.widget.FloatingActionButton

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/ic_thumb_up_white_24dp"

    android:layout_gravity="bottom|end"

    android:layout_marginEnd="16dp"

    android:layout_marginBottom="100dp"

    fab:backgroundTint="@color/colorPrimary"

    android:visibility="invisible"

    fab:pressedTranslationZ="12dp"

    android:elevation="6dp"

    android:id="@+id/fabThumb"/>

<android.support.design.widget.FloatingActionButton

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/ic_add_white_24dp"

    android:layout_gravity="bottom|end"

    android:layout_marginEnd="16dp"

    android:layout_marginBottom="16dp"

    fab:pressedTranslationZ="12dp"

    android:elevation="6dp"

    android:visibility="invisible"

    android:id="@+id/fabMain"/>

</android.support.design.widget.CoordinatorLayout>

저는 버튼을 다 펼쳤을 때 위에 보여질 것부터 순서대로 선언했습니다. 가장 아래 있는 플로팅 액션 버튼이 대표 버튼입니다.

그럼 이제 이 버튼에게 애니메이션을 씌워줘야 실제 스피드 다이얼처럼 보이겠죠?

여기서 필요한 애니메이션.xml파일은 4가지 입니다. 서브 버튼들이 나타날 때 애니메이션, 사라질 때 애니메이션,

대표 버튼에 씌울 애니메니션 2가지 입니다.

먼저 res 밑에 anim이라는 Android Resource Directory를 만들어 주시구요

그 안에 이제 4개의 애니메이션을 선언해주겠습니다.

1. 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:toXScale="0.8"

        android:toYScale="0.8"

        android:interpolator="@android:anim/linear_interpolator"

        android:pivotX="50%"

        android:pivotY="50%"/>

    <alpha

        android:duration="300"

        android:fromAlpha="0.0"

        android:toAlpha="1.0"

        android:interpolator="@android:anim/accelerate_interpolator"/>

</set>

2. 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:toXScale="0.0"

        android:toYScale="0.0"

        android:interpolator="@android:anim/linear_interpolator"

        android:pivotX="50%"

        android:pivotY="50%"/>

    <alpha

        android:duration="300"

        android:fromAlpha="1.0"

        android:toAlpha="0.0"

        android:interpolator="@android:anim/accelerate_interpolator"/>

</set>

3. rotate_clockwise.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:fillAfter="true">

    <rotate

        android:duration="300"

        android:fromDegrees="0"

        android:interpolator="@android:anim/linear_interpolator"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toDegrees="45" />

</set>

4. rotate_anticlockwise.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:fillAfter="true">

    <rotate

        android:duration="300"

        android:fromDegrees="45"

        android:toDegrees="0"

        android:interpolator="@android:anim/linear_interpolator"

        android:pivotY="50%"

        android:pivotX="50%"

        />

</set>

그럼 이제 기본적인 준비가 끝났습니다!!

MainActivity.java를 보겠습니다.

public class MainActivity extends AppCompatActivity {

    private static final int LAYOUT = R.layout.activity_main;

    Animation FabOpen, FabClose, FabRClockwise, FabRanticlockWise;

    private FloatingActionButton fabMain, fabMsg, fabThumb;

    boolean isOpen = false;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(LAYOUT);

        FabOpen = AnimationUtils.loadAnimation(

        getActivity().getApplicationContext(), R.anim.fab_open);

        FabClose = AnimationUtils.loadAnimation(

        getActivity().getApplicationContext(), R.anim.fab_close);

        FabRClockwise = AnimationUtils.loadAnimation(

        getActivity().getApplicationContext(), R.anim.rotate_clockwise);

        FabRanticlockWise = AnimationUtils.loadAnimation(

        getActivity().getApplicationContext(), R.anim.rotate_anticlockwise);

        fabMain = (FloatingActionButton) view.findViewById(R.id.fabMain);

        fabMsg = (FloatingActionButton) view.findViewById(R.id.fabMsg);

        fabThumb = (FloatingActionButton) view.findViewById(R.id.fabThumb);

        fabMain.setOnClickListener(clickListener);

        fabMsg.setOnClickListener(clickListener);

        fabThumb.setOnClickListener(clickListener);

        

    }

    View.OnClickListener clickListener = new View.OnClickListener() {

         @Override

         public void onClick(View v) {

             switch (v.getId()) {

                 case R.id.fabMain :

                     if (!isOpen) {

                        fabThumb.startAnimation(FabOpen);

                         fabMsg.startAnimation(FabOpen);

                         fabMain.startAnimation(FabRClockwise);

                         fabThumb.setClickable(true);

                         fabMsg.setClickable(true);

                         isOpen = true;

                     } else {

                         fabThumb.startAnimation(FabClose);

                         fabMsg.startAnimation(FabClose);

                         fabMain.startAnimation(FabRanticlockWise);

                         fabThumb.setClickable(false);

                         fabMsg.setClickable(false);

                         isOpen = false;

                     }

                     break;

           }

         }

     };

}

이상입니다.

실행 영상 및 더욱 자세한 설명은 아래 유튜브 영상에서 확인하실 수 있습니다 !!

감사합니다.

도움이 되셨다면 공감과 댓글을!!!

이해가 안되시는 비분은 댓글을!!!

영상 출처 : https://www.youtube.com/watch?v=orcpzMo7igQ