Unverankerte Aktionsschaltfläche erstellen

Eine unverankerte Aktionsschaltfläche (UAS) ist eine Schaltfläche mit hoher Gewichtung, über die Nutzer eine primäre Aktion in einer Anwendung ausführen können. Sie fördert eine einzelne, fokussierte Aktion, die der häufigste Weg ist, den ein Nutzer einschlagen könnte, und befindet sich in der Regel unten rechts auf dem Bildschirm.

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

  • Neues Element erstellen: In einer Notizen-App kann mit einem schwebenden Aktionsschaltfläche schnell eine neue Notiz erstellt werden.
  • Neuen Kontakt hinzufügen: In einer Chat-App könnte über einen schwebenden Aktionsschaltfläche eine Benutzeroberfläche geöffnet werden, über die der Nutzer einer Unterhaltung jemanden 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 schwebenden Aktionsschaltflächen:

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.05.00"))

Groovy

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

Einfache unverankerte Aktionsschaltfläche erstellen

Verwenden Sie die einfache FloatingActionButton-Composable, 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 unverankerte 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 die Composable-Funktion SmallFloatingActionButton, 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, die ein „Hinzufügen“-Symbol enthält.
Abbildung 2. Eine kleine unverankerte Aktionsschaltfläche.

Große unverankerte Aktionsschaltfläche erstellen

Verwenden Sie die zusammensetzbare Funktion LargeFloatingActionButton, um eine große schwebende Aktionsschaltfläche zu erstellen. Diese Composable unterscheidet sich nicht wesentlich von den anderen Beispielen, außer dass sie zu einer größeren Schaltfläche führt.

Im Folgenden finden Sie eine einfache Implementierung eines großen schwebenden Aktionsschaltfläche.

@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 der ExtendedFloatingActionButton-Composable können Sie komplexere Floating Action Buttons erstellen. Der Hauptunterschied zu FloatingActionButton besteht darin, dass es spezielle icon- und text-Parameter hat. Damit können Sie eine Schaltfläche mit komplexeren Inhalten erstellen, die sich entsprechend an den Inhalt anpasst.

Im folgenden Snippet sehen Sie, wie ExtendedFloatingActionButton implementiert wird. Es 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, in der der Text „Erweiterte Schaltfläche“ und ein Bearbeitungssymbol angezeigt werden.
Abbildung 4: Eine unverankerte Aktionsschaltfläche mit Text und einem Symbol.

Wichtige Fakten

Es gibt zwar mehrere Composables, mit denen Sie Floating Action Buttons erstellen können, die dem Material Design entsprechen, aber ihre Parameter unterscheiden sich nicht wesentlich. Zu den wichtigsten Parametern, die Sie berücksichtigen sollten, gehören die folgenden:

  • 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 Kurzanleitungen, die umfassendere Ziele der Android-Entwicklung abdecken:

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

Fragen oder Feedback

Auf der Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können uns aber auch gern kontaktieren und uns Ihre Meinung mitteilen.
Zu den FAQs Feedback geben