Material Design pour Android

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser la thématisation dans Compose.

Material Design est un guide complet de conception visuelle, de mouvement et d'interaction sur les plates-formes et les appareils. Pour utiliser Material Design dans vos applications Android, suivez les consignes définies dans la spécification Material Design. Si votre application utilise Jetpack Compose, vous pouvez utiliser la bibliothèque Compose Material 3. Si votre application utilise des vues, vous pouvez utiliser la bibliothèque des composants Material Android.

Android propose les fonctionnalités suivantes pour vous aider à créer des applications Material Design:

  • Un thème d'application Material Design pour appliquer un style à tous vos widgets d'interface utilisateur
  • Widgets pour les vues complexes, telles que les listes et les fiches
  • API pour les ombres et les animations personnalisées

Thème et widgets Material

Pour profiter des fonctionnalités de Material, telles que la personnalisation des widgets d'interface utilisateur standards et pour simplifier la définition du style de votre application, appliquez un thème basé sur Material à votre application.

Figure 1. avec le thème Dark Material.
Figure 2. avec le thème Light Material.

Si vous utilisez Android Studio pour créer votre projet Android, un thème Material est appliqué par défaut. Pour savoir comment mettre à jour le thème de votre projet, consultez Styles et thèmes.

Pour offrir à vos utilisateurs une expérience familière, utilisez les modèles d'expérience utilisateur les plus courants de Material:

  • Faites la promotion de l'action principale de votre interface utilisateur avec un bouton d'action flottant.
  • Affichez votre marque, la navigation, la recherche et d'autres actions à l'aide de la barre d'application.
  • Affichez et masquez la navigation de votre application à l'aide du panneau de navigation.
  • Choisissez parmi les nombreux autres composants Material pour la mise en page et la navigation de votre application, tels que la réduction des barres d'outils, les onglets, la barre de navigation inférieure, etc. Pour tous les voir, consultez le catalogue Material Components pour Android.

Dans la mesure du possible, utilisez des icônes Material prédéfinies. Par exemple, pour le bouton "Menu" de votre panneau de navigation, utilisez l'icône standard "hamburger". Consultez la section Icônes Material Design pour obtenir la liste des icônes disponibles. Vous pouvez également importer des icônes SVG à partir de la bibliothèque Material Icon avec Vector Asset Studio d'Android Studio.

Ombres et cartes d'élévation

Outre les propriétés X et Y, les vues dans Android possèdent une propriété Z. Cette propriété représente l'élévation d'une vue, qui détermine les éléments suivants:

  • La taille de l'ombre: dans les vues dont la valeur Z est plus élevée, les ombres sont plus grandes.
  • Ordre de traçage: les vues dont la valeur Z est plus élevée apparaissent au-dessus des autres vues.
Figure 3. La valeur Z représentant l'altitude.

Vous pouvez appliquer une élévation à une mise en page basée sur des cartes, ce qui vous permet d'afficher des informations importantes dans des cartes qui donnent un aspect Material. Vous pouvez utiliser le widget CardView pour créer des cartes avec une élévation par défaut. Pour en savoir plus, consultez Créer une mise en page basée sur des cartes.

Pour en savoir plus sur l'ajout d'une élévation à d'autres vues, consultez la section Créer des ombres et couper des vues.

Animations

Figure 4. Animation de retour tactile

Les API d'animation vous permettent de créer des animations personnalisées pour le retour tactile dans les commandes de l'interface utilisateur, les modifications de l'état de la vue et les transitions d'activité.

Grâce à ces API, vous pouvez:

  • Répondez aux événements tactiles dans vos vues à l'aide d'animations de retour tactile.
  • Masquez et affichez des vues à l'aide d'animations d'affichage circulaire.
  • Passez d'une activité à une autre grâce à des animations de transition d'activité personnalisées.
  • Créez des animations plus naturelles avec des mouvements incurvés.
  • Animez les changements d'une ou plusieurs propriétés de vue à l'aide d'animations de changement de l'état de la vue.
  • Permet d'afficher les animations dans des drawables de liste d'état entre chaque changement d'état de la vue.

Les animations de retour tactile sont intégrées à plusieurs affichages standards, tels que les boutons. Les API Animation vous permettent de personnaliser ces animations et de les ajouter à vos vues personnalisées.

Pour en savoir plus, consultez la section Présentation des animations.

Drawables

Ces fonctionnalités pour les drawables vous aident à implémenter des applications Material Design:

  • Les drawables vectoriels sont évolutifs sans perte de définition et conviennent parfaitement aux icônes monochromes intégrées aux applications. En savoir plus sur les drawables vectoriels
  • La nuance des drawables vous permet de définir des bitmaps en tant que masque alpha et de leur appliquer une couleur au moment de l'exécution. Découvrez comment ajouter une teinte aux drawables.
  • L'extraction des couleurs vous permet d'extraire automatiquement les couleurs visibles d'une image bitmap. Découvrez comment sélectionner des couleurs avec l'API Palette.