Naviguer dans une application Android peut parfois être déroutant sans une interface utilisateur bien structurée.
Cela peut frustrer les utilisateurs et nuire à l’adoption de l’application.
L’article explore comment utiliser le Material Design avec Jetpack Compose pour créer des interfaces intuitives en intégrant des composants comme le Drawer et le FAB.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction au Material Design Android
Utiliser le Drawer pour Android Navigation
Le Material Design est une spécification visuelle et interactive développée par Google pour améliorer l’expérience utilisateur des applications Android. Deux éléments essentiels de cette spécification sont le Drawer (ou App Drawer) et le Floating Action Button (FAB). Le Drawer permet de naviguer entre différents écrans ou sections de l’application via un menu latéral, tandis que le Floating Action Button offre un moyen direct d’accéder à l’action principale
Intégrer le Floating Action Button Android
Un Drawer, aussi appelé App Drawer, est un menu latéral qui permet à l’utilisateur de naviguer entre différents écrans ou sections d’une application. Il est généralement caché et apparaît lorsque l’utilisateur glisse depuis le bord gauche de l’écran ou clique sur une icône de menu (souvent appelée « hamburger » à cause de ses trois lignes horizontales).
Conception d’un Drawer
Le Drawer est composé de plusieurs parties :
- En-tête (Header) :Une zone située en haut du Drawer, souvent utilisée pour afficher des informations sur l’utilisateur courant ou le nom de l’application.
- Menu Items :Une liste d’options de navigation qui permettent de changer d’écran ou de section.
Voici comment on peut définir un Drawer en Jetpack Compose :
@Composable
fun AppDrawer(
currentScreen: String,
onScreenSelected: (String) -> Unit
) {
Column {
// Header du Drawer
DrawerHeader()
// Menu Items
DrawerItem(
icon = Icons.Default.Home,
label = "Home",
isSelected = currentScreen == "Home",
onClick = { onScreenSelected("Home") }
)
DrawerItem(
icon = Icons.Default.Settings,
label = "Settings",
isSelected = currentScreen == "Settings",
onClick = { onScreenSelected("Settings") } ) }}
@Composable
fun DrawerHeader() {
Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
Icon(
imageVector = Icons.Default.Menu,
contentDescription = "Drawer Header Icon"
)
Spacer(modifier = Modifier.width(16.dp))
Text(text = "App Name", style = MaterialTheme.typography.h6) }}
Le code retourne le résultat suivant :
Utilisation du Drawer
Le Drawer est souvent utilisé en conjonction avec un composant Scaffold, qui structure l’interface utilisateur de l’application en définissant des zones pour la barre d’application (AppBar), le corps du contenu, et d’autres éléments comme le Drawer ou le FAB.
Voici un exemple d’utilisation du Drawer dans un Scaffold :
@Composable
fun MainScreen() {
val scaffoldState = rememberScaffoldState()
var currentScreen by remember { mutableStateOf("Home") }
Scaffold(
scaffoldState = scaffoldState,
drawerContent = {
AppDrawer(
currentScreen = currentScreen,
onScreenSelected = {
currentScreen = it
scaffoldState.drawerState.close()
} ) },
content = {
when (currentScreen) {
"Home" -> HomeScreen()
"Settings" -> SettingsScreen() } } )}
Dans cet exemple, le Scaffold gère l’ouverture et la fermeture du Drawer. Lorsqu’un utilisateur sélectionne un élément du Drawer, l’écran actuel change en conséquence.
Jetpack Compose : Projet Material Design
Le Floating Action Button (FAB) est un bouton circulaire qui flotte au-dessus du contenu principal d’une application. Il est destiné à représenter l’action principale de l’application. Par exemple, dans une application de messagerie, le FAB peut être utilisé pour composer un nouveau message.
Conception d’un FAB
Le FAB est un composant visuel simple, mais il peut être personnalisé avec différentes icônes, couleurs et actions.
Voici comment créer un FAB en Jetpack Compose :
@Composable
fun MyFloatingActionButton(onClick: () -> Unit) {
FloatingActionButton(
onClick = onClick,
backgroundColor = MaterialTheme.colors.primary,
content = {
Icon(Icons.Default.Add, contentDescription = "Add")
}
)
}
Placement du FAB
Le FAB est généralement placé dans le coin inférieur droit de l’écran, un emplacement stratégique pour attirer l’attention de l’utilisateur sans interférer avec le contenu principal.
Voici comment intégrer un FAB dans un Scaffold :
@Composable
fun ArticleScreen(onFabClick: () -> Unit) {
Scaffold(
floatingActionButton = {
MyFloatingActionButton(onClick = onFabClick) },
content = { // Contenu principal de l'écran
ArticleList() }
)}
Le code retourne le résultat suivant :
Élément | Description |
|---|---|
Fonction @Composable | Déclare que ArticleScreen est un composable, permettant son utilisation dans l’interface utilisateur. |
onFabClick: () -> Unit | Paramètre de la fonction, représentant une lambda qui sera exécutée lorsque le bouton flottant sera cliqué. |
Scaffold | Composant de mise en page qui fournit une structure de base pour les écrans, incluant des éléments tels que le bouton flottant et le contenu principal. |
floatingActionButton | Propriété du Scaffold qui définit le bouton flottant à afficher. Dans ce cas, c’est MyFloatingActionButton avec l’action onFabClick. |
content | Propriété du Scaffold qui définit le contenu principal de l’écran. Dans ce cas, il contient ArticleList. |
ArticleList() | Composant affichant la liste des articles. Ce composant est placé dans le contenu principal de l’écran. |
Dans cet exemple, le FAB est utilisé pour ajouter un nouvel article à une liste.
Conclusion sur Material Design Android
Structure du Projet
Pour implémenter un Drawer et un FAB dans un projet Android, il est recommandé de structurer le code de manière à séparer les composants logiques. Chaque écran ou fonction principale de l’application peut être encapsulé dans un fichier distinct, ce qui permet de maintenir un code clair et modulaire.
Exemple Complet
@Composable
fun MyApp() {
MaterialTheme {
var showDrawer by remember { mutableStateOf(false) }
val scaffoldState = rememberScaffoldState()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = {
AppDrawer(
currentScreen = "Home",
onScreenSelected = {
showDrawer = false } )},
floatingActionButton = {
MyFloatingActionButton(onClick = { /* Action principale */ })
},
content = {
// Contenu principal de l'application
HomeScreen() } ) }}
@Composable
fun HomeScreen() {
// Contenu de l'écran d'accueil
Text("Welcome to the Home Screen")
}
Le code retourne le résultat suivant :
Dans cet exemple complet, nous combinons un Scaffold, un Drawer et un FAB pour créer une application fonctionnelle. Le Drawer permet de naviguer entre les écrans, tandis que le FAB déclenche l’action principale de l’application.
Conclusion
Le Drawer et le Floating Action Button sont deux éléments essentiels du Material Design qui améliorent l’expérience utilisateur en fournissant des moyens intuitifs de navigation et d’action. En utilisant Jetpack Compose, ces composants peuvent être facilement intégrés dans une application Android moderne, offrant ainsi une interface utilisateur fluide et réactive.
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 que le Material Design et pourquoi est-il important pour Android ?
Comment fonctionne le Drawer dans une application Android ?
Comment intégrer un Floating Action Button (FAB) en Jetpack Compose ?
Quels sont les avantages d'utiliser Jetpack Compose pour le développement Android ?
Comment structurer un projet Android en utilisant Drawer et FAB ?
Conclusion
En intégrant le Drawer et le Floating Action Button, votre application Android peut offrir une expérience utilisateur enrichie et intuitive. Quelle autre fonctionnalité du Material Design aimeriez-vous explorer pour améliorer encore plus vos applications ?
