[Kotlin] "Floating Action Button" 사용하는 방법

1. Floating Button이란?

앱에서 흔히 보이는 화면 위에 둥둥 떠있는 버튼을 보곤 합니다.

화면 위에 떠있는 Floating Button

앱 위에 둥둥 떠있어서 그런지 Floating Button이라고 하기도 하는데, 이는 Material Design을 이용해서 쉽게 지정해 줄 수 있습니다.

 

2. build.gradle (app) 설정

...
dependencies {
    ...
    implementation 'com.google.android.material:material:'
    ...
}

material을 연결해 줍니다.

 

3. layout xml에 호출

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    ...
>
    ...
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/btnEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/btn_edit_b"
        android:contentDescription="EDIT"
        android:layout_margin="20dp"
        app:backgroundTint="@color/colorAccent"
        app:tint="@color/white"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

여기서 주의할 부분이 xmlns에서 정의한 app 부분입니다.

기본적으로 생성 시에 아래와 같이 정의되어있다 보니, 그냥 FloatingActionButton 속성에 app 속성을 넣으면 지정되지 않습니다.

 xmlns:app="http://schemas.android.com/app"

따라서, 아래와 같이 xmlns를 지정해주어야 합니다.

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

만약 위에 것도 사용해야 하고 아래 것도 사용해야 한다면 app2로 변경하여 지정해 줘도 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/app"
    xmlns:app2="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    ...
>
    ...
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/btnEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/btn_edit_b"
        android:contentDescription="EDIT"
        android:layout_margin="20dp"
        app2:backgroundTint="@color/colorAccent"
        app2:tint="@color/white"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

layout_gravity : 화면상 위치 (start | end | top | bottom)

ex) end | bottom의 경우 오른쪽 아래를 의미

backgroundTint : 버튼의 배경 색

tint: 버튼의 전경 색 (아이콘 색)

 

※ 이 글은 워드프레스에 작성한 글과 동일한 작성자의 동일한 글입니다.

https://royfactory.net/2023/07/01/kotlin-floating-action-button/

[Kotlin] How to display Floated buttons on the screen - ROY FACTORY