Ajouter un bouton d'action flottant

Essayer Compose

Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment ajouter des composants dans Compose.

<ph type="x-smartling-placeholder"></ph> Bouton d'action flottant →

Un bouton d'action flottant est un bouton circulaire qui déclenche dans l'UI de votre application. Ce document explique comment ajouter un bouton d'action flottant à votre mise en page, personnaliser une partie de son apparence et répondre aux pressions sur les boutons.

Pour savoir comment concevoir un bouton d'action flottant pour votre application conformément au consignes de conception, consultez la page Material Design bouton d'action flottant pour en savoir plus.

Image 1. Un bouton d'action flottant

Ajouter le bouton d'action flottant à votre mise en page

Le code suivant montre comment FloatingActionButton apparaît dans votre fichier de mise en page:

<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" />

Par défaut, un bouton d'action flottant est coloré par l'attribut colorAccent, que vous pouvez personnaliser avec les couleurs du thème palette.

Vous pouvez configurer d'autres propriétés du bouton d'action flottant à l'aide d'attributs XML ou de , par exemple:

• La taille du bouton d'action flottant, à l'aide de l'attribut app:fabSize ou du setSize() méthode
• Couleur d'ondulation du bouton d'action flottant, à l'aide de l'attribut app:rippleColor ou du setRippleColor() méthode
• L'icône du bouton d'action flottant, à l'aide de l'attribut android:src ou du setImageDrawable() méthode

Répondre aux boutons

Vous pouvez ensuite appliquer une View.OnClickListener jusqu'à gérer les tapotements sur le bouton d’action flottant. Par exemple, le code suivant affiche une Snackbar lorsque l'utilisateur appuie sur le bouton d'action flottant:

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();
    }
});

Pour en savoir plus sur les fonctionnalités du bouton d'action flottant, consultez la documentation de référence de l'API. pour le FloatingActionButton