[Kotlin] How to display Floated buttons on the screen

• 1. Floating Button이란?
• 2. build.gradle (app) 설정
• 3. layout xml에 호출

 

1. Floating Button이란?

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

화면 위에 떠있는 Floating Button

 

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

 

2. build.gradle (app) 설정

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

material을 연결해 줍니다.

 

3. layout xml에 호출

    ...
    

여기서 주의할 부분이 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: 버튼의 전경 색 (아이콘 색)