Eine unverankerte Aktionsschaltfläche (UAS) ist eine runde Schaltfläche, die die primäre Aktion auf der Benutzeroberfläche deiner App auslöst. In diesem Dokument wird beschrieben, wie du eine UAS in dein Layout einfügst, einige des Erscheinungsbilds anpasst und auf das Antippen von Schaltflächen reagiert.
Weitere Informationen zum Entwerfen einer UAS 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 aussieht:
<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 UAS durch das Attribut colorAccent
dargestellt, das du mit der Farbpalette des Designs anpassen kannst.
Du kannst andere FAB-Eigenschaften 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 UAS mit dem Attribut
app:rippleColor
oder der MethodesetRippleColor()
- Das UAS-Symbol mit dem Attribut
android:src
oder der MethodesetImageDrawable()
Auf Tastentippen reagieren
Anschließend kannst du einen View.OnClickListener
anwenden, um UAS-Tippvorgänge zu verarbeiten. Mit dem folgenden Code wird beispielsweise ein Snackbar
angezeigt, 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 die FloatingActionButton
.