FORUMS

EVLeaks Shows Off Possible BlackBerry Android Phone

It wasn’t too long ago that we received reports of BlackBerry planning to use … more

Mysterious GG1 Google Device Stops by FCC. Glass v2?

As the year progresses, we draw further away from Google’s annual I/O … more

Material and Material Dark Hit Samsung’s Theme Store

The latest version of Touchwiz, launched alongside the Galaxy S6 and S6 Edge, … more

Swappa’s New App Helps You Value Your Device

There comes a sad time in everyone’s life where you must part ways with your … more

[TUTO] Create your 9.png !

1,816 posts
Thanks Meter: 4,096
 
By Yorzua, Recognized Themer on 22nd February 2012, 07:47 PM
Post Reply Subscribe to Thread Email Thread
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.





☺ 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





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 )





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



Place your files in example1/drawable-hdpi



Execute the xUltimate-d9pc.exe



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



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




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
Last edited by Yorzua; 23rd February 2012 at 08:08 AM.
The Following 78 Users Say Thank You to Yorzua For This Useful Post: [ View ]
 
 
22nd February 2012, 07:52 PM |#2  
Yorzua's Avatar
OP Recognized Themer
Flag Gotham City
Thanks Meter: 4,096
 
Donate to Me
More
Post
thanks to "PoorCollegeguy" who featured my thread the XDA Portal )))



and tweeted as well :

Last edited by Yorzua; 27th February 2012 at 02:28 PM.
The Following 11 Users Say Thank You to Yorzua For This Useful Post: [ View ]
24th February 2012, 09:59 AM |#3  
Yorzua's Avatar
OP Recognized Themer
Flag Gotham City
Thanks Meter: 4,096
 
Donate to Me
More
Quote:
Originally Posted by spc_hicks09

Thank you soooo much for posting this!

A single click on the thank button would make me happy if i helped you
The Following 3 Users Say Thank You to Yorzua For This Useful Post: [ View ]
26th February 2012, 05:24 PM |#4  
Junior Member
Thanks Meter: 20
 
More
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.
The Following 2 Users Say Thank You to EddieFAF For This Useful Post: [ View ]
26th February 2012, 09:17 PM |#5  
Yorzua's Avatar
OP Recognized Themer
Flag Gotham City
Thanks Meter: 4,096
 
Donate to Me
More
Cool
Quote:
Originally Posted by EddieFAF

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
Last edited by Yorzua; 26th February 2012 at 09:42 PM.
The Following 2 Users Say Thank You to Yorzua For This Useful Post: [ View ]
27th February 2012, 02:31 PM |#6  
AndroidGraphix's Avatar
Senior Member
Flag Paradise Valley, AZ
Thanks Meter: 377
 
Donate to Me
More
Great tutorial. Nice job making the front page on xda too. I assisted with making a new draw9patch a couple months ago and would highly recommend checking out my thread here on xda. It will literally save you hours of time from using the original draw9patch.

http://forum.xda-developers.com/show....php?t=1344909
29th February 2012, 10:52 AM |#7  
lufc's Avatar
Retired Senior Moderator / Resident Priest
Flag Blackpool UK
Thanks Meter: 1,576
 
Donate to Me
More
Guy's please keep the thread clean and on topic and please do not post a thank you post just hit the thanks button in the OP's first post
Thanks
The Following 2 Users Say Thank You to lufc For This Useful Post: [ View ]
4th March 2012, 08:32 PM |#8  
przemo5020's Avatar
Senior Member
Flag Ostrowiec
Thanks Meter: 282
 
More
I have a problem with the display of icons .png in Photoshop.
The original icon:
When I paste into Photoshop:

There are many icons that appear in Photoshop in this way. Can anyone help? My version of Photoshop CS5
4th March 2012, 09:42 PM |#9  
Yorzua's Avatar
OP Recognized Themer
Flag Gotham City
Thanks Meter: 4,096
 
Donate to Me
More
Cool
Quote:
Originally Posted by przemo5020

I have a problem with the display of icons .png in Photoshop.
The original icon:
When I paste into Photoshop:

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
The Following 2 Users Say Thank You to Yorzua For This Useful Post: [ View ]
6th March 2012, 09:19 PM |#10  
Account currently disabled
Flag Los Angeles
Thanks Meter: 202
 
More
Freaking awesome dude will try this out. Since I was looking to add some of my costume 9.pngs.
The Following User Says Thank You to .Elite_The_King. For This Useful Post: [ View ]
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes