Dodaj pływający przycisk polecenia

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak dodawać komponenty w oknie tworzenia wiadomości

Pływający przycisk polecenia to okrągły przycisk, który wywołuje główne działanie w interfejsie aplikacji. Ten dokument pokazuje, jak dodać przycisk typu FAB do układu, dostosować część jego wyglądu i reagować na kliknięcia przycisków.

Więcej informacji o projektowaniu przycisku typu FAB do aplikacji zgodnie z wytycznymi Material Design znajdziesz w artykule o stylu Material Design.

Obraz przedstawiający ekran aplikacji zawierający czerwony element FloatingActionButton
Rysunek 1. Pływający przycisk polecenia.

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

Ten 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 typu FAB jest kolorowany według atrybutu colorAccent, który możesz dostosować za pomocą palety kolorów motywu.

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

  • Rozmiar przycisku typu FAB za pomocą atrybutu app:fabSize lub metody setSize()
  • Kolor fali FAB za pomocą atrybutu app:rippleColor lub metody setRippleColor()
  • Ikona przycisku typu FAB za pomocą atrybutu android:src lub metody setImageDrawable()

Reagowanie na kliknięcia przycisków

Następnie możesz zastosować View.OnClickListener do obsługi przycisków FAB. Na przykład ten kod wyświetla Snackbar, gdy użytkownik kliknie przycisk PPP:

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 FAB znajdziesz w dokumentacji interfejsu API FloatingActionButton.