Astuce-Tech, High-Tech

DEVDROID Tips : thèmes Material customisés

FORMSF14 (3)

 

 

Avec Android 5.0 ( Lollipop), Google a introduit le Material Design ( Késako ?! par ici  )

Aujourd’hui nous allons voir comment créer/modifier un thème Material Design pour vos applications !

DIFF

Tout d’abord, pour faire ceci vous devez d’abord créer votre projet sur le SDK ( API 21 )

Note : vous pouvez créer des applications en Material Design pour des versions antérieures à la 5.0 via AppCompact par ici

Que pouvons-nous modifier ?!

Voici un exemple

ThemeColors

 ColorPrimary : sera la couleur principale de l’entête de votre application.

 ColorPrimaryDark : doit être la même que ColorPrimary mais en plus foncée (les  guidelines de Google indiquent qu’elle doit être plus foncée pour que l’utilisateur  puissent  distinguer la barre d’état, sauf lorsque vous affichez un contenu média en  plein écran).

 TextColorPrimary : son nom l’indique !

 WindowBackground : la couleur de l’arrière plan.

 NavigationBarColor : la couleur de la barre de navigation (pour les appareils qui en ont).

Nous allons donc choisir les couleurs (libre à vous bien sûr de choisir la couleur que vous voulez) et pour vous faciliter encore plus la tâche, voici un site Material Palette où vous n’aurez qu’à choisir la combinaison de couleurs que vous souhaitez et cet outil se chargera de créer votre Colors.xml (il suffit de cliquer sur DOWNLOAD puis sur XML) renommez ensuite le fichier XML en Colors.xml 

NOTE : pour cette démonstration je n’utiliserai que ColorPrimary ColorPrimary_Dark , NavigationBarColor, text primary  (vous pouvez modifier votre Colors pour ne laisser que ces lignes si vous vous apprêtez à réaliser la même chose).

Excellent, tout est prêt, maintenant place à l’application.

Appliquer le thème

Rendez-vous sur Android Studio et suivez les indications présentes sur les captures d’écran !

Project_Launch
Création du Projet
Values
Values

 

Values_past

 À présent sur Android Studio, lorsque vous cliquez sur le Colors.xml qui se trouve dans Values, des  petits carrés de la couleur désirée apparaîtront  devant chaque ligne.

Double cliquez sur Styles.xml et supprimez le contenu du fichier et remplacez-le par ceci :

<?xml version= »1.0″ encoding= »utf-8″?>
<resources>
<style name= »AppTheme » parent= »android:Theme.Material.Light »>
<item name= »android:colorPrimary »>@color/primary</item>
<item name= »android:colorPrimaryDark »>@color/primary_dark</item>
<item name= »android:textColorPrimary »>@color/text_primary</item>
<item name= »android:navigationBarColor »>@color/NavigationBar</item>
</style>
</resources>

Maintenant, devant chaque ligne devrait s’afficher la couleur que vous avez choisie dans Colors.xml.

À présent, regardez la troisième ligne <style name= »AppTheme » parent= »android:Theme.Material.Light »>  , mettez ce que vous voulez à la place de AppTheme , pour cet exemple je vais nommer mon thème DevTip le résultat devrait donner cela :  <style name= »DevTip » parent= »android:Theme.Material.Light »> .

Ensuite, double cliquez sur le dossier MANIFEST  puis sur le fichier AndroidManifest.xml et cherchez la ligne

android:theme= »@style/AppTheme » >   à place de AppTheme écrivez le nom de votre thème pour mon cas ça va donner android:theme= »@style/DevTip » >  

manifest

Maintenant, cliquez sur Activity_main ( ou votre activité principale qui se trouve dans LAYOUT ), mettez-vous en mode Design ( switch tout en bas ) et cliquez sur AppTheme puis sélectionnez le thème que vous avez créé.

manifest

theme_change

Vous devez à présent voir que la couleur a changé selon le thème que vous avez créé, voila ! Vous pouvez tester l’application sur votre terminal et rajouter plusieurs éléments dans votre thème ( Documentation )

Screenshot_2015-01-02-15-01-45

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *