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.

Bouton d'action flottant →

Un bouton d'action flottant est un bouton circulaire qui déclenche l'action principale dans l'interface utilisateur de votre application. Ce document explique comment ajouter un bouton d'action flottant à votre mise en page, personnaliser son apparence et répondre aux appuis sur le bouton.

Pour en savoir plus sur la conception d'un bouton d'action flottant pour votre application conformément aux consignes Material Design, consultez Bouton d'action flottant Material Design .

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

Le code suivant montre comment le 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 la palette de couleurs du thème.

Vous pouvez configurer d'autres propriétés du bouton d'action flottant à l'aide d'attributs XML ou de méthodes correspondantes, telles que les suivantes :

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

Répondre aux appuis sur le bouton

Vous pouvez ensuite appliquer un View.OnClickListener pour gérer les appuis sur le bouton d'action flottant. Par exemple, le code suivant affiche un Snackbar lorsque l'utilisateur appuie sur le bouton d'action flottant :

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

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.