[TUTO] Create your 9.png !

Search This thread

Yorzua

Senior Member
Aug 19, 2010
1,816
4,077
Gotham City
I will guide you into the famous 9.png creation

First rule before to start how to learn to theme your device :

Always make a backup of the files you are about to edit or do a nandroid backup.
If anything goes wrong you will get a bootloop.

Nandroid-04.jpg




☺ TOOLS you must have ☺


1. PHOTOSHOP / GIMP http://www.gimp.org/downloads

or a good alternative for those who are rookies in Adobe products : PAINT.NET http://www.paint.net

or any other Graphics editor you like to use of your choice.

2. DRAW 9-PATCH http://developer.android.com/sdk/index.html

You will find it in your SDK starter package ( android sdk/tools )
The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor.

3. xUltimate-d9pc.exe http://lmgtfy.com/?q=xUltimate-d9pc

Basically you will need to compile the edited 9.png to Draw9Patch Compiler

*****


Now let's play with your pics in the graphic editor of your choice :

your 9.png's files would be in <drawable/drawable-hdpi> folder' apk


9png+step.PNG



When you are done editing your image,
you can open it in the draw9patch tool to verify that it stretches properly.

Here is the most important part of the 9.png creation.
You need to define 2 parts :

* Stretch part ( always left and up side )
* Content part ( always right and bottom side )


draw+9-png+tuto.jpg



When you are done stretching your image,
you can open it in the 9.png compiler tool to compile it properly.


you notice the 1pixel border created for the stretcheable 9.png

9+pngs+not+done+examples.PNG


Place your files in example1/drawable-hdpi

9png+step1.PNG


Execute the xUltimate-d9pc.exe

9png+step2.PNG


If you defined properly your 9.png,
you must find no errors and you can hear a "peeep"

Compiled ready files are in /Done folder

9png+step3.PNG


When you are done compiling your image,
you can see that the 1pixel border disappeared.

9png+step4.PNG



Use 7-ZIP http://www.7-zip.org
(an open source file archiver with a high compression ratio)
to drag your files into the apk !


Source : androidbyyorzua


Congatulations, you can enjoy your work :D
 
Last edited:

EddieFAF

Member
Feb 20, 2012
25
20
Great tutorial. Thanks for writing it.
But do you happen to know how to do it the other way round?
If you have a single compiled .9.png file, is it possible to decompile it again?
I know apktools do decompile it when decompiling complete apks, but I couldn't figure out how to do it to a single png file.
 

Yorzua

Senior Member
Aug 19, 2010
1,816
4,077
Gotham City
Great tutorial. Thanks for writing it.
But do you happen to know how to do it the other way round?
If you have a single compiled .9.png file, is it possible to decompile it again?
I know apktools do decompile it when decompiling complete apks, but I couldn't figure out how to do it to a single png file.

Thanks for your comments,

Maybe this is what you are looking for :
[UTILITY][TOOL] 9patchPngSuite [Windows&Linux]

Personally never tried/needed it yet :rolleyes:
 
Last edited:

przemo5020

Senior Member
May 11, 2011
204
281
Ostrowiec
I have a problem with the display of icons .png in Photoshop.
The original icon:
scaled.php

When I paste into Photoshop:
scaled.php

scaled.php

There are many icons that appear in Photoshop in this way. Can anyone help? My version of Photoshop CS5
 

Yorzua

Senior Member
Aug 19, 2010
1,816
4,077
Gotham City
I have a problem with the display of icons .png in Photoshop.
The original icon:
scaled.php

When I paste into Photoshop:
scaled.php

scaled.php

There are many icons that appear in Photoshop in this way. Can anyone help? My version of Photoshop CS5

A little off topic, buddy, as it is not really a 9.png you are trying to work on but doubke check if the png is indexed. You will find many of the pngs indexed and some not.

Answering from my phone, will help you better tomorrow :)
 

ppalbicke

Senior Member
Dec 14, 2010
1,919
3,051
Chicago
Thank you, as this is a good guide. Took me awhile until it finally clicked. I know you emphasized but I do not think enough, the stretch and content lines are vital. I did not quite get WHAT that meant till messing over and over.

Any one trying fot the first time, definitely play with the examples he provided and you will be all good.
 
  • Like
Reactions: Ghostfreak NB

