[Android] FloatingActionButton 정리

📝 SeSAC의 'JetPack과 Kotlin을 활용한 Android App 개발' 강좌를 정리한 글 입니다.

---

화면에 떠 있는 듯한 버튼을 제공하는 뷰

흔히 약어로 FAB 라고 부른다.

대부분 우측 하단에 위치하지만 출력 위치는 임의로 정할 수 있다.

예전에는 FloatingActionButton 을 사용했고, 현재는 ExtendedFloatingActionButton 를 사용한다.

❓ ExtendedFloatingActionButton 란?

FloatingActionButton 에서 몇 가지 기능을 추가한 것 뿐이다.

FloatingActionButton 의 경우는 그저 이미지를 동그란 모양으로 출력하는 정도였는데,

ExtendedFloatingActionButton 은 이미지뿐만 아니라 문자열까지도 출력이 가능하다.

📌 사용 방법

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="extended FAB"
        app:icon="@android:drawable/ic_input_add" />

• icon 속성으로 이미지를 지정하면 이 이미지를 둥그렇게 감싸서 화면에 떠 있는 듯 하게 출력
  
  

코드에서 확장되어 문자열까지 나오게 하거나 축소되어 아이콘만 나오게 하거나 등의 처리가 가능

binding.fab.setOnClickListener { 
	when (binding.fab.isExpanded){
    	true -> binding.shrink()
        false -> binding.fab.extend()
	}
}

---

🧩 실습 예제

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	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.ExtendedFloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="extended FAB"
        app:icon="@android:drawable/ic_input_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

• MainActivity.kt

package com.kotdev99.android.c95

class MainActivity : AppCompatActivity() {
	private lateinit var binding: ActivityMainBinding
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)

		binding = ActivityMainBinding.inflate(layoutInflater)
		setContentView(binding.root)

		binding.fab.setOnClickListener {
			when (binding.fab.isExtended) {
				true -> binding.fab.shrink()
				false -> binding.fab.extend()
			}
		}
	}
}

📲 결과