Android

Teinter parallèlement la même ressource

Il est difficile de donner un titre court à ce que je vais expliquer aujourd’hui. A côté de ça, l’explication sera courte car très simple. Donc, pour en revenir à nos moutons, nous allons voir comment afficher sur le même écran deux fois la même ressource teinté d’une manière différente comme le montre l’image ci dessous.

Notre image drapeau

De base, lorsque l’on charge une ressource, même si c’est plusieurs fois dans différentes variables, Android répercuter les changements faits sur toutes les variables pointant sur cette ressource. Mais heureusement, il existe une fonction à appeler permettant de bloquer cette répercussion. Il suffit de rendre muette votre ressource. Dans les lignes suivantes, nous allons voir comment :

//chargement de nos ressources
Drawable flagGreen  = getResources().getDrawable(R.drawable.ic_menu_slide_flag);
Drawable flagRed = getResources().getDrawable(R.drawable.ic_menu_slide_flag);

//maintenant, on les rend muettes pour ne pas répercuter 
//les changements aux autres appeles de cette ressource
flagGreen.mutate();
flagRed.mutate();

La fonction permettant ceci est la fonction mutate(). Voici ce que dit la documentation à propos de cette fonction :

Make this drawable mutable. This operation cannot be reversed. A mutable drawable is guaranteed to not share its state with any other drawable. This is especially useful when you need to modify properties of drawables loaded from resources. By default, all drawables instances loaded from the same resource share a common state; if you modify the state of one instance, all the other instances will receive the same modification. Calling this method on a mutable Drawable will have no effect.

Returns
  • This drawable.

Maintenant que « nos ressources » sont dissociées l’une de l’autre, nous allons pouvoir leur appliquer un filtre de couleur. Le filtre est appliquable sur les Drawables grâce à la fonction setColorFilter() :

flagGreen.setColorFilter(Color.parseColor("#52D052"), Mode.MULTIPLY);
flagRed.setColorFilter(Color.parseColor("#D11717"), Mode.MULTIPLY);

Pour effectuer un effet différent de filtre, on peut faire comme pour les calques sous Photoshop ou Paint.net, on sélectionne un « mode de calque ». Ici j’ai opté pour un mode de multiplication pour obtenir le résultat souhaité. Maintenant vous pouvez peindre vos Drawables dans des Canvas, les afficher dans une ImageView, ils apparaîtrons comme la capture de début de l’article. Si vous oubliez d’appeler la fonction mutate() sur vos Drawable, ils s’afficheront avec le dernier filtre appliqué (ici tous en rouge).