Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,738,819 Members 41,211 Now Online
XDA Developers Android and Mobile Development Forum

[TUTO] Create your 9.png !

Tip us?
 
Yorzua
Old
(Last edited by Yorzua; 23rd February 2012 at 08:08 AM.)
#1  
Yorzua's Avatar
Recognized Themer - OP
Thanks Meter 4070
Posts: 1,814
Join Date: Aug 2010
Location: Gotham City

 
DONATE TO ME
Talking [TUTO] Create your 9.png !

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
The Following 75 Users Say Thank You to Yorzua For This Useful Post: [ Click to Expand ]
 
Yorzua
Old
(Last edited by Yorzua; 27th February 2012 at 02:28 PM.)
#2  
Yorzua's Avatar
Recognized Themer - OP
Thanks Meter 4070
Posts: 1,814
Join Date: Aug 2010
Location: Gotham City

 
DONATE TO ME
thanks to "PoorCollegeguy" who featured my thread the XDA Portal )))



and tweeted as well :

The Following 10 Users Say Thank You to Yorzua For This Useful Post: [ Click to Expand ]
 
Yorzua
Old
#3  
Yorzua's Avatar
Recognized Themer - OP
Thanks Meter 4070
Posts: 1,814
Join Date: Aug 2010
Location: Gotham City

 
DONATE TO ME
Quote:
Originally Posted by spc_hicks09 View Post
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: [ Click to Expand ]
 
EddieFAF
Old
#4  
Junior Member
Thanks Meter 20
Posts: 23
Join Date: Feb 2012
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: [ Click to Expand ]
 
Yorzua
Old
(Last edited by Yorzua; 26th February 2012 at 09:42 PM.)
#5  
Yorzua's Avatar
Recognized Themer - OP
Thanks Meter 4070
Posts: 1,814
Join Date: Aug 2010
Location: Gotham City

 
DONATE TO ME
Quote:
Originally Posted by EddieFAF View Post
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
The Following 2 Users Say Thank You to Yorzua For This Useful Post: [ Click to Expand ]
 
AndroidGraphix
Old
#6  
AndroidGraphix's Avatar
Senior Member
Thanks Meter 374
Posts: 1,229
Join Date: Apr 2011
Location: Paradise Valley, AZ

 
DONATE TO ME
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
 
lufc
Old
#7  
lufc's Avatar
Senior Moderator / Resident Priest
Thanks Meter 1485
Posts: 9,512
Join Date: Oct 2007
Location: Blackpool UK

 
DONATE TO ME
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
Pay attention and participate,Encourage,
not discourage, Listen to advice and accept instruction,
and in the end you will be wise.......... Prov. 19:20
The Following 2 Users Say Thank You to lufc For This Useful Post: [ Click to Expand ]
 
przemo5020
Old
#8  
przemo5020's Avatar
Senior Member
Thanks Meter 282
Posts: 205
Join Date: May 2011
Location: Ostrowiec
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
 
Yorzua
Old
#9  
Yorzua's Avatar
Recognized Themer - OP
Thanks Meter 4070
Posts: 1,814
Join Date: Aug 2010
Location: Gotham City

 
DONATE TO ME
Quote:
Originally Posted by przemo5020 View Post
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: [ Click to Expand ]
 
.Elite_The_King.
Old
#10  
Account currently disabled
Thanks Meter 202
Posts: 891
Join Date: Sep 2011
Location: Los Angeles
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: [ Click to Expand ]
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes