이 페이지는 Cloud Translation API를 통해 번역되었습니다.

플로팅 작업 버튼 (FAB) 만들기

플로팅 작업 버튼 (FAB)은 사용자가 애플리케이션에서 기본 작업을 실행할 수 있는 강조 표시된 버튼입니다. 사용자가 취할 수 있는 가장 일반적인 경로인 단일 집중 작업을 홍보하며 일반적으로 화면 오른쪽 하단에 고정되어 있습니다.

FAB를 사용할 수 있는 세 가지 사용 사례를 고려해 보세요.

새 항목 만들기: 메모 앱에서 FAB를 사용하여 새 메모를 빠르게 만들 수 있습니다.
새 연락처 추가: 채팅 앱에서 FAB는 사용자가 대화에 누군가를 추가할 수 있는 인터페이스를 열 수 있습니다.
위치 중앙에 맞추기: 지도 인터페이스에서 FAB를 사용하면 사용자의 현재 위치를 지도의 중앙에 맞출 수 있습니다.

Material Design에는 다음과 같은 네 가지 유형의 FAB가 있습니다.

FAB: 일반 크기의 플로팅 작업 버튼입니다.
작은 FAB: 더 작은 플로팅 작업 버튼입니다.
대형 FAB: 더 큰 플로팅 작업 버튼입니다.
확장 FAB: 아이콘 외의 항목이 포함된 플로팅 작업 버튼입니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.

종속 항목

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.01.01')

기본 플로팅 작업 버튼 만들기

일반적인 플로팅 작업 버튼을 만들려면 기본 FloatingActionButton 컴포저블을 사용하세요.

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}FloatingActionButton.kt

결과

모서리가 둥글고 그림자와 '추가' 아이콘이 있는 표준 플로팅 작업 버튼 — **그림 1.** 플로팅 작업 버튼

작은 플로팅 작업 버튼 만들기

작은 플로팅 작업 버튼을 만들려면 SmallFloatingActionButton 컴포저블을 사용하세요. 다음 예에서는 커스텀 색상을 추가하여 이를 실행하는 방법을 보여줍니다.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}FloatingActionButton.kt

결과

'추가' 아이콘이 포함된 SmallFloatingActionButton의 구현입니다. — **그림 2.** 작은 플로팅 작업 버튼

큰 플로팅 작업 버튼 만들기

큰 플로팅 작업 버튼을 만들려면 LargeFloatingActionButton 컴포저블을 사용하세요. 이 컴포저블은 더 큰 버튼이 생성된다는 점을 제외하고는 다른 예와 크게 다르지 않습니다.

다음은 큰 FAB를 간단하게 구현한 예입니다.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}FloatingActionButton.kt

결과

'추가' 아이콘이 포함된 LargeFloatingActionButton의 구현입니다. — **그림 3.** 큰 플로팅 작업 버튼

확장된 플로팅 작업 버튼 만들기

ExtendedFloatingActionButton 컴포저블을 사용하여 더 복잡한 플로팅 작업 버튼을 만들 수 있습니다. FloatingActionButton와의 주요 차이점은 전용 icon 및 text 매개변수가 있다는 점입니다. 이를 사용하면 콘텐츠에 적절하게 크기가 조절되는 더 복잡한 콘텐츠가 포함된 버튼을 만들 수 있습니다.

다음 스니펫은 icon 및 text에 전달된 예시 값을 사용하여 ExtendedFloatingActionButton를 구현하는 방법을 보여줍니다.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}FloatingActionButton.kt

결과

'확장 버튼'이라는 텍스트와 수정 아이콘을 표시하는 ExtendedFloatingActionButton의 구현입니다. — **그림 4.** 텍스트와 아이콘이 모두 있는 플로팅 작업 버튼

핵심사항

머티리얼 디자인에 따라 플로팅 작업 버튼을 만드는 데 사용할 수 있는 여러 컴포저블이 있지만 파라미터는 크게 다르지 않습니다. 유의해야 할 주요 매개변수는 다음과 같습니다.

onClick: 사용자가 버튼을 누르면 호출되는 함수입니다.
containerColor: 버튼의 색상입니다.
contentColor: 아이콘의 색상입니다.

z## 이 가이드가 포함된 컬렉션

이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.

대화형 구성요소 표시

구성 가능한 함수를 사용하여 Material Design 디자인 시스템을 기반으로 멋진 UI 구성요소를 쉽게 만드는 방법을 알아보세요.

빠른 가이드 모음

질문이나 의견이 있으신가요?

자주 묻는 질문(FAQ) 페이지로 이동하여 빠른 가이드를 알아보거나 문의하여 의견을 보내주세요.

FAQ로 이동 의견 남기기