Database Develop

[Request] .9.png video tutorial

Like many other's i have tried to hop onto the skinning boat after the release of metamorph.
and i think like many others i have problems with those .9.png files. i read stericsons write up on them but i cant make any sense out of it.
therefore i would like to ask from any of you that do understand them: could you make a short video describing the editing of 1 file?
since i'm a visual kind of guy this would 99% sure make me understand it and make me able to continue with my theme.
i would really really apreciate this guys..

you can power up draw9patch and play with it and you will understand it..
few thing you should know
when you load a regular png file(not .9.png) the tool automatically expend the size by 1 pixel each side(up down left right)
then you can edit
the left and top sides represents stretchable area.. you should put there one or two black pixels.. no more!(for each side)
the right and bottom sides are represents the content area.. you can fill it how you like.. but keep it one line for each side
then you need to save it.. when you save it the tool adds a .9 to the end of the file name
the next move is to compile the file with eclipse........

i dont have time to make a vid right this second, but im willing to help you out...first tell me, have you checked out the source code? It has all the .9.png's UNCOMPILED, which means that they still have the guides drawn and you can take a look at certain images to get an idea of how the guies SHOULD be drawn for a certain image.
Brief explanation...The TOP and LEFT sides of the 1px border are where you will draw a single (or double is allowed) guide marker to mark where the image will be stretched. You are allowed up to 2 guides on the top and 2 on the left, but no more.
On the BOTTOM and RIGHT sides of your 1px border you will draw guide markers for the "Content area" of the image. That is to say, if you have a button that will contain text, image, or other content, you draw a line across the bottom edge from one side of the button to the other to center the content in the center of the button. Then the same for the right side to make it centered vertically.
You should check out the source and look at those images in there, that'll help you see what draw9patch does and how certain images should look when they're done.
Then you have to compile the images in eclipse to get them to work right. just start a new Android project and choose "From existing Source", then choose one of the samples that comes with the SDK...i use home.apk. then after you edit the .9.png's with draw9patch, you dump them into a folder (i.e. res/drawable or res/drawable-land) in the project, overwrite whatever images may already be there, and then right click the root of the project in the tree view and go down to "Android Tools" and pick "Export Unsigned package". (it doesnt matter if its signed cuz your just gonna extract it for the images)
This will save an .apk file to your eclipse workspace directory. just copy it to your desktop and extract it to get the freshly compiled .9.png's and inject them into your .apk or update.zip...then sign and flash!
Hope this helps...
-BMFC

ok so the problem for me seems to lie with eclipse, atm i'm stuck on the fact that when i try to open an existing project, i dont have the AndroidManifest.xml and when i extract it from some other theme, it says it cant be parsed. so eehm where exactly should i find a unparsed AndroidManifest.xml or what should be in it?
you already got me a lot further! thanx!

did you try using a different sample application? there are some that throw some errors when i first try to open them as projects but home.apk seems to work fine for me. i tried to figure out why youd be getting that error but i dont seem to get it for any of my samples so maybe its a problem with your SDK? im not sure but here is my AndroidManifest.xml from the home.apk sample, it works for me so it SHOULD work for you. if not you may have a deeper issue going on. anyways just drop the ".txt" from the end of the filename and drop it in [YourSDKdirectory]/platform/Android 1.6/samples/Home/ and then try to open as existing project again. Lemme know if it works...
-BMFC
View attachment AndroidManifest.xml.txt

Is there a way that you can make .9 images on photoshop? Or someway to get around using the 9 tool found in the sdk?

AndroidFiend said:
Is there a way that you can make .9 images on photoshop? Or someway to get around using the 9 tool found in the sdk?
Click to expand...
Click to collapse
yeah, you just give the image a 1px border on all sides and then draw the guides on the border and then save it and compile with eclipse...its the same basic thing, the draw9patch tool just automates most of it for you.
-BMFC

