Unverankerte Aktionsschaltfläche hinzufügen

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Hinzufügen von Komponenten in Compose

Eine unverankerte Aktionsschaltfläche (UAS) ist eine runde Schaltfläche, die die primäre Aktion auf der Benutzeroberfläche deiner App auslöst. Auf dieser Seite erfährst du, wie du die UAS deinem Layout hinzufügen, einige ihrer Darstellung anpassen und auf das Antippen von Schaltflächen reagieren kannst.

Weitere Informationen zum Entwerfen einer unverankerten Aktionsschaltfläche in deiner App gemäß den Material Design-Richtlinien findest du unter Schaltflächen: unverankerte Aktionsschaltfläche.

Abbildung 1: Eine unverankerte Aktionsschaltfläche

Unverankerte Aktionsschaltfläche zum Layout hinzufügen

Der folgende Code zeigt, wie das FloatingActionButton in der Layoutdatei aussehen sollte:

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

Standardmäßig wird die UAS durch das Attribut colorAccent eingefärbt, das du mit der Farbvorlage des Designs anpassen kannst.

Du kannst andere FAB-Properties mithilfe von XML-Attributen oder entsprechenden Methoden wie den folgenden konfigurieren:

  • Die Größe der UAS, mit dem Attribut app:fabSize oder der Methode setSize().
  • Die Wellenfarbe der FAB mit dem Attribut app:rippleColor oder der Methode setRippleColor().
  • Das UAS-Symbol mit dem Attribut android:src oder der Methode setImageDrawable().

Auf Tastentippen reagieren

Du kannst dann eine View.OnClickListener anwenden, um UAS-Tippvorgänge zu verarbeiten. Der folgende Code zeigt beispielsweise eine Snackbar an, wenn der Nutzer auf die UAS tippt:

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

Weitere Informationen zu den Funktionen der FAB findest du in der API-Referenz für den FloatingActionButton.