Material Components (MDC) aide les développeurs à implémenter Material Design. Conçu par une équipe d'ingénieurs et de spécialistes de l'expérience utilisateur travaillant pour Google, MDC propose des dizaines de composants d'interface utilisateur élégants et fonctionnels. Il est disponible pour Android, iOS, le Web et Flutter. material.io/develop |
Dans l'atelier de programmation MDC-103, vous avez personnalisé la couleur, l'élévation et la typographie des composants Material Components (MDC) pour appliquer un style à votre application.
Un composant du système Material Design effectue un ensemble de tâches prédéfinies et présente certaines caractéristiques, comme un bouton. Toutefois, un bouton est bien plus qu'un moyen pour l'utilisateur d'effectuer une action. C'est également une expression visuelle ayant une certaine forme, taille et couleur qui indique à l'utilisateur que le bouton est interactif et qu'une action se produira lorsqu'il appuiera ou cliquera dessus.
Les consignes de Material Design décrivent les composants du point de vue du graphiste. Elles décrivent une large gamme de fonctions de base disponibles pour différentes plates-formes, ainsi que les éléments anatomiques qui constituent chaque composant. Par exemple, un fond se compose d'une couche arrière avec son contenu, d'une couche avant avec son contenu, de règles de mouvement et d'options d'affichage. Chacun de ces composants peut être personnalisé pour répondre aux besoins, cas d'utilisation et contenus de chaque application. Ces éléments sont, pour la plupart, des vues, commandes et fonctions traditionnelles du SDK de votre plate-forme.
Bien que les consignes de Material Design citent plusieurs composants, tous ne conviennent pas pour du code réutilisable et ne sont donc pas disponibles dans MDC. Vous pouvez créer ces expériences vous-même et personnaliser le style de votre application en utilisant un code traditionnel.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez ajouter un fond à Shrine. Il filtre les produits affichés dans la grille asymétrique par catégorie. Vous utiliserez :
- Forme
- Mouvement
- Classes du SDK Android traditionnel
Composants MDC-Android dans cet atelier de programmation
- Forme
Prérequis
- Connaissances de base sur le développement Android
- Android Studio (téléchargez-le ici si vous ne l'avez pas déjà fait)
- Un émulateur ou un appareil Android (disponible via Android Studio)
- L'exemple de code (voir l'étape suivante)
Quel est votre niveau d'expérience en termes de création d'applications Android ?
Vous avez déjà suivi l'atelier MDC-103 ?
Si vous avez fini l'atelier de programmation MDC-103, votre code devrait être prêt pour commencer cet atelier. Passez à l'étape 3.
Vous partez de zéro ?
Télécharger l'application de départ de l'atelier de programmation
L'application de départ se trouve dans le répertoire material-components-android-codelabs-104-starter/kotlin. Assurez-vous d'utiliser la commande cd pour accéder à ce répertoire avant de commencer.
… ou cloner l'atelier depuis GitHub
Pour cloner cet atelier de programmation à partir de GitHub, exécutez les commandes suivantes :
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
Charger le code de départ dans Android Studio
- Une fois l'assistant de configuration terminé et la fenêtre de bienvenue dans Android Studio affichée, cliquez sur Open an existing Android Studio project (Ouvrir un projet Android Studio existant). Accédez au répertoire dans lequel vous avez installé l'exemple de code, puis sélectionnez kotlin > shrine(ou recherchez shrine sur votre ordinateur) pour ouvrir le projet Shipping.
- Attendez qu'Android Studio crée et synchronise le projet (voir les indicateurs d'activité situés en bas de la fenêtre Android Studio).
- À ce stade, Android Studio peut générer des erreurs de compilation, car vous ne disposez pas du SDK Android ni de certains outils de compilation, comme celui présenté ci-dessous. Suivez les instructions fournies dans Android Studio pour installer/mettre à jour ces éléments et synchroniser votre projet.
Ajouter des dépendances de projet
Le projet nécessite une dépendance à la bibliothèque de support MDC-Android. L'exemple de code que vous avez téléchargé devrait déjà inclure cette dépendance, mais il est recommandé de suivre les étapes suivantes pour en être sûr.
- Accédez au fichier
build.gradledu moduleappet vérifiez si le blocdependenciesinclut bien une dépendance à MDC Android :
api 'com.google.android.material:material:1.1.0-alpha06'
- (Facultatif) Si nécessaire, modifiez le fichier
build.gradlepour ajouter les dépendances suivantes et synchroniser le projet.
dependencies {
api 'com.google.android.material:material:1.1.0-alpha06'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.android.volley:volley:1.1.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:core:1.1.0'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}Exécuter l'application de départ
|
Opération réussie ! L'application Shrine devrait s'exécuter sur votre appareil.
Un fond est la surface la plus éloignée d'une application. Il s'affiche derrière tous les autres contenus et composants. Il comporte deux surfaces : une couche arrière (qui affiche les actions et les filtres) et une couche avant (qui affiche le contenu). Vous pouvez utiliser un fond pour afficher des informations et des actions interactives, comme des filtres de navigation ou de contenu.
Masquer le contenu de la grille
Dans shr_product_grid_fragment.xml, ajoutez l'attribut android:visibility="gone" à votre NestedScrollView pour supprimer temporairement le contenu du produit :
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Nous allons installer un arrière-plan dans cette région. Pour éviter d'afficher une séparation entre la barre d'application supérieure et le contenu du menu qui apparaît sur l'arrière-plan, nous allons définir la même couleur pour l'arrière-plan et la barre d'application supérieure.
Dans shr_product_grid_fragment.xml, ajoutez l'élément suivant en tant que premier élément de votre FrameLayout racine, avant le AppBarLayout :
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout>Dans styles.xml, ajoutez les éléments suivants :
styles.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>Bravo ! Vous avez ajouté un magnifique arrière-plan à l'UI de Shrine. Ensuite, nous allons ajouter un menu.
Ajouter le menu
Un menu est essentiellement une liste de boutons de texte. Nous allons en ajouter un ici.
Créez un fichier de mise en page appelé shr_backdrop.xml dans votre répertoire res -> layout et ajoutez les éléments suivants :
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge>Ajoutez cette liste au LinearLayout que vous venez d'ajouter dans shr_product_grid_fragment.xml à l'aide d'une balise <include> :
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>Compilez et exécutez. Votre écran d'accueil devrait se présenter ainsi :
Maintenant que nous avons configuré notre arrière-plan, Réaffichons le contenu que nous avons masqué précédemment.
Avant que nous apportions des modifications à Shrine dans cet atelier de programmation, le contenu principal du produit se trouvait sur la surface la plus éloignée. En ajoutant un arrière-plan, ce contenu est désormais plus mis en avant, car il apparaît devant cet arrière-plan.
Ajouter un calque
Nous devons afficher à nouveau le calque de grille de produits. Supprimez l'attribut android:visibility="gone" de votre NestedScrollView :
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Appliquons un style à la couche avant avec une encoche dans l'angle supérieur gauche. Material Design désigne ce type de personnalisation sous le terme de "forme". Les surfaces de Material peuvent prendre différentes formes. Les formes mettent en avant les surfaces et leur donnent du style, et peuvent servir pour exprimer le branding. Les formes Material peuvent avoir des angles et des bordures arrondis ou pointus, et autant de côtés que désiré. Elles peuvent être symétriques ou irrégulières.
Ajouter une forme
Modifiez la forme de la grille. Nous avons fourni un arrière-plan de forme personnalisée, mais la forme ne s'affiche correctement que sur Android Marshmallow et les versions ultérieures. Nous pouvons définir l'arrière-plan shr_product_grid_background_shape sur votre NestedScrollView uniquement pour Android Marshmallow et les versions ultérieures. Tout d'abord, ajoutez un id à votre NestedScrollView afin que nous puissions le référencer dans le code, comme suit :
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">Ensuite, définissez l'arrière-plan de manière programmatique dans ProductGridFragment.kt. Ajoutez la logique suivante pour définir l'arrière-plan à la fin de onCreateView(), juste avant l'instruction de retour :
ProductGridFragment.kt
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}Enfin, nous allons mettre à jour la ressource de couleur productGridBackgroundColor (également utilisée par l'arrière-plan de forme personnalisée) comme suit :
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>Compiler et exécuter :
Nous avons donné à la surface principale de Shrine une forme personnalisée. Grâce à l'élévation de la surface, les utilisateurs peuvent voir que quelque chose se trouve derrière la couche avant blanche. Ajoutons une animation afin que les utilisateurs puissent voir ce qui se trouve derrière : le menu.
Une animation permet de donner vie à votre application. Le mouvement peut être imposant et spectaculaire, subtil et minimaliste, ou quelque part entre ces deux extrêmes. Le type d'animation que vous utilisez doit être adapté à la situation. Les animations appliquées à des actions standard récurrentes doivent être petites et subtiles, de sorte qu'elles ne prennent pas régulièrement trop de temps. D'autres situations, comme la première fois qu'un utilisateur ouvre une application, peuvent être plus accrocheuses et aider à montrer à l'utilisateur comment utiliser votre application.
Ajouter une animation d'affichage au bouton de menu
Le mouvement correspond à la forme devant qui se déplace tout droit vers le bas. Nous vous avons déjà fourni un écouteur de clics qui effectuera l'animation de traduction pour la feuille, dans NavigationIconClickListener.kt. Nous pouvons définir cet écouteur de clics dans onCreateView() de ProductGridFragement, dans la section chargée de configurer la barre d'outils. Ajoutez la ligne suivante pour définir l'écouteur de clics sur l'icône de menu de la barre d'outils :
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))La section doit maintenant ressembler à ceci :
ProductGridFragment.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))Compilez et exécutez. Appuyez sur le bouton de menu :
Appuyez de nouveau sur l'icône du menu de navigation pour le masquer.
Ajuster le mouvement de la couche avant
Les animations sont un excellent moyen d'exprimer votre marque. Voyons à quoi ressemble l'animation de révélation avec une courbe de timing différente.
Mettez à jour votre écouteur de clics dans ProductGridFragment.kt pour transmettre un Interpolator à l'écouteur de clics de votre icône de navigation, comme suit :
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))
Cela crée un effet différent, n'est-ce pas ?
L'iconographie de la marque s'étend aussi aux icônes familières. Nous allons à présent personnaliser l'icône d'affichage et la fusionner avec notre titre pour donner un style unique fidèle à la marque.
Modifier l'icône du bouton de menu
Modifiez le bouton de menu pour qu'il affiche une icône en forme de losange. Mettez à jour votre barre d'outils dans shr_product_grid_fragment.xml pour utiliser une nouvelle icône de marque que nous vous avons fournie (shr_branded_menu), et définissez les attributs app:contentInsetStart et android:padding pour que la barre d'outils corresponde mieux aux spécifications de votre concepteur :
shr_product_grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
Nous allons à nouveau mettre à jour notre écouteur de clics dans onCreateView() dans ProductGridFragment.kt pour prendre en compte les drawables de la barre d'outils lorsque le menu est ouvert et lorsqu'il est fermé, comme suit :
ProductGridFragment.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
activity!!,
view.product_grid,
AccelerateDecelerateInterpolator(),
ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close iconCompiler et exécuter :
Bravo ! Lorsque l'arrière-plan peut être révélé, l'icône en forme de losange du menu s'affiche. Lorsqu'il peut être masqué, une icône de fermeture s'affiche à la place.
Au cours de ces quatre ateliers de programmation, vous avez vu comment utiliser Material Components pour créer des expériences utilisateur uniques et élégantes qui expriment la personnalité et le style d'une marque.
Étapes suivantes
Cet atelier de programmation, MDC-104, termine cette série d'ateliers. Pour découvrir encore plus de composants dans MDC-Android, consultez le catalogue des composants MDC-Android.
Pour aller plus loin dans cet atelier de programmation, modifiez votre application Shrine afin de changer les images de produits affichées lorsqu'une catégorie est sélectionnée dans le menu de l'arrière-plan.
Pour savoir comment connecter cette application à Firebase pour un backend opérationnel, consultez l'atelier de programmation Firebase pour Android.