MDC-104 Android: Composants avancés de Material Design (Java)

1. Introduction

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 chez 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 de 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 filtrera les produits affichés dans la grille asymétrique par catégorie. Vous utiliserez les éléments suivants :

• Forme
• Mouvement
• Classes du SDK Android traditionnel

Cet atelier est le dernier des quatre ateliers de programmation qui vous aideront à créer une application pour un produit appelé Shrine. Nous vous recommandons d'effectuer tous les ateliers de programmation dans l'ordre, pour avancer dans cette tâche petit à petit. Vous trouverez les ateliers de programmation ici : MDC-101 : Principes de base de Material Components (MDC) MDC-102 : Structure et mise en page Material Design MDC-103 : Utilisation des thèmes de Material Design (couleur, formes, élévation et type)

Composants MDC-Android utilisés dans cet atelier

• 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 ?

Débutant Intermédiaire Expert

2. Configurer l'environnement de développement

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

Télécharger l'application de démarrage

L'application de départ se trouve dans le répertoire material-components-android-codelabs-104-starter/java. 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

Pour obtenir de l'aide, consultez la section Cloner un dépôt depuis GitHub

Charger le code de départ dans Android Studio

1. 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 java -> shrine (ou recherchez shrine sur votre ordinateur) pour ouvrir le projet Shrine.
2. 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).
3. À 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 ci-dessous pour en être sûr.

1. Accédez au fichier build.gradle du module app et assurez-vous que le bloc dependencies inclut une dépendance à MDC Android :

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Facultatif) Si nécessaire, modifiez le fichier build.gradle pour 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

Assurez-vous que la configuration de compilation indiquée à gauche du bouton Exécuter / Lire est app. Appuyez sur le bouton vert pour créer et exécuter l'application. Dans la fenêtre Select Deployment Target (Sélectionner une cible de déploiement), si un appareil Android figure déjà dans la liste de ceux disponibles, passez à l'étape 8. Sinon, cliquez sur Create New Virtual Device (Créer un appareil virtuel). Sur l'écran Select Hardware (Sélectionner le matériel), sélectionnez un appareil (par exemple, Pixel 2), puis cliquez sur Next (Suivant). Sur l'écran System Image (Image système), sélectionnez une version récente d'Android (de préférence le niveau d'API le plus élevé). Sinon, cliquez sur le lien Télécharger qui s'affiche, puis procédez au téléchargement. Cliquez sur Next (Suivant). Sur l'écran Android Virtual Device (AVD) (Appareil virtuel Android), laissez les paramètres tels quels et cliquez sur Finish (Terminer). Sélectionnez un appareil Android dans la boîte de dialogue de la cible de déploiement. Cliquez sur OK. Android Studio crée l'application, la déploie et l'ouvre automatiquement sur l'appareil cible.

Si vous n'avez pas pu ajouter la dépendance ou exécuter l'application, résolvez les problèmes dans votre environnement de développement avant de poursuivre.

Si vous obtenez une erreur INSTALL_FAILED_INVALID_APK lors de la compilation, essayez d'effectuer une compilation -> Nettoyer le projet dans Android Studio.

Opération réussie ! L'application Shrine devrait s'exécuter sur votre appareil.

3. Ajouter le menu de fond

Un fond est la surface la plus éloignée d'une application, qui apparaît 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 fond dans cette zone. Pour éviter d'afficher une division entre la barre d'application supérieure et le contenu du menu qui apparaît sur le fond, nous allons définir la même couleur pour le fond et la barre d'application supérieure.

Dans shr_product_grid_fragment.xml, ajoutez les éléments suivants comme premier élément de votre FrameLayout racine, avant 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 fond élégant à l'interface utilisateur de Shrine. Nous allons maintenant ajouter un menu.

Ajouter le menu

Un menu est essentiellement une liste de boutons de texte. Nous allons en ajouter un ici.

Créez une nouvelle mise en page appelée shr_backdrop.xml dans votre répertoire res -> layout, puis 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 ensuite 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 :

Votre fond est terminé. Réaffichons le contenu que nous avons masqué précédemment.

4. Ajouter une forme

Avant d'apporter 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 fond, ce contenu est désormais plus mis en avant, car il apparaît devant ce fond.

Ajouter une couche