Hey, I'm also one of the people who jumped in the Metamorph bandwagon(not that it's bad), and I'm also having trouble with .9.png's.
In my case, I downloaded an existing Metamorph theme, and I'm basically recoloring some .9's here and there. So, is it possible to just open the .9's in Photoshop, recolor them, then save it as normal? or do I still have to recompile it in Eclipse?
Thanks in advance.

bmfc187 said:
i dont have time to make a vid right this second, but im willing to help you out...first tell me, have you checked out the source code? It has all the .9.png's UNCOMPILED, which means that they still have the guides drawn and you can take a look at certain images to get an idea of how the guies SHOULD be drawn for a certain image.
Brief explanation...The TOP and LEFT sides of the 1px border are where you will draw a single (or double is allowed) guide marker to mark where the image will be stretched. You are allowed up to 2 guides on the top and 2 on the left, but no more.
On the BOTTOM and RIGHT sides of your 1px border you will draw guide markers for the "Content area" of the image. That is to say, if you have a button that will contain text, image, or other content, you draw a line across the bottom edge from one side of the button to the other to center the content in the center of the button. Then the same for the right side to make it centered vertically.
You should check out the source and look at those images in there, that'll help you see what draw9patch does and how certain images should look when they're done.
Then you have to compile the images in eclipse to get them to work right. just start a new Android project and choose "From existing Source", then choose one of the samples that comes with the SDK...i use home.apk. then after you edit the .9.png's with draw9patch, you dump them into a folder (i.e. res/drawable or res/drawable-land) in the project, overwrite whatever images may already be there, and then right click the root of the project in the tree view and go down to "Android Tools" and pick "Export Unsigned package". (it doesnt matter if its signed cuz your just gonna extract it for the images)
This will save an .apk file to your eclipse workspace directory. just copy it to your desktop and extract it to get the freshly compiled .9.png's and inject them into your .apk or update.zip...then sign and flash!
Hope this helps...
-BMFC
Click to expand...
Click to collapse
hey brotherin ..
i didnt have to do that at all. just make sure you have a fresh .png to work with.
)i.e - ballsack.png - wanna stretch it so the sack is in the middle of png.
)do the lines up top and left like stated .. but the guides really arent that important at the bottom.
)next you will than get it to your liking - watch the right side of screen in the example pane, you can see the image shifting - hence you can shift gradients and such with more guide lines behind the first pixel that you mark for guide line. get it?
)than you save the file from the "File" option as a .9.png file.
)and walla its a .9 that can be shfted with the existing metadata that is there.
just dont get too advanced or imsure it wont work to well.i have edited all kinds of them in PSCS4 and than the .9 editor from HTC. Its hard as **** to do. but it pays off. hope this helps.

like bmfc said, get the uncompiled .9.png from the source. makes it so much easier.
then what I do is
open the source .9.png in cs4
marquee tool, and select all content except the guidelines, make it invisible
save that image as ex. guide.png.
take all the images that look the same i.e pressed/selected/default of the same images
open them and the guide.png in photoshop, copy and paste the modified .9.png onto the guide.png, then I save as the original image, repeat as many times as needed,
then when done with that before I compile, I move all of the images with guidelines to a folder ex. guidelines, so that I will have them for future use.
then follow what bmfc said to compile them in eclipse.

check out this video walthrough for working with the .9.png files.
http://www.youtube.com/watch?v=Lf1l9JV9JBw

thanks for the info
the youtube link was a great help
less frustrated....and need improvement but at least getting better and getting the hang of it
the attachment was just for kicks and practice

takumi2k4 said:
Hey, I'm also one of the people who jumped in the Metamorph bandwagon(not that it's bad), and I'm also having trouble with .9.png's.
In my case, I downloaded an existing Metamorph theme, and I'm basically recoloring some .9's here and there. So, is it possible to just open the .9's in Photoshop, recolor them, then save it as normal? or do I still have to recompile it in Eclipse?
Thanks in advance.
Click to expand...
Click to collapse
completely legit. ive been doing it now for a while, works fine. after editing in photoshop, just close the image and click ok when it asks if you want to save the changes.

custom bootscreen help

