Le Material design 2 sur android

Dans ce tutoriel, vous allez découvrir comment intégrer les composants material d’Android dans votre application.Ils s’agit d’un ensemble de composant vous permettant de créer vos applications sur les principes du material design.

Bref Histoire

C’est en 2014 que Google annonce pour la première fois le material design,,A cette époque, il n’ y avait aucune librairie de support officiel , aucun soutien officiel de google pour appliquer les principes du material design dans son application.

C’est finalement en 2015 que Google annonce la première version de la support library, nous permettant d’utiliser les composants tels que le Cardview,Toolbar pour intégré le material design dans une application dans les anciennes version d’android .La support library avec Appcompact nous permettait d »appliquer un thème maeterial dans notre application , d’utiliser les premier composants material dans les anciennes version d’android.

Les composants Material

Les composant material est la nouvelle librairie qui remplace l’ancienne librairie de support sur android. C’est aussi le nouveau nom utilisé pour représenter les nouvelles ressource tel que les composants matérial ,les thèmes pour créer des applications selon le principe du matérial design.

Il faut noté que les composants material n’est pas seulement disponible sur Android. Ils sont disponible sur toutes les plateformes tels que Android,ios,web etc .Les composants material permettent d’appliquer plus facilement dans son application les principe du material design décrit par google en 2014

La dernière version de l’ancienne support librairie est 28.0.0 , remplacée par AndroidX sur Android. Cependant les composants material étendent les composants de la nouvelle librairie de support(Androix) . Parmi les composants material vous retrouverez les composants tel que CardView  , FloatingActionButton etc qui était disponible dans AndroidX

Google à fourni aussi en 2018 les nouveaux princes du material design sur ce site web. et plusieurs autres ressource ici.

Intégrer les composants material dans son application

Les composants material pour Android sont disponible sur le dépôt maven de google. Pour l’utiliser :

Ouvrez le fichier build.gradle(Project) au niveau projet et ajouter le dépôt maven de google dans la section repositories  si’il n’est pas encore ajouté.

allprojects {
    repositories {
      google()
      jcenter()
    }
  }

Puis ouvrez le fichier build.gradle(app) au niveau application puis ajoutez la dépendance suivante

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha10'
    // ...
  }

Les composants material sont lié à AndroidX et com.google.android.material. Si vous n’êtes pas encore prés à migrer vers les packages AndroidX et com.google.android.material ,vous pouvez continuer à utiliser les composant matérial disponible dans l’ancienne librairie de support com.android.support:design:28.0.0

Si vous souhaitez migrer votre projet existe vers AndroidX, vous pouvez lire ce tutoriel sur la migration vers AndroidX.

Note:Vous ne devez pas utiliser à la fois les dépendances com.android.support et com.google.android.material dans votre projet.

Compiler votre application avec Android 9

Pour utiliser les composants material pour Android et les dernières versions des bibliothèques de support, vous devrez mettre à jour la version de compileSdkVersion de votre application à 28 et télécharger Android 9 à l’aide du gestionnaire de SDK.

Utiliser AppCompatActivity

L’utilisation d’AppCompatActivity garantit que tous les composants fonctionnent correctement. Si vous ne parvenez pas à hériter de AppCompatActivity, mettez à jour vos activités afin d’utiliser AppCompatDelegate. Cela permettra aux versions AppCompat des composants d’être inflaté.

Changer le thème de votre application en utilisant un thème des composants material

Il est recommandé que le thème de votre application hérite d’un thème des composants material. Cependant, assurez-vous de tester soigneusement par la suite, car les composants dans les vues existantes peuvent changer leur apparence et leur comportement.

Remarque: Si vous ne pouvez pas modifier votre thème, vous pouvez effectuer l’une des opérations suivantes:

• Héritez de l’un de nos thèmes Bridge des composants material .
• Continuez à hériter d’un thème AppCompat et ajoutez de nouveaux attributs de thème à votre thème.

Les thèmes des composant material

