플로팅 작업 버튼 추가

Compose 사용해 보기

Jetpack Compose는 Android를 위한 권장 UI 도구 키트입니다. Compose에서 구성요소를 추가하는 방법을 알아보세요.

<ph type="x-smartling-placeholder"></ph> 플로팅 작업 버튼 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

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

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

그림 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 속성을 구성할 수 있습니다. 메서드를 사용할 수 있습니다.

• FAB의 크기는 app:fabSize 속성 또는 setSize() 결제 수단
• FAB의 리플 색상은 app:rippleColor 속성 또는 setRippleColor() 메서드를 사용합니다.
• FAB 아이콘은 android:src 속성 또는 setImageDrawable() 메서드를 사용합니다.

버튼 탭에 응답

그런 다음 View.OnClickListener를 적용하여 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의 기능에 관한 자세한 내용은 API 참조를 확인하세요. 대상 FloatingActionButton