I have made gifs for a custom boot screen and have been playing around with getting it them to work.
I flash over the previous bootscreen it reboots, my images show but then when they are meant to be animated the image gets scrambled and makes no sense, i did rather cheekily just replace the .gifs from someone elses custom boot screen and signed the zip file.
does anyone know whats going wrong or can anyone point me in the direction of creating the files to go with the gifs so i can get this working.
Cheers
John

They need to be in indexed 255 colors. And they mustn't have any transparent layers. Then they should work just fine.

ahh tristan...you've learnt well... ;D

cheers for the help gents, will try it in the morning.

hmm this is annoying, i have my gif files all built nicely but not using indexed 255 .... does anyone know of a tutorial for converting it without loosing all animations? im searching the net at the moment but no luck

gimp -> image -> mode -> indexed

Will it change a current gif or do i have to make the frames again in gimp?

It works through all the frames.

just used gimp under ubuntu, opened the animations selected image >> mode >> indexed flashed my boot files and they are still not displaying right, beter as you can see part of the animation playing but its far from perfect.
shal i just try creating the images again? or has anyone got any other suggestions?
thanks for everyones help so far though
John

Hello, first post here. I am having the same problems as jonny in creating a custom bootscreen. The first frame of my animation will show before it scrambles. Iam using photoshop. I created my animation in imageready, imported to photoshop, made an indexed 255 color palate and went back to imageready and loaded the palate. I feel like I'm missing something obvious.
BTW, I love this forum. You are all great. I am learning so much. Recently created my own lockscreen, and after I can get the bootscreen down I want to try my hand at the taskbar icons

I swapped to GIMP image editor (which is 100% free) to actualy animate my gifs in indexed 255, i did it in photoshop but it didnt work for some reason even when using indexed 255 colour.

Okay, after much fooling around, I finally got it to work properly . In case anyone cares, here's what I did:
Created the animation in PS (didn't realize you could do animation in PS and didn't need IR) to how I want it to run. Once it looks exactly how you want it, click "Flatten frames into layers". Now delete your original layers so all you have left is the animation frames. Save PSD and open it in GIMP. Go to file, save as, and save as a gif. Click the "save as animation" and "convert to indexed" (that is the key right there) bubbles, and click "export" then save.
Viola! now more problems. I can't figure out how to post it as a gif, but it is the boot process from windows xp.

[HELP] Landscape Framework Elements

Big question. When you rotate the phone, the status bar background (in themes like Darkness, with a design) gets messed up because it's shaped for our screen and not a small piece that gets tiled like the original. Can you make a landscape version of the background? I noticed in TouchWiz30Launcher.apk there is a homescreen_icon_bg.png and homescreen_icon_bg_h.png the latter being for a horizontal orientation of the launcher. Can we apply this concept to a custom made portrait AND landscape drawer background in twframework-res.apk? I would really like to know if it is possible, but am not asking for the creation of the background. I can make my own, but I need to know how to make it work.

I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.

CuriousTech said:
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
Click to expand...
Click to collapse
Thanks a lot for your post, I looked into status_bar_expanded but couldn't find anything applicable. Looked at status_bar.xml and it contains all the info on status_bar_background in the vertical position. How would you put it all into horizontal? Would you have to edit the existing xml or make a new one in layout-land? Could I just copy it into layout-land and edit in some new filenames and stuff?
EDIT: You know how to signify a file it says @drawable/statusbar_background? Does this actually refer to status_bar_background.9.png? And how would you signify a drawlable-land destination? @drawable-land/statusbar_background?

That's mostly what I don't understand yet. In framework-res there are 3 folders:
layout
layout-land
layout-port
icon_menu_layout.xml is in land and port and not in just layout. I think because layout is default for both, and land or port is used for those modes if the file doesn't exist in layout. Just like an xml in drawable can replace an image if the same name is used. But I think there's more to it than that. I tried creating a layout-land and layout-port and moved status_bar_expanded.xml to both and it looked normal both ways. I would think that layout-land would automatically use the drawable-land images too. Something else is missing.
EDIT: Oh yes @drawable/statusbar_background is the png in drawable-hdpi, unless there's actually a drawable/statusbar_background.xml which would make it use that instead. I just don't know where drawable-land-hdpi fits in.

