Floating Action Button (플로팅 액션 버튼)

Floating Action Button 은 많은 곳에서 볼 수 있다. 그 중 예시로는 카카오톡 오른쪽 아래에 있는 동그라미버튼이다.

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_looks_two_black_24dp"
        android:visibility="invisible"
        app:backgroundTint="#ffffff"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp" />

android:backgroundTint : 버튼 색을 변경

android:src : 버튼 안에 아이콘 넣을 때 사용

app:pressedTranslationZ: 버튼 클릭 시 그림자 범위

app:elevation : 액티비티 바닥부터 버튼까지의 높이

 

visibility 속성을 사용해 특정 플로팅 액션 버튼을 눌렀을 때 가시성을 켜주거나 애니메이션을 주어 나타내는 효과를 줄 수 있다.

실습해본 애니메이션으로는 메인 버튼을 눌렀을 때 다른 버튼이 올라가고 내려가는 애니메이션을 사용하였다.

 

 

올라가는 animation

<?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>

 

내려가는 animation

<?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>

 

이러한 애니메이션을 사용해 플로팅 버튼을 클릭해 프래그먼트를 변경하는 실습을 해보았다.

class FloatingBtnActivity : AppCompatActivity(), View.OnClickListener {

    var fragList: ArrayList<Fragment> = ArrayList() //프래그먼트 리스트

    lateinit var fab_open: Animation
    lateinit var fab_close: Animation
    var openFlag = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_floating_btn)

        setSupportActionBar(toolbar)
        supportActionBar!!.setDisplayShowTitleEnabled(false) //기본 타이틀 사용하지 않게 지정

        //애니메이션 변수
        fab_open = AnimationUtils.loadAnimation(applicationContext, R.anim.fab_open)
        fab_close = AnimationUtils.loadAnimation(applicationContext,R.anim.fab_close)

        //초기 애니메이션은 닫혀있는 애니메이션
        fab_layout1.startAnimation(fab_close)
        fab_layout2.startAnimation(fab_close)
        fab_layout3.startAnimation(fab_close)

        fab_main.setOnClickListener(this)
        fab_1.setOnClickListener(this)
        fab_2.setOnClickListener(this)
        fab_3.setOnClickListener(this)

        fab_1.isClickable = false
        fab_2.isClickable = false
        fab_3.isClickable = false

        fragList = arrayListOf(FragmentControl(), FragmentState(), FragmentPolicy())

        val transaction: FragmentTransaction = supportFragmentManager.beginTransaction()
        
        //초기 onCreate 에서는 첫번째 프래그먼트 표시
        for(i in 0 until fragList.size){
            transaction.add(R.id.fab_frame, fragList[i])
            transaction.hide(fragList[i])
        }
        transaction.show(fragList[0]).commit()
    }

    //클릭된 버튼에 의해 프래그먼트를 변경
    override fun onClick(v: View){
        val transaction: FragmentTransaction = supportFragmentManager.beginTransaction()
        when(v.id){
            R.id.fab_main -> anim()
            R.id.fab_1 ->{
                anim()
                for (i in 0 until fragList.size) { transaction.hide(fragList[i])}
                transaction.show(fragList[0])
            }
            R.id.fab_2 -> {
                anim()
                for (i in 0 until fragList.size) { transaction.hide(fragList[i])}
                transaction.show(fragList[1])
            }
            R.id.fab_3 -> {
                anim()
                for (i in 0 until fragList.size) { transaction.hide(fragList[i])}
                transaction.show(fragList[2])
            }
        }
        transaction.commit()
    }

    fun anim(){
        if (openFlag){ //Fab이 눌려있을때 닫는 애니메이션
            sticker.visibility= View.GONE        (sticker는 투명검은 화면)
            fab_layout1.startAnimation(fab_close)
            fab_layout2.startAnimation(fab_close)
            fab_layout3.startAnimation(fab_close)

            fab_1.isClickable = false
            fab_2.isClickable = false
            fab_3.isClickable = false
            openFlag = false
            
        }else{        //Fab이 눌리지 않았을 때 여는 애니메이션
            sticker.visibility= View.VISIBLE
            fab_layout1.startAnimation(fab_open)
            fab_layout2.startAnimation(fab_open)
            fab_layout3.startAnimation(fab_open)

            fab_1.isClickable = true
            fab_2.isClickable = true
            fab_3.isClickable = true
            openFlag = true
        }
    }
}

 

결과화면

 

 

Floating Action Button / FAB
medium.com/wasd/android-floating-action-button-사용하기-6ca52aba7a1f