MDC-103 Android: Thématisation Material avec couleur, mouvement et type (Java)

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 les ateliers de programmation MDC-101 et MDC-102, vous avez utilisé Material Components (MDC) pour concevoir les bases de Shrine, une application d'e-commerce pour la vente de vêtements et d'articles pour la maison. Le parcours utilisateur de cette application commence par un écran de connexion, puis se poursuit avec un écran d'accueil où sont affichés les produits.

L'expansion récente de Material Design offre aux graphistes et aux développeurs une plus grande flexibilité pour véhiculer l'image de marque de leur produit. Vous pouvez désormais utiliser MDC pour personnaliser Shrine et refléter son style unique comme jamais auparavant.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez personnaliser Shrine pour refléter sa marque à l'aide des éléments suivants :

• Couleur
• Typographie
• Élévation
• Mise en page

Il s'agit du troisième des quatre ateliers de programmation qui vous permettront de concevoir l'application Shrine, une application d'e-commerce pour la vente de vêtements et d'articles pour la maison. Voici les ateliers de programmation associés : MDC-101 : Principes de base de Material Components (MDC) MDC-102 : Structure et mise en page Material Design MDC-104 : Composants avancés de Material Design À la fin de MDC-104, vous aurez créé une application semblable à celle-ci :

Composants et sous-systèmes MDC-Android utilisés dans cet atelier de programmation

• Thèmes
• Typographie
• Élévation

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

Vous avez déjà suivi l'atelier MDC-102 ?

Si vous avez fini l'atelier de programmation MDC-102, votre code devrait être prêt pour commencer cet atelier. Passez à l'étape 3 : Modifier la couleur.

Télécharger l'application de départ de l'atelier de programmation

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

L'application de départ se trouve dans le répertoire material-components-android-codelabs-103-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 103-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 suivantes pour en être sûr.

1. Accédez au fichier build.gradle du module app et vérifiez si le bloc dependencies inclut bien 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 d'exécution / de lecture 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 de vos appareils Android figurent 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 réussi à ajouter la dépendance ou à exécuter l'application, arrêtez-vous et résolvez les problèmes dans votre environnement de développement.

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 ! La page de connexion de Shrine devrait s'afficher sur votre appareil ou dans l'émulateur. Lorsque vous appuyez sur "Suivant", la page d'accueil de Shrine s'affiche avec une barre d'application en haut et une grille d'images de produits en dessous.

Faisons en sorte que la barre d'application supérieure corresponde à la marque Shrine en modifiant sa couleur, son élévation et sa typographie.

