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 MethodesetSize()
- Die Wellenfarbe des UAS mithilfe des Attributs
app:rippleColor
oder der MethodesetRippleColor()
- Das FAB-Symbol mit dem Attribut
android:src
oder der MethodesetImageDrawable()
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:
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 des UAS findest du in der API-Referenz für den FloatingActionButton
.