MDC-103 Android: Utilisation des thèmes Material Design (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 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 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 et redirige l'utilisateur vers 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 exprimer la marque de leur produit. Vous pouvez désormais utiliser MDC pour personnaliser Shrine et refléter son style unique plus que jamais.

Objectifs de l'atelier

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

• Couleur
• Typographie
• Elevation
• Disposition

Cet atelier est le troisième des quatre ateliers de programmation qui vous aideront à créer une application appelée Shrine, une application d'e-commerce pour la vente de vêtements et d'articles pour la maison. Les ateliers de programmation associés sont disponibles sur 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 Android de MDC utilisés dans cet atelier de programmation

• Thèmes
• Typographie
• Elevation

Prérequis

• Connaissances de base en développement Android
• Android Studio(téléchargez-le ici si vous ne l'avez pas encore fait)
• Un émulateur ou un appareil Android (disponible via Android Studio)
• L'exemple de code (voir l'étape suivante)

Comment évalueriez-vous votre niveau d'expérience en matière de création d'applications Android ?

Débutant Intermédiaire Compétent

Continuer à partir de 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. Pensez à cd dans 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 au projet

Le projet nécessite une dépendance à la bibliothèque Support Android MDC. L'exemple de code que vous avez téléchargé devrait déjà inclure cette dépendance, mais nous vous recommandons de suivre la procédure ci-dessous pour vous en assurer.

1. Accédez au fichier build.gradle du module app et vérifiez 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, puis synchronisez 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 est déjà répertorié sur les appareils 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 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'exécuter Build' -> Clean Project ' dans Android Studio.

Opération réussie. La page de connexion de Shrine's doit s'exécuter dans votre appareil ou é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.

La barre d'application supérieure correspond à 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 proviennent pas 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 900 de l'échantillon marron.

Changez 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 au thème de l'application Shrine pour Theme.Shrine:

styles.xml

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

colors.xml et styles.xml se présentent 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 nouvelle ressource de couleur textColorPrimary définie sur #442C2E, puis mettez à jour l'attribut toolbarIconColor pour référencer la couleur textColorPrimary.

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

Si vous définissez android:textColorPrimary dans Theme.Shrine, le texte sera appliqué à tous les éléments, y compris la barre d'application supérieure et les icônes de la barre supérieure.

Un dernier point: définissez l'attribut android:theme dans le style Widget.Shrine.Toolbar sur Theme.Shrine.

Si vous définissez android:textColorPrimary dans Theme.Shrine, le texte sera appliqué à tous les éléments, y compris la barre d'application supérieure et les icônes de la barre d'application supérieure.

colors.xml et styles.xml se présentent 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 doit maintenant se présenter comme suit:

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

Appliquer un style aux champs de texte

Vous pouvez modifier les entrées de texte sur la page de connexion et définir des couleurs plus appropriées pour la mise en page.

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

colors.xml

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

Ajoutez deux nouveaux 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 des 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>

Appliquer un style aux couleurs du bouton

Enfin, stylisez les couleurs des boutons de la page de connexion. Ajoutez les styles suivants à votre fichier 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 s'étend à partir du style MaterialButton par défaut, et modifie la couleur du texte et la teinte de l'arrière-plan du bouton. Widget.Shrine.Button.TextButton s'étend à partir du style texte MaterialButton par défaut et modifie uniquement la couleur du texte.

Définissez le style Widget.Shrine.Button sur le bouton "Next" (Suivant) et le style Widget.Shrine.Button.TextButton sur le bouton "Cancel" (Annuler) :

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. Vous devrez modifier légèrement le vecteur drawable : shr_logo.xml. Ouvrez le fichier drawable et définissez la propriété android:fillAlpha sur 1. Le drawable doit ressembler à ceci:

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, votre graphiste vous a fourni une typographie spécifique à utiliser sur le site. Ajoutons-le également à la barre d'application supérieure.

Définir le style de la barre d'application supérieure

Définissez le style de la barre d'application supérieure pour qu'il corresponde à la spécification fournie par votre graphiste. Ajoutez le style d'apparence du 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>

colors.xml et styles.xml se présentent 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 appliquerons un style aux libellés des fiches produit de sorte qu'ils utilisent le texte approprié et qu'ils soient centrés horizontalement dans la fiche.

Remplacez la typographie du libellé de votre titre par textAppearanceHeadline6 comme suit : textAppearanceSubtitle2

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 de l'image, modifiez les libellés <TextView> dans shr_product_card.xml afin de 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. Votre écran de grille de produits devrait maintenant se présenter comme suit:

Modifions la typographie de l'écran de connexion.

Modifier la police 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 sur votre titre SHRINE & quo, titre <TextView> (et supprimez les attributs textAllCaps et textSize qui s'y trouvent):

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 être utilisées pour exprimer une marque ou la mettre en avant.

Maintenant que vous avez personnalisé la page avec la couleur et la typographie spécifiques correspondant à Shrine, penchons-nous sur les cartes qui présentent les produits Shrine. Pour le moment, ils sont placés sur une surface blanche sous le menu de navigation de l'application. Donnez un coup de pouce aux produits pour attirer leur attention.

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

Modifions l'élévation de la barre d'application supérieure et le contenu de sorte qu'il semble se trouver sur une feuille flottante 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 de la carte (et la couleur)

Vous pouvez ajuster l'élévation de chaque fiche en remplaçant app:cardElevation par 0dp (shr_product_card.xml) Remplacez également app:cardBackgroundColor par @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 le résultat ! Vous avez ajusté l'élévation de chaque fiche sur la page de la grille de produits.

Modifier l'élévation du bouton "Next" (Suivant)

Dans styles.xml, ajoutez la propriété suivante à votre 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 un message d'erreur de type Impossible de résoudre le symbole lors de la rédaction de ce code, appuyez sur Alt+Entrée ou (Option+Retour sur Mac) pour importer les symboles manquants.

Lorsque android:stateListAnimator est défini dans le style Button, le bouton "Suivant" utilise l'animateur 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 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 échelonné

Nous avons fourni un nouvel adaptateur RecyclerView dans le package staggeredgridlayout, qui affiche une mise en page asymétrique en forme de carte, destinée au défilement horizontal. N'hésitez pas à explorer ce code vous-même, mais nous n'expliquerons pas comment le mettre en œuvre ici.

Pour utiliser cet nouvel adaptateur, modifiez la méthode onCreateView() dans ProductGridFragment.java. Remplacez le bloc de code après le 'RecyclerView', comme suit:

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 devons également apporter une petite modification à notre product_grid_fragment.xml pour supprimer les marges 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 allons également ajuster notre marge intérieure à l'intérieur de 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 échelonné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>

Et 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 la barre d'outils pour faire référence au thème actuel à l'aide de l'attribut &theme:theme, et non pour 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>

Éclaircissez ensuite la couleur du texte d'aide dans les champs de texte de l'écran de connexion. Ajoutez l'attribut android:textColorHint aux champs de texte, le style:

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. Vous devriez maintenant voir un aperçu du nouveau thème.

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 terminée est disponible en téléchargeant l'atelier de programmation terminé ou en consultant la version terminée de cet atelier de programmation avec git : git checkout 103-complete.

Vous pouvez comparer votre version de l'application avec la version terminée.

Étapes suivantes

Vous avez utilisé ces composants MDC: le thème, la typographie et l'élévation. Vous pouvez découvrir encore plus de composants du catalogue MDC-Android 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 Sans avis Pas d'accord Pas du tout d'accord