Unverankerte Aktionsschaltfläche hinzufügen

Funktion „Schreiben“ ausprobieren

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

Unverankerte Aktionsschaltfläche →

Eine unverankerte Aktionsschaltfläche (UAS) ist eine kreisförmige Schaltfläche, die die primäre Aktion in der Benutzeroberfläche deiner App auslöst. In diesem Dokument wird gezeigt, wie du deinem Layout einen FAB hinzufügen, das Erscheinungsbild teilweise anpassen und auf Schaltflächentippen reagieren kannst.

Weitere Informationen zum Entwerfen eines FAB für deine App gemäß den Material Design-Richtlinien findest du unter Material Design-FAB.

Unverankerte Aktionsschaltfläche zum Layout hinzufügen

Der folgende Code zeigt, wie der FloatingActionButton in der Layoutdatei erscheint:

<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 eine FAB mithilfe des Attributs colorAccent eingefärbt, das Sie mit der Farbpalette des Designs anpassen können.

Sie können andere FAB-Eigenschaften mithilfe von XML-Attributen oder entsprechenden Methoden konfigurieren. Hier einige Beispiele:

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

Auf Tastenanschläge reagieren

Anschließend kannst du eine View.OnClickListener für die FAB-Nutzung anwenden. Mit dem folgenden Code wird beispielsweise ein Snackbar angezeigt, wenn der Nutzer auf den FAB 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 UAS findest du in der API-Referenz für den FloatingActionButton.