Un background hachuré au centre pour Android

Si vous ne l’aviez jamais remarqué, la fiche de présentation d’une App sur l’Android Market version tablettes contient un détail technique plutôt intéressant :

Vous ne voyez pas de quoi je parle ? Le fond gris qui semble anodin possède deux caractéristiques qui, combinées, le rendent intéressant. Il a un fond haché oui, mais il a aussi une sorte de bordure sans hachage. En fait ce n’est même pas une bordure au sens Android puisqu’il n’y en a pas sur les quatre côtés.

On sait faire un background hachuré en mettant ces deux fichiers dans res/drawable et en utilisant le 2ème comme background sur notre vue :

bd_dark_gray.png
null

bd_dark_hatched.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<item>
    <bitmap
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/bg_dark_gray"
        android:tileMode="repeat" />
</item>

On sait également changer la couleur de fond d’un élément graphique, ça je ne le détaille pas.

Mais comment combiner les deux ?
Empiler deux layouts en mettant un padding dans le premier ?
null
FAUX ! Cette technique est à bannir car elle complexifie inutilement la hiérarchie de la vue, ce qui va allonger la phase de layout, embêter l’UIThread, rendre la vue moins réactive, et détruire des villages du Kirghizistan.

En cherchant un peu plus j’ai fini par apprendre l’existence du layer-list. Le principe est simple : combiner plusieurs Drawable, chaque Drawable étant dessiné dans l’ordre dans lequel il est ajouté à cette liste. Revenons à notre exemple et voyons ce que ça donne :

bd_dark_hatched.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#4b5054" />
            <padding
                android:left="10px"
                android:top="10px"
                android:bottom="10px"
                />
        </shape>
    </item>

    <item>
        <bitmap
            android:src="@drawable/bg_dark_gray"
            android:tileMode="repeat" />
    </item>
</layer-list>

On combine ici un Drawable de type Shape qui va définir la couleur de fond et le padding de la forme et un Drawable de type Bitmap qui va s’ajouter à cet objet Shape pour le remplir de notre hachurage. Et voilà le résultat !

null

VN:R_U [1.9.22_1171]
Rating: 0 (from 0 votes)
Share
Ce contenu a été publié dans Android, Trucs & astuces, avec comme mot(s)-clef(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

2 réponses à Un background hachuré au centre pour Android

  1. Bravo !

    Tite question : du coup, la shape qui est dessinée en premier se contente t’elle de remplir les contours, ou remplit-elle aussi le centre (qui serait ensuite effacé par le background hachuré) ?

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Joan Zapata dit :

    Oh oh, je pense que c’est surestimer largement le framework que de se poser la question ! J’ai testé rapidement avec un PNG transparent pour les rayures, et on voit bien le fond derrière, donc il ne comble pas uniquement le contour. Je doute très très fortement qu’il y ait un traitement pour optimiser le tout quand le motif n’est pas transparent.

    Alors on peut essayer de la faire soi-même cette optimisation (http://bit.ly/nNRsUG), mais je pense qu’on aura vite perdu ailleurs le temps qu’on aura gagné là-dessus !

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)

Laisser un commentaire