Ce thème de couleur a été créé par un graphiste à partir de couleurs personnalisées (illustrées sur l'image ci-dessous). Il contient des couleurs sélectionnées à partir de la marque Shrine et appliquées à Material Theme Editor, une extension qui permet de créer une palette plus complète. (Ces couleurs ne sont pas issues des palettes de couleurs de Material 2014.)

Material Theme Editor les a organisées en nuances numérotées (libellés 50, 100, 200, etc. jusqu'à 900 pour chaque couleur). Shrine n'utilise que les nuances 50, 100 et 300 de l'échantillon rose, et la nuance 900 de l'échantillon marron.

Modifions la couleur de la barre d'application supérieure pour refléter ce jeu de couleurs.

Définir colorPrimaryDark et colorAccent

Dans colors.xml, modifiez les lignes suivantes. L'attribut colorAccent contrôle la couleur de la barre d'application supérieure, entre autres, et l'attribut colorPrimaryDark contrôle la couleur de la barre d'état.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

Pour utiliser des icônes sombres dans la barre d'état, ajoutez le code suivant à Theme.Shrine, le thème de l'application Shrine :

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

Vos colors.xml et styles.xml devraient se présenter comme suit :

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Dans colors.xml, ajoutez une ressource de couleur textColorPrimary définie sur #442C2E, puis mettez à jour l'attribut toolbarIconColor pour référencer la couleur textColorPrimary.

Mettez à jour votre fichier styles.xml pour définir l'attribut android:textColorPrimary sur la couleur textColorPrimary.

Définir android:textColorPrimary dans Theme.Shrine appliquera un style au texte de tous les éléments, y compris la barre d'application supérieure et les icônes de notre barre d'application supérieure.

Une dernière chose : définissez l'attribut android:theme sur Theme.Shrine dans le style Widget.Shrine.Toolbar.

Définir android:textColorPrimary dans Theme.Shrine permet de styliser le texte de tous les éléments, y compris la barre d'application supérieure et les icônes de notre barre d'application supérieure.

Vos colors.xml et styles.xml devraient se présenter comme suit :

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Compilez et exécutez. Votre grille de produits devrait maintenant se présenter comme suit :

Modifions le style de l'écran de connexion pour qu'il corresponde à notre jeu de couleurs.

Mettre en forme les champs de texte

Modifions les entrées de texte sur la page de connexion pour qu'elles soient encadrées et utilisons de meilleures couleurs pour notre mise en page.

Ajoutez la ressource de couleur suivante à votre fichier colors.xml :

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

Ajoutez deux styles dans votre styles.xml :

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Enfin, définissez l'attribut de style sur les deux composants XML TextInputLayout dans shr_login_fragment.xml sur votre nouveau style :

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Définir le style des couleurs des boutons

Enfin, définissez le style des couleurs des boutons sur la page de connexion. Ajoutez les styles suivants à votre styles.xml :

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Le style Widget.Shrine.Button est une extension du style MaterialButton par défaut. Il modifie la couleur du texte et la teinte de l'arrière-plan du bouton. Widget.Shrine.Button.TextButton étend le style text MaterialButton par défaut et ne modifie que la couleur du texte.

Définissez le style Widget.Shrine.Button sur votre bouton "Suivant" et le style Widget.Shrine.Button.TextButton sur votre bouton "Annuler", comme suit :

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Modifiez la couleur du logo Shrine sur la page de connexion. Cela nécessitera une petite modification du drawable vectoriel, shr_logo.xml. Ouvrez le fichier de dessin et définissez la propriété android:fillAlpha sur 1. L'élément drawable doit se présenter comme suit :

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

Définissez l'attribut android:tint sur le logo <ImageView> dans shr_login_fragment.xml sur ?android:attr/textColorPrimary, comme suit :

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

Compilez et exécutez. L'écran de connexion devrait maintenant ressembler à ceci :

Remarques sur les couleurs et les thèmes :

• Vous pouvez personnaliser la couleur de l'interface utilisateur afin de mieux représenter votre marque.
• Créez une palette de couleurs à partir de deux couleurs (vos couleurs principale et secondaire), avec des nuances claires et sombres de ces couleurs. Vous pouvez aussi utiliser l'outil de création de palette de Material Design pour créer des palettes.
• N'oubliez pas la couleur de votre typographie !
• Veillez à ce que le rapport de contraste entre les couleurs de l'arrière-plan et celles du texte soit approprié (3:1 pour une grande police, 4,5:1 pour une petite police).

En plus des modifications de couleur demandées, votre graphiste vous a fourni une typographie spécifique à utiliser sur le site. Ajoutons également cela à la barre d'application supérieure.

Styliser la barre d'application supérieure

Adaptez l'apparence du texte de la barre d'application supérieure aux spécifications fournies par votre concepteur. Ajoutez le style d'apparence de texte suivant à styles.xml, puis définissez la propriété titleTextAppearance pour référencer ce style dans votre style Widget.Shrine.Toolbar.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

Vos colors.xml et styles.xml devraient se présenter comme suit :

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>


   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

Appliquer un style aux libellés

Nous allons styliser les libellés de la fiche produit pour qu'ils utilisent l'apparence de texte appropriée et qu'ils soient centrés horizontalement dans la fiche.

Mettez à jour la typographie du libellé de votre titre de textAppearanceHeadline6 à textAppearanceSubtitle2 comme suit :

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

Pour centrer les libellés d'image, modifiez les <TextView> de libellé dans shr_product_card.xml pour définir l'attribut android:textAlignment="center" :

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

Compilez et exécutez. L'écran de la grille de produits devrait maintenant se présenter comme suit :

Modifions la typographie de l'écran de connexion pour qu'elle corresponde.

Modifier la typographie de l'écran de connexion

Dans styles.xml, ajoutez le style suivant :

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Dans shr_login_fragment.xml, définissez le nouveau style pour votre titre "SHRINE" <TextView> (et supprimez les attributs textAllCaps et textSize qui sont présents) :

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

Compilez et exécutez. L'écran de connexion devrait maintenant ressembler à ceci :

Remarques sur la typographie :

• Lorsque vous choisissez des polices pour le texte de petite taille et le corps des messages, optez pour des polices claires plutôt que pour un style donné.
• Les polices d'affichage utilisées pour le texte de grande taille et les titres doivent permettre d'exprimer une marque ou de la mettre en avant.

Maintenant que vous avez personnalisé la page avec une couleur et une typographie spécifiques correspondant à Shrine, penchons-nous sur les cartes qui présentent les produits de Shrine. Pour le moment, elles sont placées sur une surface blanche, sous le menu de navigation de l'application. Mettons davantage l'accent sur les produits pour attirer l'attention sur eux.

Modifier l'élévation de la grille de produits

Modifions l'élévation de la barre d'application supérieure et du contenu pour que le contenu ressemble à une feuille flottant au-dessus de la barre d'application supérieure. Ajoutez l'attribut app:elevation à votre AppBarLayout et l'attribut android:elevation à vos composants XML NestedScrollView dans shr_product_grid_fragment.xml comme suit :

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<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:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.appcompat.app.AlertController.RecycleListView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Modifier l'élévation (et la couleur) d'une carte

Vous pouvez ajuster l'élévation de chaque carte en remplaçant app:cardElevation dans shr_product_card.xml par 0dp au lieu de 2dp. Modifiez également app:cardBackgroundColor pour lui attribuer @android:color/transparent.

shr_product_card.xml

<com.google.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

Découvrez-les ! Vous avez ajusté l'élévation de chaque carte sur la page de la grille des produits.

Modifier l'élévation du bouton "Suivant"

Dans styles.xml, ajoutez la propriété suivante au style Widget.Shrine.Button :

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

Remarque : Si Android Studio rencontre des erreurs Cannot resolve symbol (Impossible de résoudre le symbole) lors de l'écriture de ce code, appuyez sur Alt+Entrée (ou Option+Retour sur Mac) pour importer les symboles manquants.

Définir android:stateListAnimator dans le style de Button permet au bouton "Suivant" d'utiliser l'animateur que nous avons fourni.

Compilez et exécutez. L'écran de connexion devrait maintenant ressembler à ceci :

Remarques sur l'élévation :

• Toutes les surfaces et tous les composants de Material Design ont une élévation.
• Les bordures des surfaces permettent de distinguer où une surface se termine et où une autre commence.
• La différence d'élévation entre les surfaces peut être exprimée par des arrière-plans plus sombres ou plus clairs, ou par des ombres.
• Le contenu des surfaces se trouvant devant d'autres surfaces est généralement le plus important.

Modifiez la mise en page pour afficher les cartes dans différents formats et tailles, de sorte que chaque carte soit unique.

Utiliser un adaptateur RecyclerView décalé

Nous avons fourni un nouvel adaptateur RecyclerView dans le package staggeredgridlayout qui affiche une mise en page asymétrique en grille avec décalage, conçue pour le défilement horizontal. N'hésitez pas à explorer ce code par vous-même, mais nous n'aborderons pas son implémentation ici.

Pour utiliser ce nouvel adaptateur, modifiez votre méthode onCreateView() dans ProductGridFragment.java. Remplacez le bloc de code après le commentaire "set up the RecyclerView" (configurer RecyclerView) par le code suivant :

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

Nous devrons également apporter une petite modification à notre product_grid_fragment.xml pour supprimer les marges intérieures de notre NestedScrollView, comme suit :

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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Enfin, nous ajusterons également la marge intérieure de notre carte dans RecyclerView en modifiant ProductGridItemDecoration.java. Modifiez la méthode getItemOffsets() de ProductGridItemDecoration.java comme suit :

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

Compilez et exécutez. Les éléments de la grille de produits doivent maintenant être décalés :

L'utilisation des couleurs est une manière puissante d'exprimer votre marque. Une légère modification de la couleur peut avoir un impact important sur l'expérience utilisateur. Pour tester cela, voyons à quoi ressemblerait Shrine si le jeu de couleurs de la marque était totalement différent.

Modifier les styles et les couleurs

Dans styles.xml, ajoutez le nouveau thème suivant :

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

Dans AndroidManifest.xml, utilisez ce nouveau thème dans votre application :

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
   android:name="com.google.codelabs.mdc.java.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Modifiez la couleur de l'icône de la barre d'outils dans colors.xml comme indiqué ci-dessous :

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

Ensuite, définissez l'attribut android:theme du style de notre barre d'outils pour référencer le thème actuel à l'aide de l'attribut "?theme", plutôt que de le coder en dur :

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

Ensuite, éclaircissez la couleur du texte d'indication dans les champs de texte de l'écran de connexion. Ajoutez l'attribut android:textColorHint au style des champs de texte :

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

Compilez et exécutez. Le nouveau thème devrait maintenant s'afficher pour que vous puissiez l'essayer.

Rétablissez le code modifié dans cette section avant de passer à MDC-104.

Vous venez de créer une application qui répond aux spécifications de design de votre graphiste.

L'application MDC-103 complète est disponible en téléchargeant l'atelier de programmation terminé ou en consultant la version complète de cet atelier de programmation avec git : git checkout 103-complete.

Vous pouvez tester votre version de l'application en la comparant à la version terminée.

Étapes suivantes

Vous avez utilisé les composants MDC suivants : les thèmes, la typographie et l'élévation. Pour découvrir encore plus de composants dans le catalogue MDC-Android, consultez Composants dans MDC-Android.

Que se passe-t-il si le design prévu pour votre application contient des éléments dont les composants ne figurent pas dans la bibliothèque MDC ? Dans l'atelier de programmation MDC-104 : Composants avancés de Material Design, nous verrons comment créer des composants personnalisés à l'aide de la bibliothèque MDC pour obtenir un rendu spécifique.

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