Création d’un image de fond pour vos boutons sans ressources graphiques

25
mars
2014

Un article de MathiasSeguy    Pas de commentaires

Bonjour,
Directement sorti d’une question de l’un de mes stagiaires, comment on fait pour mettre en place des background sur nos boutons, qui soient arrondies et dont la couleurs change en fonction de son état. L’objectif est d’optimiser au maximum les images qui prennent de la place en mémoire (RAM et ROM) en définissant nos formes de boutons directement en xml.
C’est simple, il suffit de meller layer-list et selector (qui sont deux types de drawables différents):
Pour cela, associez à votre bouton (ou n’importe quel de vos composants graphiques possédant un background) le drawable que nous allons définir:

<Button
android:id= »@+id/btnAdd »
android:layout_width= »wrap_content »
android:layout_height= »wrap_content »
android:background= »@drawable/button_lred »
android:text= »@string/btn_add » />

Ensuite, créez le drawable (res\drawable\button_lred):

<?xml version= »1.0″ encoding= »utf-8″?>
<layer-> xmlns:android= »http://schemas.android.com/apk/res/android » >

<item>
<shape android:gravity= »center » >
<stroke
android:width= »@dimen/stroke_buttonSize »
android:color= »@color/button_border » />

<gradient
android:angle= »270″
android:endColor= »@color/layout_background »
android:gradientRadius= »50″
android:startColor= »@color/main_background »
android:type= »sweep » />

<padding
android:bottom= »@dimen/stroke_buttonSize »
android:left= »@dimen/stroke_buttonSize »
android:right= »@dimen/stroke_buttonSize »
android:top= »@dimen/stroke_buttonSize » />

<corners android:radius= »@dimen/corner_button_Size » />

<size
android:height= »@dimen/buttonSize »
android:width= »@dimen/buttonSize » />
</shape>
</item>
<item>
<selector
android:constantSize= »true »
android:dither= »true »
android:variablePadding= »true » >
<item
android:state_focused= »true »
android:state_selected= »true »>
<shape android:gravity= »center » >
<solid android:color= »#990000FF » />

<size
android:height= »@dimen/buttonSize »
android:width= »@dimen/buttonSize » />

<corners android:radius= »@dimen/corner_button_Size » />
</shape>
</item>
<item android:state_pressed= »true »>
<shape android:gravity= »center » >
<solid android:color= »#99FF0000″ />

<size
android:height= »@dimen/buttonSize »
android:width= »@dimen/buttonSize » />

<corners android:radius= »@dimen/corner_button_Size » />
</shape>
</item>
<item>
<shape android:gravity= »center » >
<solid android:color= »#99FFFF00″ />

<size
android:height= »@dimen/buttonSize »
android:width= »@dimen/buttonSize » />

<corners android:radius= »@dimen/corner_button_Size » />
</shape>
</item>
</selector>
</item>

</layer-list>

Et voilà, vous avez un bouton rond qui change de couleur en fonction de son état. Pour l’utiliser, modifier les références vers les dimensions et les couleurs pour mettre vos propres contraintes.
Désolé pour la présentation mais sur DVP ils ont mis un outil de rédaction pour les blogs qui n’affiche pas de code
Le résultat est ci-dessous:

Normal

Sélectionné