denley

Member
Nov 27, 2012
5
1
Adelaide
There is an app for Android called "9 Patch Editor" that can load .9.png (compiled or with border) and edit them or remove patches altogether. I hope that helps.
 

Ghostfreak NB

Senior Member
Aug 11, 2012
4,591
2,858
Mumbai
Hi,experts,I'm new to this theming and png editing stuff
Can I create 9.png if I just follow your guide Yorzua? If yes,
I'll give it a try soon!

Orelse, if this is a higher level thing,could you guide me into something basic .so that I learn some things and then jump over here!
Sorry for the questions....! Hope you don't mind!

Sent from my MT11i using xda premium
 

jinshah

Member
May 17, 2012
45
2
Ahmedabad
Hi Yorzua,

If you see the sending text message animation on ios or any iphone it is
is awsome and smooth sliding effect and message goes upped side with
sliding... I want to do same animation on my android phone... but the
problem is when i decompile WhatsApp apk i can not found folder of
animation. Can you plz tell me or show me how can I do that???

Plz do needfull.
 

Top Liked Posts

  • There are no posts matching your filters.
  • 80
    I will guide you into the famous 9.png creation

    First rule before to start how to learn to theme your device :

    Always make a backup of the files you are about to edit or do a nandroid backup.
    If anything goes wrong you will get a bootloop.

    Nandroid-04.jpg




    ☺ TOOLS you must have ☺


    1. PHOTOSHOP / GIMP http://www.gimp.org/downloads

    or a good alternative for those who are rookies in Adobe products : PAINT.NET http://www.paint.net

    or any other Graphics editor you like to use of your choice.

    2. DRAW 9-PATCH http://developer.android.com/sdk/index.html

    You will find it in your SDK starter package ( android sdk/tools )
    The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor.

    3. xUltimate-d9pc.exe http://lmgtfy.com/?q=xUltimate-d9pc

    Basically you will need to compile the edited 9.png to Draw9Patch Compiler

    *****


    Now let's play with your pics in the graphic editor of your choice :

    your 9.png's files would be in <drawable/drawable-hdpi> folder' apk


    9png+step.PNG



    When you are done editing your image,
    you can open it in the draw9patch tool to verify that it stretches properly.

    Here is the most important part of the 9.png creation.
    You need to define 2 parts :

    * Stretch part ( always left and up side )
    * Content part ( always right and bottom side )


    draw+9-png+tuto.jpg



    When you are done stretching your image,
    you can open it in the 9.png compiler tool to compile it properly.


    you notice the 1pixel border created for the stretcheable 9.png

    9+pngs+not+done+examples.PNG


    Place your files in example1/drawable-hdpi

    9png+step1.PNG


    Execute the xUltimate-d9pc.exe

    9png+step2.PNG


    If you defined properly your 9.png,
    you must find no errors and you can hear a "peeep"

    Compiled ready files are in /Done folder

    9png+step3.PNG


    When you are done compiling your image,
    you can see that the 1pixel border disappeared.

    9png+step4.PNG



    Use 7-ZIP http://www.7-zip.org
    (an open source file archiver with a high compression ratio)
    to drag your files into the apk !


    Source : androidbyyorzua


    Congatulations, you can enjoy your work :D
    12
    thanks to "PoorCollegeguy" who featured my thread the XDA Portal :))))

    xda+press+article+2.PNG


    and tweeted as well :

    xda+tweet+press+article+2.PNG
    4
    Thank you soooo much for posting this!

    A single click on the thank button would make me happy if i helped you :rolleyes:
    2
    Great tutorial. Thanks for writing it.
    But do you happen to know how to do it the other way round?
    If you have a single compiled .9.png file, is it possible to decompile it again?
    I know apktools do decompile it when decompiling complete apks, but I couldn't figure out how to do it to a single png file.
    2
    Great tutorial. Thanks for writing it.
    But do you happen to know how to do it the other way round?
    If you have a single compiled .9.png file, is it possible to decompile it again?
    I know apktools do decompile it when decompiling complete apks, but I couldn't figure out how to do it to a single png file.

    Thanks for your comments,

    Maybe this is what you are looking for :
    [UTILITY][TOOL] 9patchPngSuite [Windows&Linux]

    Personally never tried/needed it yet :rolleyes: