Skip to content

27 juin 2010 | Rédigé par Axon

20

Rendre une image extensible pour des boutons ou autres Views [Tuto Android n°5]

Un ami m’a parlé des 9-patch et j’ai souhaité faire un tuto dessus car c’est vraiment très utile. A partir d’une image il devient possible de la rendre extensible afin qu’elle s’adapte à la taille de l’écran ainsi plus de problème lorsque l’utilisateur utilise votre application au format paysage.

Après quelques recherches sur le net pour me renseigner un peu plus sur le sujet et ne pas dire n’importe quoi, je suis tombé sur le blog de Cyril Mottier, et comme à mon habitude, si je n’ai rien d’autre à ajouter par rapport à ce qui existe déjà et qui est très bien fait, je préfère faire un lien vers le tutoriel en question (et puis cela vous fait connaitre un site de plus pour apprendre à programmer sous Android) : 9-patch.

Je ne fais pas que diffuser les news j’applique également les précieuses astuces que je trouve sur le net à travers différents tutos et pour m’entraîner au principe des 9-patch voilà la petite interface que j’ai réalisée :

Tout cela grâce aux images suivantes :

Si vous souhaitez avoir le code pour faire cette petit interface graphique très simple, demandez-le moi en me laissant un petit com et je vous le communiquerai avec plaisir ! ;) Et si vous n’avez pas compris quelque chose sur le site de Cyril Mottier n’hésitez pas à me poser des questions, je serai ravi de pouvoir y répondre.

Edit : [Code source]

Découvrez d'autre articles de la catégorie Tutoriels Android

Encore un peu de lecture :

20 Commentaires Poster un commentaire
  1. 19 juil 2010

    Great site. A lot of useful information here. I’m sending it to some friends!

  2. Damien
    22 juil 2010

    Super sympa tes tuto.

    Pourrais tu mettre a disposition le code source pour ce tuto stp ;)

  3. 22 juil 2010

    Voilà le code source Damien, regarde à la fin du tuto ;)
    Si tu as aimé tu peux cliquer sur le petit « + » en haut du tuto ou le retweeter ou le partager sur Facebook, ça fait toujours plaisir :)

  4. Damien
    23 juil 2010

    Merci bien.

    Il me manquais l’idee du TextView avec un weight a 1 pour pouvoir mettre les boutons de chaque cotes. ;)

    Par contre, si je puis me permettre, il faut eviter le plus possible d’utiliser des tailles en px et privilegier par exemple les dip, ceci a cause des differentes resolution/definition d’ecran (par exemple un padding de 5px sera plus petit sur un ecran HD qu’un ecran « normal » vu qu’il y a plus de pixels dans un ecran HD).

    Voila, et merci encore pour la source ;)

  5. 23 juil 2010

    Moi aussi j’ai mis du temps à le trouver celui-ci ;)

    Sinon tu as raison, on me l’a dit depuis peu pour les tailles en dip, je fais comme ceci maintenant mais j’ai pas corrigé dans les anciens. Mais merci de me l’avoir dit, si tu as d’autres remarque, il ne faut pas hésiter je suis preneur, c’est comme ça qu’on apprend le mieux.

  6. danoo
    3 août 2010

    hello, je trouve votre site très instructif et facile d’accès. je debute sur android. serait-ce possible de recevoir lre code source de cet article s’il vous plait. le lien sur cette page ne repond pas apparemment, je vous en remercie d’avance.

    Danoo

  7. 3 août 2010

    Merci danoo pour tes encouragements. Normalement le lien fonctionne je viens de vérifier… ;)

  8. omarove
    20 sept 2010

    ca me plait vraiment puisque je viens de commencer la programmation android java, pourais-tu m’envoyer son code source?

  9. JC MANSION
    9 nov 2010

    Bonjour

    Peux-tu m’envoyer le code source, présenté comme dans tes autres tutos,j’essaie de le rafaire comme un nouveau projet car avec le zip je n’arrive pas à ouvrir l’appli

  10. Guerini
    21 jan 2011

    Pour ceux qui ne parviennent pas à lancer Draw9Patch, voir ici :
    http://code.google.com/p/android/issues/detail?id=12979

  11. Eelvagx
    12 mar 2011

    Salut,
    Tout d’abord, Bravo pour ces magnifiques tutoriels…
    Je rencontre un petit problème.
    Je crée cette barre dans mon activité principale et associe des actions aux boutons : jusque là, tout va bien.
    Je veux que cette barre soit visible tout le temps, dans je la crée dans une deuxième activité. Ça s’est bon aussi.
    Le problème est que dès que j’associe un setOnClickListener au bouton, lorsque je lance cette activité, Force close. Le débugger me met : caused by java.lang.NullPointerException. Sais-tu d’où ca peut venir ?

  12. letoat
    16 juil 2011

    Bravo pour tes différents tutos et articles !

  13. letoat
    16 juil 2011

    Concernant le code source fourni par Cyril sur le lien que tu donnes, il y a une petite correction à faire pour que ça marche.
    Dans le fichier main.xml, il a mis « launchToast » dans l’évt onclick
    Alors que la méthode s’appelle « showToast » dans la classe java.
    il faut uniformiser les deux noms pour que ca fonctionne.

  14. bedis
    16 oct 2011

    bravo
    pouvez vous me donner le code
    mercii

  15. Darius
    16 nov 2011

    Ha je dirais pas nom pour le code de cette beautée

  16. goetz
    6 déc 2011

    bonjour,

    pourrais-je avoir le code pour m’inspirer j’aimerais continuer à développer.. :)

    merci bcp!

  17. zak666
    17 mar 2012

    bjr je voudrez slv le code pour cette interface parce-que je suit entrain de faire une application pour mon mémoire qui consiste a apprendre le langage des signe donc je doit afficher des images j’en profite aussi pr te poser cette question comment relier mon programme androïde a la base de données d’image que g crée grâce a openoffice

  18. zinehom
    17 avr 2012

    Bonjour, merci de m’envoyer le code source de cette application android

  19. Vincent Cantin
    9 juin 2012

    Il me semble que les pixels noirs en haut et en bas (de meme pour la gauche et la droite) ont une signification differente dans les 9-patches.

  20. didou
    7 mar 2013

    Bonjour :D
    Moi aussi j’aimerai bien avoir le code de l’appli ainsi que des explications a propos du bloc !
    bonne continuation

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires