플로팅 작업 버튼 추가

Compose 방식 사용해 보기
Jetpack Compose는 Android용으로 권장되는 UI 도구 키트입니다. Compose에서 구성요소를 추가하는 방법을 알아보세요.
플로팅 작업 버튼 →

플로팅 작업 버튼(FAB)은 앱 UI의 기본 작업을 트리거하는 원형 버튼입니다. 이 문서에서는 레이아웃에 FAB를 추가하고, 모양을 맞춤설정하고, 버튼 탭에 응답하는 방법을 보여줍니다.

Material Design 가이드라인에 따라 앱의 FAB를 디자인하는 방법을 자세히 알아보려면 Material Design FAB를 참고하세요.

빨간색 FloatingActionButton이 포함된 앱 화면을 보여주는 이미지
그림 1. 플로팅 작업 버튼 (FAB)

레이아웃에 플로팅 작업 버튼 추가

다음 코드는 레이아웃 파일에 FloatingActionButton가 표시되는 방식을 보여줍니다.

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

기본적으로 FAB는 colorAccent 속성으로 색상이 지정되며, 이 속성은 테마의 색상 팔레트로 맞춤설정할 수 있습니다.

다음과 같은 XML 속성 또는 해당 메서드를 사용하여 다른 FAB 속성을 구성할 수 있습니다.

  • app:fabSize 속성 또는 setSize() 메서드를 사용하는 FAB의 크기
  • app:rippleColor 속성 또는 setRippleColor() 메서드를 사용하는 FAB의 물결 효과 색상
  • android:src 속성 또는 setImageDrawable() 메서드를 사용하는 FAB 아이콘

버튼 탭에 응답

그런 다음 View.OnClickListener를 적용하여 FAB 탭을 처리할 수 있습니다. 예를 들어 다음 코드는 사용자가 FAB를 탭할 때 Snackbar를 표시합니다.

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

자바

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

FAB의 기능에 관한 자세한 내용은 FloatingActionButton의 API 참조를 확인하세요.