Unverankerte Aktionsschaltfläche hinzufügen

Compose ausprobieren

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

Unverankerte Aktionsschaltfläche →

Eine unverankerte Aktionsschaltfläche (Floating Action Button, FAB) ist eine runde Schaltfläche, die die primäre Aktion in der Benutzeroberfläche Ihrer App auslöst. In diesem Dokument wird gezeigt, wie Sie Ihrem Layout ein Floating Action Button hinzufügen, sein Aussehen anpassen und auf das Tippen auf die Schaltfläche reagieren.

Weitere Informationen zum Entwerfen einer FAB für Ihre App gemäß den Material Design-Richtlinien finden Sie unter Material Design-FAB.

Unverankerte Aktionsschaltfläche in das Layout einfügen

Im folgenden Code wird gezeigt, wie FloatingActionButton in Ihrer Layoutdatei dargestellt wird:

<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 ein FAB durch das Attribut colorAccent eingefärbt. Sie können es mit der Farbpalette des Designs anpassen.

Sie können andere FAB-Eigenschaften mit XML-Attributen oder entsprechenden Methoden konfigurieren, z. B.:

• Größe des FAB mit dem Attribut app:fabSize oder der Methode setSize()
• Die Farbe der Wellen des FAB mit dem app:rippleColor-Attribut oder der Methode setRippleColor()
• Das Symbol für die Floating Action Button mit dem android:src-Attribut oder der Methode setImageDrawable()

Auf Tastendruck reagieren

Sie können dann eine View.OnClickListener anwenden, um das Tippen auf die schwebende Aktionsfläche zu verarbeiten. Im folgenden Code wird beispielsweise ein Snackbar angezeigt, wenn der Nutzer auf die Schaltfläche tippt:

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

Weitere Informationen zu den Funktionen des Floating Action Button finden Sie in der API-Referenz für FloatingActionButton.