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. |
Material Components for Android (MDC Android) n'est pas un nouveau système ni un nouveau framework qui nécessite un changement de paradigme dans votre application. MDC Android s'appuie sur les mêmes classes et API que vous connaissez déjà dans Android, comme les boutons et les champs de texte AppCompat. Vous pouvez utiliser les composants fournis par MDC Android selon vos besoins et améliorer immédiatement la conception de votre application existante.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez remplacer certains composants existants d'un formulaire par de nouveaux composants MDC.
Composants MDC-Android dans cet atelier de programmation
- Champs de texte
- Boutons
- Menus
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 ?
2. Configurer l'environnement de développement
Télécharger l'application de départ de l'atelier de programmation
L'application de départ se trouve dans le répertoire material-components-android-codelabs-111-starter/kotlin. Assurez-vous d'utiliser la commande cd pour accéder à ce répertoire avant de commencer.
… ou cloner l'atelier depuis GitHub
Pour cloner cet atelier de programmation à partir de GitHub, exécutez les commandes suivantes :
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Charger le code de départ dans Android Studio
- Une fois l'assistant de configuration terminé et la fenêtre de bienvenue dans Android Studio affichée, cliquez sur Open an existing Android Studio project (Ouvrir un projet Android Studio existant). Accédez au répertoire dans lequel vous avez installé l'exemple de code, puis sélectionnez kotlin > shipping (ou recherchez shipping sur votre ordinateur) pour ouvrir le projet Shipping.
- Attendez qu'Android Studio crée et synchronise le projet (voir les indicateurs d'activité situés en bas de la fenêtre Android Studio).
- À ce stade, Android Studio peut générer des erreurs de compilation, car vous ne disposez pas du SDK Android ni de certains outils de compilation, comme celui présenté ci-dessous. Suivez les instructions fournies dans Android Studio pour installer/mettre à jour ces éléments et synchroniser votre projet.
Exécuter l'application de départ
|
|
Opération réussie ! L'application et son formulaire devraient s'afficher.
3. Mettre à jour les champs de texte
Les champs de texte Material Design sont beaucoup plus faciles à utiliser que les champs de texte brut. En définissant la zone cliquable avec un contour ou un remplissage d'arrière-plan, les utilisateurs sont plus susceptibles d'interagir avec votre formulaire ou d'identifier les champs de texte dans des contenus plus complexes.
Importer MDC-Android
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-alpha05'
Remplacer les styles des champs de texte
Dans shipping_info_activity.xml, ajoutez le style suivant à tous les composants XML TextInputLayout :
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Chaque TextInputLayout doit ressembler à ceci :
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Compiler et exécuter :
Les champs de texte sont tous mis à jour pour utiliser les nouvelles conceptions dans MDC.
Ajouter une erreur
Les champs de texte MDC disposent d'une présentation des erreurs intégrée. MDC ajoute du texte rouge sous votre champ de texte et met également à jour les décorations pour qu'elles soient rouges.
Dans ShippingInfoActivity.kt, mettez à jour onCreate() pour vérifier la saisie de texte et définir les erreurs de manière appropriée. Voici un exemple :
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Compilez et exécutez. Cliquez sur "ENREGISTRER", mais laissez au moins un champ de texte vide :
Les champs de texte vides sont rouges et comportent un message d'erreur en dessous.
4. Modifier le bouton
MDC comporte des boutons avec :
- Ondes d'encre
- Coins arrondis
- Compatibilité avec les thèmes
- Mise en page et typographie au pixel près
- Basé sur AppCompatButton (la classe de bouton Android standard), vous savez donc comment les utiliser dans votre code.
Remplacer éventuellement la classe du bouton
Par défaut, la bibliothèque Material convertit automatiquement les boutons standards en boutons MDC. Toutefois, vous pouvez éventuellement remplacer toutes les références à Button par MaterialButton afin d'accéder à des méthodes supplémentaires qui ne sont disponibles que dans un MaterialButton, comme la modification du rayon d'angle. Les boutons MDC sont un composant simple et prêt à l'emploi. Il vous suffit de remplacer le nom du composant XML Button par MaterialButton et d'appliquer le style MaterialButton par défaut à MaterialButton.
Dans shipping_info_activity.xml, remplacez votre bouton :
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
À :
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Compiler et exécuter :
5. Ajouter une carte
MaterialCardView est un composant basé sur CardView avec :
- Corriger l'élévation et le style
- Attributs d'épaisseur et de couleur du trait
Encapsuler du contenu dans une fiche
Encapsulez votre LinearLayout contenant votre contenu dans shipping_info_activity.xml avec un composant MaterialCardView, comme suit :
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Compilez et exécutez. L'intégralité du formulaire doit être enveloppée dans une carte :
Le composant Material Card View est un moyen familier, mais innovant, d'encapsuler facilement votre contenu dans une carte.
6. Récapitulatif
Vous avez remplacé certains composants courants pour montrer une valeur immédiate : champs de texte, boutons, cartes. Vous n'avez pas eu à repenser entièrement votre application. D'autres composants peuvent également faire une grande différence, comme la barre d'application supérieure et TabLayout.
Étapes suivantes
Pour découvrir d'autres composants de MDC-Android, consultez le catalogue des widgets Android.