android kotlin extended floatingButton(코틀린 플로팅 버튼)

 

https://www.youtube.com/watch?v=0AlquC1rScQ (해당 외국 유튜버의 튜토리얼을 정리한 글입니다.)

아래와 같은 플로팅 버튼을 만들어보겠습니다.

 

 

 

1. gradle 추가

 

implementation 'com.google.android.material:material:1.2.0-alpha01'

 

 

 

2. floating button을 적용하고자 하는 layout을 CoordinatorLayout으로 변경 

 

*coordinatorLayout이란?

 : FrameLayout이다. 자식 뷰들간의 특정한 인터렉션을 지원하는 용도로 사용한다.

  - 즉, 자식뷰들간 다양한 상호작용을 위해서 사용되는 레이아웃인 것 같다.

  - floatingButton의 애니메이션과 클릭시 다른 자식뷰들을 나타내는 특징으로 인해 coordinatorLayout과 함께 써야하는 것이다.

 

3. FloatingActionButton 추가(in CoordinatortLayout)

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buyBtn"
        android:layout_gravity="end|bottom"
        android:layout_marginBottom="130dp"
        android:layout_marginRight="24dp"
        android:layout_marginEnd="24dp"
        android:backgroundTint="@color/moccasin"
        app:borderWidth="0dp"
        app:fabSize="mini"
        android:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/ic_buy"
        android:visibility="invisible"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/sellBtn"
        android:layout_gravity="end|bottom"
        android:layout_marginBottom="80dp"
        android:layout_marginRight="24dp"
        android:layout_marginEnd="24dp"
        android:backgroundTint="@color/moccasin"
        app:borderWidth="0dp"
        app:fabSize="mini"
        android:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/ic_sell"
        android:visibility="invisible"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/addBtn"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:backgroundTint="@color/goldenrod"
        app:borderWidth="0dp"
        app:fabSize="normal"
        android:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/ic_add_white"
        />

 

 

4. Animation 추가

 

위와 같이 폴더와 파일을 만들어주세요

 1)fab_open/close : 하위 버튼 보였다 안 보였다.

 2)rotate_clockwise/anticlockwise : 메인 버튼 누르면 회전해서 + -> x 로 변환

 

*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:fromXScale="0.8"
        android:fromYScale="0.8"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotY="50%"
        android:pivotX="50%"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="300"
        />

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


</set>

 

*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:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="0.8"
        android:toYScale="0.8"
        android:pivotY="50%"
        android:pivotX="50%"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="300"
        />

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


</set>

 

*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:fromDegrees="0"
        android:toDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="300"/>

</set>

 

*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:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="300"/>

</set>

 

 

 

 

5. Activity에 floatingButton 및 animation 등록

	val fabOpen = AnimationUtils.loadAnimation(this, R.anim.fab_open)
        val fabClose = AnimationUtils.loadAnimation(this, R.anim.fab_close)
        val fabRClockwise = AnimationUtils.loadAnimation(this, R.anim.rotate_clockwise)
        val fabRAntiClockwise = AnimationUtils.loadAnimation(this, R.anim.rotate_anticlockwise)

        addBtn.setOnClickListener{

            if(isOpen){
                sellBtn.startAnimation(fabClose)
                buyBtn.startAnimation(fabClose)
                addBtn.startAnimation(fabRClockwise)

                isOpen = false
            }

            else{
                sellBtn.startAnimation(fabOpen)
                buyBtn.startAnimation(fabOpen)
                addBtn.startAnimation(fabRAntiClockwise)

                sellBtn.isClickable
                buyBtn.isClickable

                isOpen = true

                buyBtn.setOnClickListener{
                    Toast.makeText(this, "buy버튼을 클릭하셨습니다", Toast.LENGTH_SHORT).show()
                }
            }
        }