Créer un bouton d'action flottant (FAB)

Un bouton d'action flottant est un bouton à forte intensité qui permet à l'utilisateur d'effectuer une action principale dans une application. Il met en avant une seule action ciblée qui constitue le chemin le plus courant qu'un utilisateur peut emprunter. Il est généralement ancré en bas à droite de l'écran.

Voici trois cas d'utilisation dans lesquels vous pouvez utiliser un bouton d'action flottant :

  • Créer un élément : dans une application de prise de notes, un FAB peut être utilisé pour créer rapidement une note.
  • Ajouter un contact : dans une application de chat, un FAB peut ouvrir une interface permettant à l'utilisateur d'ajouter une personne à une conversation.
  • Centrer la position : dans une interface de carte, un FAB peut centrer la carte sur la position actuelle de l'utilisateur.

Dans Material Design, il existe quatre types de FAB :

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini sur le niveau d'API 21 ou supérieur.

Dépendances

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.05.00')

Créer un bouton d'action flottant de base

Pour créer un bouton d'action flottant général, utilisez le composable de base FloatingActionButton :

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Résultat

Bouton d'action flottant standard avec des angles arrondis, une ombre et une icône "Ajouter".
Figure 1. Bouton d'action flottant.

Créer un petit bouton d'action flottant

Pour créer un petit bouton d'action flottant, utilisez le composable SmallFloatingActionButton. L'exemple suivant montre comment procéder, avec l'ajout de couleurs personnalisées.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

Résultat

Implémentation de SmallFloatingActionButton contenant une icône "Ajouter".
Figure 2. Petit bouton d'action flottant.

Créer un grand bouton d'action flottant

Pour créer un grand bouton d'action flottant, utilisez le composable LargeFloatingActionButton. Ce composable n'est pas très différent des autres exemples, si ce n'est qu'il génère un bouton plus grand.

Voici une implémentation simple d'un grand FAB.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Résultat

Implémentation de LargeFloatingActionButton contenant une icône "Ajouter".
Figure 3. Un grand bouton d'action flottant.

Créer un bouton d'action flottant étendu

Vous pouvez créer des boutons d'action flottants plus complexes avec le composable ExtendedFloatingActionButton. La principale différence entre FloatingActionButton et FloatingActionButton est que ce dernier possède des paramètres icon et text dédiés. Ils vous permettent de créer un bouton avec un contenu plus complexe qui s'adapte à son contenu de manière appropriée.

L'extrait de code suivant montre comment implémenter ExtendedFloatingActionButton, avec des exemples de valeurs transmises pour icon et text.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

Résultat

Implémentation d'ExtendedFloatingActionButton qui affiche le texte "bouton étendu" et une icône de modification.
Figure 4. Bouton d'action flottant avec du texte et une icône.

Points essentiels

Bien qu'il existe plusieurs composables que vous pouvez utiliser pour créer des boutons d'action flottants conformes à Material Design, leurs paramètres ne diffèrent pas beaucoup. Voici quelques-uns des paramètres clés à prendre en compte :

  • onClick : fonction appelée lorsque l'utilisateur appuie sur le bouton.
  • containerColor : couleur du bouton.
  • contentColor : couleur de l'icône.

z## Collections contenant ce guide

Ce guide fait partie des collections de guides de démarrage rapide organisées qui couvrent des objectifs de développement Android plus larges :

Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de magnifiques composants d'UI basés sur le système de conception Material Design.
Collection de guides rapides

Poser des questions ou envoyer des commentaires

Consultez notre page de questions fréquentes et découvrez nos guides rapides. Vous pouvez également nous contacter pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Laisser un commentaire