Voici la liste des thèmes des composants material que vous pouvez utiliser pour obtenir les derniers styles des composants et attributs de thème.

• Theme.MaterialComponents
• Theme.MaterialComponents.NoActionBar
• Theme.MaterialComponents.Light
• Theme.MaterialComponents.Light.NoActionBar
• Theme.MaterialComponents.Light.DarkActionBar
• Theme.MaterialComponents.DayNight
• Theme.MaterialComponents.DayNight.NoActionBar
• Theme.MaterialComponents.DayNight.DarkActionBar

Vous devez ensuite mettre à jour le thème de votre application en utilisant l’un des thème des composants material comme suit.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.NoActionBar">
    <!-- ... -->
</style>

Le thème Bridge

Si vous ne pouvez pas changer le thème de votre application en héritant de un des thèmes des composants material, vous pouvez hériter du thème Bridge des composants material comme suit

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge">
    <!-- ... -->
</style>

Les thèmes Theme.MaterialComponents et Theme.MaterialComponents.Light ont tous deux le thème bridge

• Theme.MaterialComponents.Bridge
• Theme.MaterialComponents.Light.Bridge
• Theme.MaterialComponents.NoActionBar.Bridge
• Theme.MaterialComponents.Light.NoActionBar.Bridge
• Theme.MaterialComponents.Light.DarkActionBar.Bridge

les thèmes Bridge héritent des thème Appcompat et définissent les attributs des composants material. Donc si vous utiliser un thème Bridge, vous pouvez commencer à utiliser les composants material sans changer votre application

Note: Lorsque vous utiliser un thème Bridge,les attributs des composants material sont disponible, mais ils ne sont pas initialisés par défaut donc vous aurez pas le look par défaut des composants material .Vous devez styler vous même les composants en utilisant ces attributs.

Thème AppCompat

Vous pouvez aussi au fur et a mesure tester les composants material dans votre application sans changer le thème de votre application.Cela vous permet de garder le look et le comportement des vues de votre application tout en introduisant les composants material dans vos vues.

Cependant , vous devez ajouter les attributs de thème suivant dans le thème de votre application.

<style name="Theme.MyApp" parent="Theme.AppCompat">

  <!-- Original AppCompat attributes. -->
  <item name="colorPrimary">@color/my_app_primary_color</item>
  <item name="colorSecondary">@color/my_app_secondary_color</item>
  <item name="android:colorBackground">@color/my_app_background_color</item>
  <item name="colorError">@color/my_app_error_color</item>

  <!-- New MaterialComponents attributes. -->
  <item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item>
  <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item>
  <item name="colorSurface">@color/my_app_surface_color</item>
  <item name="colorOnPrimary">@color/my_app_color_on_primary</item>
  <item name="colorOnSecondary">@color/my_app_color_on_secondary</item>
  <item name="colorOnBackground">@color/my_app_color_on_background</item>
  <item name="colorOnError">@color/my_app_color_on_error</item>
  <item name="colorOnSurface">@color/my_app_color_on_surface</item>
  <item name="scrimBackground">@color/mtrl_scrim_color</item>
  <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item>
  <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item>
  <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item>
  <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item>
  <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item>
  <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item>
  <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item>
  <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item>
  <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item>
  <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item>
  <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
  <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item>
  <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item>

</style>

Ajouter un composant material dans votre application

Vous pouvez ajouter un champ de texte comme suit

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

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

Si vous n’utiliser pas un thème des composants material,vous devez définir le style du champ de texte comme suit

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

Les autres styles de champs de texte sont aussi disponible.

Si par exemple vous souhaitez ajouter un champ de texte encadré autour , vous pouvez appliquer le style de champ de texte encadré d’un composant material comme suit.

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

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

Conclusion

Voila nous somme a la fin de cet tutoriel sur l’introduit avec les composants material. j’espère que ce tutoriel vous aidera à démarrer avec les composants matériel.Dans les prochains tutoriels, nous allons découvrir différentes composants material.A bientôt pour un nouveau tutoriel.