Inside the XML there is a "vertical" and "horizontal" section, you'd have to change that too. I have changed it and will try it tonight in my framework. I just don't understand the references it makes too well...

I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html

CuriousTech said:
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
Click to expand...
Click to collapse
I honestly don't know what that stuff means with a headache, so I can't understand what the links refer to, sorry

It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.

CuriousTech said:
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
Click to expand...
Click to collapse
Crap 10char

[TUTORIAL] Fit Wallpaper to homescreen

Hello everyone,
Have been seeing a lot of posts regarding questions on how to fit wallpaper to your center screen. As we all know, when trying to fit wallpaper, it ends up zoomed and the central object get's spread over all the homescreens. Haven't found an app that does not distort the image so I tried modifying the picture and found it's works great.
Just to be clear, I will show yo how to go from this:
To this
Requirements:
-Photo editing software. I use Photoshop but probably GIMP Paint.net or other software could do just fine. It's easier if it has guides and layers support.
Steps:
1. Get a wallpaper obviously. Any size will do since as we will be cropping and streching it. Got mine from here
2. I've attached the Photoshop template, which you can use as a guide. As far as I know GiMP opens psd files just fine. *
* If GIMP doesn't open it or using another image editing software:
- Create an image 960x800 px (default wallpaper size)
- Draw vertical guides/ lines at the 240 px, 480 px and 720px mark
3. Paste the image. Make sure that (in this case) the car fits between the first and last guide. this will ensure it fits to just one home screen
4. You now have to fill the rest of the image.
In this case, the background has a gradient so there will be no significant quality loss or obvious distortion if we warp it. Just select parts of the background, hit transform and drag.
If your image has a solid color background, just fill the rest of the image with that color.
If the background is more complex, and can;t use one of the methods above, you have to tediously use the clone stamp/heal tool to fill in the image.
5. You should be left with something looking like this:
Now just save the image, send it to your phone and set it as your wallpaper.
If you have any questions, I'm happy to try to answer them.
Cheers

Great tutorial .. Also had this problem many times .. Most of the time the app wallpaper set and save ( available in the market for free) did the trick.

Great tutorial. I like GIMP too for graphic editing without the expensive Photoshop or Paint Shop Pro.
However, I'm lazy at times to log on my lappie, so I'm using PicSpeed Wallpaper app (from the Market) to crop and set wallpapers.. While viewing a picture in Gallery, press Menu, select Set Picture As (this is for ICS, I forgot what the option reads in GB), look for the PicSpeed icon and the text Set as Wallpaper. It then brings up PicSpeed Wallpaper cropping tool. It's working great for me, besides PicSpeed also has lots of nice wallpapers. There are occasion zoomed wallpaper issues with some launchers, but so far I have not experienced it on GO Launcher EX.

Good stuff!

Damn. I can't do it lol. I followed what it said but the image still zoomed. I don't know what I did wrong.

Try picspeed or wizardrii
Sent from my Transformer TF101 using xda premium

denouncer said:
Try picspeed or wizardrii
Sent from my Transformer TF101 using xda premium
Click to expand...
Click to collapse
Wizardii? for real? U can only stretch them and they look like a **** ...

PHOTOSHOP - icons.

Im trying to resize a set of icons in photoshop.
They are circular, transparent background PNG files.
As is, they are clear & smooth.
Upon import they are automatically distorted, beyond belief.
At this point there has been no editing, i have simply opened the file in photoshop.
Im not sure if its relevant but they are opening as index, locked.
Its not a universal issue, other images open fine.
Any suggestions would be welcome.
Also any other advice on what im trying to accomplish;
- resize canvas up (to enlarge transparent background)
- resize image down to original size (to give the effect of a smaller icon)
Im aiming to batch convert a group, ive already defined the actions in photoshop so if i can get around the issue within photoshop that would be my first preference.
Cheers.