Nous devons afficher à nouveau la couche de la 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 de 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 versions ultérieures. Nous pouvons définir l'arrière-plan shr_product_grid_background_shape sur votre NestedScrollView uniquement pour Android Marshmallow et versions ultérieures. Tout d'abord, ajoutez un id à votre NestedScrollView afin de pouvoir y faire référence 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">

Définissez ensuite l'arrière-plan par programmation dans ProductGridFragment.java. Ajoutez la logique suivante pour définir l'arrière-plan à la fin de onCreateView(), juste avant l'instruction return :

ProductGridFragment.java

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    view.findViewById(R.id.product_grid).setBackgroundResource(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>

Compilez et exécutez :

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.

5. Ajouter un effet de mouvement

Une animation permet de donner vie à votre application. Elle peut être imposante et spectaculaire, subtile 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. Toutefois, certaines situations se prêtent bien à des animations captivantes, par exemple la première fois que l'utilisateur ouvre l'application. D'autres animations peuvent aussi servir à montrer à l'utilisateur comment utiliser votre application.

Ajouter une animation d'affichage au bouton de menu

L'animation est la forme qui se déplace tout droit vers le bas. Nous vous avons déjà fourni un écouteur de clics qui effectuera l'animation de translation pour la feuille, dans NavigationIconClickListener.java. Nous pouvons définir cet écouteur de clics dans la méthode setupToolbar() de ProductGridFragment.java :

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

Votre méthode setUpToolbar() devrait maintenant se présenter comme suit :

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}

Compilez et exécutez. Appuyez sur le bouton de menu :

Appuyer de nouveau sur l'icône du menu de navigation devrait masquer le menu.

Ajuster l'animation de la couche avant

L'animation est un excellent moyen d'exprimer votre marque. Voyons à quoi ressemble l'animation d'affichage avec une courbe de synchronisation différente.

Mettez à jour votre code dans setupToolbar() dans ProductGridFragment.java pour transmettre un interpolateur à l'écouteur de clics de votre icône de navigation, comme suit :

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator()));
}

Cela crée un effet différent, n'est-ce pas ?

6. Icône partenaire

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 afficher une icône incluant un motif en losange. Mettez à jour votre barre d'outils dans shr_product_grid_fragment.xml pour utiliser une nouvelle icône partenaire que nous 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 graphiste :

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" />

Mettez à jour à nouveau notre écouteur de clics dans setupToolbar() dans ProductGridFragment.java pour qu'il accepte les éléments dessinables de la barre d'outils lorsque le menu est ouvert et lorsqu'il est fermé, comme suit :

ProductGridFragment.java

private void setUpToolbar(View view) {
   Toolbar toolbar = view.findViewById(R.id.app_bar);
   AppCompatActivity activity = (AppCompatActivity) getActivity();
   if (activity != null) {
       activity.setSupportActionBar(toolbar);
   }

   toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
           getContext(),
           view.findViewById(R.id.product_grid),
           new AccelerateDecelerateInterpolator(),
           getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
           getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}

Compilez et exécutez :

Bravo ! Lorsque le fond peut être affiché, l'icône de menu en losange s'affiche. Lorsque le menu peut être masqué, une icône de fermeture s'affiche à la place.

7. Récapitulatif

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 de votre marque.

L'application MDC 104 terminée est disponible en téléchargeant l'atelier de programmation terminé ou en consultant la branche 104-complete avec git : git checkout 104-complete.

Vous pouvez tester votre version de l'application en la comparant à celle de cette branche.

Étapes suivantes

Cet atelier de programmation, MDC-104, termine cette série d'ateliers. Pour découvrir d'autres composants de MDC-Android, consultez le catalogue des widgets Android.

Pour relever un défi supplémentaire avec 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 fond.

Pour savoir comment connecter cette application à Firebase pour un backend opérationnel, consultez l' atelier de programmation Firebase Android.

La réalisation de cet atelier de programmation m'a demandé un temps et des efforts raisonnables

Tout à fait d'accord D'accord Ni d'accord, ni pas d'accord Pas d'accord Pas du tout d'accord

Je souhaite continuer à utiliser Material Components

Tout à fait d'accord D'accord Ni d'accord, ni pas d'accord Pas d'accord Pas du tout d'accord