Dodaj pływający przycisk polecenia

Wypróbuj tworzenie wiadomości
Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak dodawać komponenty w sekcji Tworzenie.

Pływający przycisk polecenia to okrągły przycisk, który uruchamia główne działanie w interfejsie aplikacji. W tym dokumencie dowiesz się, jak dodać przycisk FAB do układu, dostosować jego wygląd i zareagować na jego kliknięcia.

Więcej informacji o projektowaniu przycisku FAB w aplikacji zgodnie z wytycznymi Material Design znajdziesz w artykule Przycisk FAB w interfejsie Material Design.

Obraz pokazujący ekran aplikacji z czerwonym przyciskiem FloatingActionButton
Rysunek 1. Pływający przycisk polecenia (FAB).

Dodawanie pływającego przycisku polecenia do układu

Poniższy kod pokazuje, jak element FloatingActionButton wygląda w pliku układu:

<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" />

Domyślnie przycisk FAB jest kolorowany za pomocą atrybutu colorAccent, który możesz dostosowywać za pomocą palety kolorów motywu.

Inne właściwości FAB możesz konfigurować za pomocą atrybutów XML lub odpowiednich metod, takich jak:

  • rozmiar FAB, który określa atrybut app:fabSize lub metoda setSize();
  • Kolor falowania przycisku FAB, który można określić za pomocą atrybutu app:rippleColor lub metody setRippleColor().
  • Ikona FAB, która korzysta z atrybutu android:src lub metody setImageDrawable()

Odpowiadanie na kliknięcia przycisków

Następnie możesz zastosować funkcję View.OnClickListener, aby obsługiwać kliknięcia przycisku FAB. Na przykład po kliknięciu przez użytkownika przycisku szybkiego działania wyświetla się ten kod: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()
}

Java

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();
    }
});

Więcej informacji o możliwościach przycisku FAB znajdziesz w dokumentacji interfejsu API FloatingActionButton.