Optimiser l’expérience utilisateur sur Android est crucial pour maintenir l’engagement.
Sans un design intuitif, les utilisateurs peuvent se sentir frustrés et abandonner l’application.
Le Floating Action Button, grâce à Jetpack Compose, offre une solution élégante pour accéder rapidement aux fonctions principales, améliorant ainsi l’interaction utilisateur.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction
Le Floating Action Button (FAB) est un élément clé de l’interface utilisateur, popularisé par le design Material de Google. Ce bouton flottant est destiné à représenter l’action principale d’une application. Cet ebook vous guidera à travers l’utilisation du Floating Action Button dans Jetpack Compose, en expliquant quand et comment l’utiliser, en personnalisant ses formes et ses icônes, et en explorant les autres types de boutons disponibles.
Un Floating Action Button est un bouton flottant, généralement circulaire, qui se distingue par une élévation importante par rapport au reste de l’interface utilisateur. Il est utilisé pour représenter l’action principale de l’application, comme créer un nouvel élément ou démarrer une nouvelle tâche.
Le Floating Action Button est souvent utilisé pour :
- Créer de nouveaux éléments :Par exemple, dans une application de gestion de tâches, le FAB pourrait être utilisé pour ajouter une nouvelle tâche.
- Initier des actions principales :Dans une application de messagerie, il pourrait servir à composer un nouveau message.
- Fournir un accès rapide :Pour des actions que les utilisateurs effectuent fréquemment.
En général, il est placé dans un coin de l’écran (souvent en bas à droite) pour être facilement accessible tout en restant visible et distinct.
Création d'un Floating Action Button avec Jetpack Compose
Utilisation de base
Pour créer un Floating Action Button dans Jetpack Compose, vous utilisez le composable FloatingActionButton. Voici un exemple simple :
@Composable
fun BasicFloatingActionButton() {
FloatingActionButton(
onClick = { /* Action à exécuter lors du clic */ },
content = {
Icon(Icons.Filled.Add, contentDescription = "Ajouter")
}
)}
Résultat obtenu après exécution du code :
- onClick :Fonction de rappel appelée lorsque le bouton est cliqué.
- content :Composable qui définit ce que le bouton affiche, typiquement une icône.
Ajouter une Icône
Les Floating Action Buttons sont généralement associés à une icône pour indiquer clairement leur fonction. Par exemple :
@Composable
fun FabWithIcon() {
FloatingActionButton(
onClick = { /* Action à exécuter lors du clic */ },
content = {
Icon(Icons.Filled.Favorite, contentDescription = "Favoris")
}
)
}
- Icon :Utilisé pour afficher une icône à l’intérieur du Floating Action Button. Assurez-vous de fournir unedescriptionpour l’accessibilité.
Résultat obtenu après exécution du code :
Personnalisation des Couleurs
Vous pouvez personnaliser les couleurs du Floating Action Button en utilisant les paramètres containerColor et contentColor :
@Composable
fun CustomizedFab() {
FloatingActionButton(
onClick = { /* Action à exécuter lors du clic */ },
containerColor = MaterialTheme.colorScheme.primary,
contentColor = Color.White,
content = {
Icon(Icons.Filled.Add, contentDescription = "Ajouter")
}
)
}
- containerColor :Définit la couleur de fond du bouton.
- contentColor :Définit la couleur de l’icône ou du texte à l’intérieur du bouton.
Résultat obtenu après exécution du code :
Personnalisation Avancée du Floating Action Button
Modifier la Forme
Le Floating Action Button peut être modifié pour avoir une forme différente de son apparence par défaut :
@Composable
fun ShapedFloatingActionButton() {
FloatingActionButton(
onClick = { /* Action à exécuter lors du clic */ },
shape = RoundedCornerShape(16.dp),
content = {
Icon(Icons.Filled.Add, contentDescription = "Ajouter")
} )}
- shape :Permet de définir la forme du bouton. Ici, nous utilisons un arrondi avec RoundedCornerShape.
Résultat obtenu après exécution du code :
Modifier l’Élévation
L’élévation du Floating Action Button peut être ajustée pour lui donner plus ou moins de profondeur :
@Composable
fun ElevatedFloatingActionButton() {
FloatingActionButton(
onClick = { /* Action à exécuter lors du clic */ },
elevation = FloatingActionButtonDefaults.elevation(8.dp),
content = {
Icon(Icons.Filled.Add, contentDescription = "Ajouter")
} )}
Résultat obtenu après exécution du code :
- elevation :Définit l’élévation du bouton, ce qui influence son ombre et son apparence en relief.
Autres Types de Boutons dans Jetpack Compose
En plus du Floating Action Button, Jetpack Compose propose plusieurs autres types de boutons pour divers usages :
IconButton
Un bouton qui affiche uniquement une icône, sans texte :
@Composable
fun IconButtonExample() {
IconButton(onClick = { /* Action à exécuter lors du clic */ }) {
Icon(Icons.Filled.Favorite, contentDescription = "Favoris")
}
}
Résultat obtenu après exécution du code :
OutlinedButton
Un bouton avec une bordure mais sans fond :
@Composable
fun OutlinedButtonExample() {
OutlinedButton(onClick = { /* Action à exécuter lors du clic */ }) {
Text("Bouton Borduré")
}
}
Résultat obtenu après exécution du code :
TextButton
Un bouton avec uniquement du texte, souvent utilisé pour des actions secondaires :
@Composable
fun TextButtonExample() {
TextButton(onClick = { /* Action à exécuter lors du clic */ }) {
Text("Bouton Texte")
}
}
Résultat obtenu après exécution du code :
ToggleButton
Un bouton qui change d’état lorsqu’il est cliqué :
@Composable
fun ToggleButtonExample() {
var checked by remember { mutableStateOf(false) }
ToggleButton(
checked = checked,
onCheckedChange = { checked = it }
) {
Text(if (checked) "Activé" else "Désactivé")
}
}
Résultat obtenu après exécution du code :
Conclusion
Le Floating Action Button est un élément de design puissant et flexible pour les applications Android. Avec Jetpack Compose, vous pouvez facilement le personnaliser en fonction de vos besoins, que ce soit en modifiant ses couleurs, sa forme ou son élévation. Ce chapitre a couvert les aspects essentiels de l’utilisation du Floating Action Button, ainsi que d’autres types de boutons que vous pouvez utiliser pour enrichir vos interfaces utilisateur.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Qu'est-ce qu'un Floating Action Button ?
Quand utiliser un Floating Action Button ?
Comment personnaliser un Floating Action Button dans Jetpack Compose ?
Quels sont les autres types de boutons disponibles dans Jetpack Compose ?
Comment intégrer un Floating Action Button dans une application Android ?
Conclusion
Le Floating Action Button est essentiel pour une interface Android moderne et efficace. Quels autres éléments de Jetpack Compose souhaitez-vous explorer pour améliorer vos interfaces ?
