Créer un bouton

Les boutons permettent à l'utilisateur de déclencher une action définie. Il existe cinq types de boutons:

Type

Apparence

Objectif
Rempli

Arrière-plan uni avec texte contrasté

Pour les actions principales, telles que "Envoyer" et "Enregistrer". L'effet d'ombre met en avant l'importance du bouton.
Tonal

La couleur d'arrière-plan varie pour correspondre à la surface.

Pour les actions principales ou importantes. Les boutons remplis apportent du poids visuel et sont adaptés à des actions telles que "Ajouter au panier" et "Se connecter".
Élevée

L'ombre le fait ressortir.

Pour les actions principales ou importantes. Augmentez l'élévation pour rendre le bouton plus visible.
Contours

Comporte une bordure sans remplissage.

Pour les actions importantes, mais non principales. Les boutons avec contours se marient bien avec d'autres boutons pour indiquer des actions secondaires alternatives, comme "Annuler" ou "Retour".
Texte

Texte sans arrière-plan ni bordure.

Pour les actions moins critiques, comme les liens de navigation ou les actions secondaires telles que "En savoir plus" ou "Afficher les détails".

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer un bouton rempli

Le composant de bouton rempli utilise le composable de base Button. Par défaut, il est rempli d'une couleur unie.

Résultats

Bouton rempli avec un arrière-plan violet et le texte "filled" (rempli).
Figure 1 Bouton rempli.

Créer un bouton tonal rempli

Le composant de bouton tonal rempli utilise le composable FilledTonalButton. Par défaut, il est rempli d'une couleur tonale.

Résultats

Bouton tonal sur fond violet clair avec le texte "filled" (rempli).
Figure 2 Bouton tonal.

Créer un bouton avec contour

Le composant de bouton avec contour utilise le composable OutlinedButton. Il s'affiche avec un contour par défaut.

Résultats

Bouton transparent avec un contour sombre et le texte "Contouré".
Figure 3 Un bouton avec contours.

Créer un bouton surélevé

Le composant de bouton surélevé utilise le composable ElevatedButton. Il comporte une ombre qui représente l'effet d'élévation par défaut et s'affiche sous la forme d'un bouton avec un contour et une ombre.

Résultats

Un bouton surélevé sur fond gris avec le texte "Élevé".
Figure 4. Bouton surélevé.

Créer un bouton textuel

Le composant de bouton de texte utilise le composable TextButton. Tant qu'il n'a pas été cliqué, il ne s'affiche que sous forme de texte. Il n'a pas de remplissage ni de contour solides par défaut.

Résultats

Bouton de texte "Bouton de texte"
Figure 5 Bouton de texte.

Points essentiels

  • onClick: fonction appelée lorsque l'utilisateur appuie sur le bouton.
  • enabled: lorsque ce paramètre est défini sur "false", le bouton apparaît indisponible et inactif.
  • colors: instance de ButtonColors qui détermine les couleurs utilisées dans le bouton.
  • contentPadding: marge intérieure du bouton.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionné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 beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires