Unverankerte Aktionsschaltfläche erstellen

Eine unverankerte Aktionsschaltfläche (Floating Action Button, FAB) ist eine auffällige Schaltfläche, mit der Nutzer eine primäre Aktion in einer App ausführen können. Sie fördert eine einzige, fokussierte Aktion, die der häufigste Pfad ist, den ein Nutzer einschlagen könnte. Sie ist in der Regel rechts unten auf dem Bildschirm verankert.

Hier sind drei Anwendungsfälle, in denen Sie eine FAB verwenden könnten:

  • Neues Element erstellen: In einer Notiz-App kann eine FAB verwendet werden, um schnell eine neue Notiz zu erstellen.
  • Neuen Kontakt hinzufügen: In einer Chat-App könnte eine FAB eine Benutzeroberfläche öffnen, über die der Nutzer einer Unterhaltung eine Person hinzufügen kann.
  • Standort zentrieren: In einer Kartenoberfläche könnte ein FAB die Karte auf den aktuellen Standort des Nutzers zentrieren.

In Material Design gibt es vier Arten von FABs:

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.01.01')

Einfache schwebende Aktionsschaltfläche erstellen

Verwenden Sie die grundlegende FloatingActionButton-Komponente, um eine allgemeine schwebende Aktionsschaltfläche zu erstellen:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Ergebnis

Eine standardmäßige schwebende Aktionsschaltfläche mit abgerundeten Ecken, einem Schatten und einem „Hinzufügen“-Symbol.
Abbildung 1 Eine unverankerte Aktionsschaltfläche.

Kleine unverankerte Aktionsschaltfläche erstellen

Verwenden Sie das SmallFloatingActionButton-Element, um eine kleine schwebende Aktionsschaltfläche zu erstellen. Das folgende Beispiel zeigt, wie das geht, und es werden benutzerdefinierte Farben hinzugefügt.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

Ergebnis

Eine Implementierung von SmallFloatingActionButton mit einem „Hinzufügen“-Symbol.
Abbildung 2. Eine kleine schwebende Aktionsschaltfläche.

Große unverankerte Aktionsschaltfläche erstellen

Verwenden Sie das LargeFloatingActionButton-Element, um eine große schwebende Aktionsschaltfläche zu erstellen. Dieses Composeable unterscheidet sich nicht wesentlich von den anderen Beispielen, abgesehen davon, dass es zu einer größeren Schaltfläche führt.

Im Folgenden finden Sie eine einfache Implementierung einer großen FAB.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Ergebnis

Eine Implementierung von LargeFloatingActionButton, die ein „Hinzufügen“-Symbol enthält.
Abbildung 3 Eine große unverankerte Aktionsschaltfläche.

Erweiterte unverankerte Aktionsschaltfläche erstellen

Mit dem ExtendedFloatingActionButton-Komposit können Sie komplexere schwebende Aktionsschaltflächen erstellen. Der Hauptunterschied zwischen FloatingActionButton und FloatingActionButton besteht darin, dass es spezielle icon- und text-Parameter gibt. Mit ihnen können Sie eine Schaltfläche mit komplexeren Inhalten erstellen, die entsprechend skaliert wird.

Im folgenden Snippet wird gezeigt, wie ExtendedFloatingActionButton implementiert wird. Dabei werden Beispielwerte für icon und text übergeben.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

Ergebnis

Eine Implementierung von ExtendedFloatingActionButton, die den Text „Erweiterte Schaltfläche“ und ein Bearbeitungssymbol enthält.
Abbildung 4: Eine schwebende Aktionsschaltfläche mit Text und Symbol.

Wichtige Fakten

Es gibt zwar mehrere Composeables, mit denen Sie Floating Action Buttons im Material Design-Stil erstellen können, ihre Parameter unterscheiden sich jedoch nicht wesentlich. Zu den wichtigsten Parametern gehören:

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer auf die Schaltfläche drückt.
  • containerColor: Die Farbe der Schaltfläche.
  • contentColor: Die Farbe des Symbols.

z## Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben