Présentation élaborée par M. Achraf Mehrez dans le cadre des sessions de Lightning Talks à l'Orange Developer Center.

1. Lightning talk:
Personnalisation bouton et animations android
Orange Developer Center
Achraf Mehrez – Elève ingénieur stagiaire chez Orange
10/04/2014, Orange Developer Center

2. 2 Orange confidentialOrange presentation
Plan
Section 1 Comment customiser les boutons sous Android ?
Section 2 Les animations Android ?

3. 3 Orange confidentialOrange presentation
Comment «customiser» les boutons sous Android ?
1- Ajouter les ‘background’ désirés pour le bouton dans les différents états
sous « res/drawable/ ».
2- Créer un fichier XML ‘custom_button’ :res/drawable/custom_button.xml
 La création de ce nouveau «Drawable» qui sera utilisé comme arrière plan de notre
bouton.
 On utilise simplement la balise <selector> dans laquelle on ajoute tous nos
«Drawables » sous la forme de balises <item>.
 Pour associer le «Drawable» à un état on utilise (android:state..) dans la balise <item> .

4. 4 Orange confidentialOrange presentation
 Le bouton est :
- Défaut : Lorsqu’il est inactif (disabled)
- <item android:drawable="@drawable/button_default" />
- Pressé :
<item android:drawable="@drawable/button_pressed android:state_pressed="true" />
- Autre : (Lorsqu’il a le focus , …)
<item android:drawable="@drawable/button_focused“ android:state_focused="true" />
<item android:drawable="@drawable/button_enabled“ android:state_enabled="true" />
- Remarque: Attention à l’ordre des items dans la balise <selector>.
Les différents états d’un bouton

5. 5 Orange confidentialOrange presentation
Exemple simple

6. 6 Orange confidentialOrange presentation
3- Modifier la propriété « android:background » du bouton dans fichier
XML qui se trouve dans layout .

7. 7 Orange confidential
Les animations Android ?
Orange presentation

8. 8 Orange confidentialOrange presentation
Les animations Android ?
1- Définition de l’animation en XML :
Création d’un fichier XML qui définie l’animation désiré
res/anim/ animation.xml

9. 9 Orange confidentialOrange presentation
Définition en XML :
*Transparence:
<alpha> permet de faire apparaître ou disparaître une vue.
•android:fromAlpha : Est la transparence de départ avec 0.0 une vue totalement transparente
et 1.0 une vue totalement visible.
•android:toAlpha : Est la transparence finale voulue avec 0.0 une vue totalement transparente
et 1.0 une vue totalement visible.
*Rotation:
<rotate> permet de faire tourner une vue autour d'un axe.
• android:fromDegrees : Est l'angle de départ.
• android:pivotX: Est la coordonnée du centre de rotation sur l'axe X (en pourcentages par rapport à
la gauche de la vue, par exemple 50% correspond au milieu de la vue et 100% au bord droit).
• android:pivotY : Est la coordonnée du centre de rotation sur l'axe Y (en pourcentages par rapport
au plafond de la vue).
• android:toDegrees : Est l'angle voulu à la fin.

10. 10 Orange confidentialOrange presentation
*Taille:
<scale> permet d'agrandir ou de réduire une vue.
 android:fromXScale :Est la taille de départ sur l'axe X (1.0 pour la valeur actuelle).
 android:fromYScale : Est la taille de départ sur l'axe Y (1.0 pour la valeur actuelle).
 android:pivotX : (identique à <rotate>).
 android:pivotY : (identique à <rotate>).
 android:toXScale : Est la taille voulue sur l'axe X (1.0 pour la valeur de départ).
 android:toYScale : Est la taille voulue sur l'axe Y (1.0 pour la valeur de départ).
*Mouvement:
<translate> permet de faire subir une translation à une vue (mouvement rectiligne).
 android:fromXDelta : Est le point de départ sur l'axe X (en pourcentages).
 android:fromYDelta : Est le point de départ sur l'axe Y (en pourcentages).
 android:toXDelta : Est le point d'arrivée sur l'axe X (en pourcentages).
 android:toYDelta : Est le point d'arrivée sur l'axe Y (en pourcentages).

11. 11 Orange confidential
2- Le chargement de l’animation xml dans l’activité en
utilisant « AnimationUtils»:
Orange presentation

12. 12 Orange confidential
3- L'évènementiel dans les animations :
Il y a trois évènements qui peuvent être gérés dans le code :
 le lancement de l'animation,
 la fin de l'animation,
 chaque début d'une répétition.

13. 13 Orange confidentialOrange presentation
L'évènementiel dans les animations :

14. 14 Orange confidential
Bibliographie
 http://cyrilmottier.com/2009/10/01/creer-des-boutons-
personnalises/
 http://developer.android.com/guide/topics/ui/controls/button.html
 http://fr.openclassrooms.com/informatique/cours/creez-des-
applications-pour-android/les-animations-1www.forum-smsc.org
 http://www.androidhive.info/2013/06/android-working-with-xml-
animations/
Orange presentation

15. Merci pour votre attention