Eine unverankerte Aktionsschaltfläche (UAS) ist eine runde Schaltfläche, die die primäre Aktion auf der Benutzeroberfläche deiner App auslöst. Auf dieser Seite erfährst du, wie du die UAS deinem Layout hinzufügen, einige ihrer Darstellung anpassen und auf das Antippen von Schaltflächen reagieren kannst.
Weitere Informationen zum Entwerfen einer unverankerten Aktionsschaltfläche in deiner App gemäß den Material Design-Richtlinien findest du unter Schaltflächen: unverankerte Aktionsschaltfläche.
Unverankerte Aktionsschaltfläche zum Layout hinzufügen
Der folgende Code zeigt, wie das FloatingActionButton
in der Layoutdatei aussehen sollte:
<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 die UAS durch das Attribut colorAccent
eingefärbt, das du mit der Farbvorlage des Designs anpassen kannst.
Du kannst andere FAB-Properties mithilfe von XML-Attributen oder entsprechenden Methoden wie den folgenden konfigurieren:
- Die Größe der UAS, mit dem Attribut
app:fabSize
oder der MethodesetSize()
. - Die Wellenfarbe der FAB mit dem Attribut
app:rippleColor
oder der MethodesetRippleColor()
. - Das UAS-Symbol mit dem Attribut
android:src
oder der MethodesetImageDrawable()
.
Auf Tastentippen reagieren
Du kannst dann eine View.OnClickListener
anwenden, um UAS-Tippvorgänge zu verarbeiten. Der folgende Code zeigt beispielsweise eine Snackbar
an, wenn der Nutzer auf die UAS 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 der FAB findest du in der API-Referenz für den FloatingActionButton
.