Upload

Loading icon Loading...

This video is unavailable.

Doing a 9-patch .png in Android on a spinner control

Sign in to YouTube

Sign in with your Google Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to like JoeStuffz's video.

Sign in to YouTube

Sign in with your Google Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to dislike JoeStuffz's video.

Sign in to YouTube

Sign in with your Google Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to add JoeStuffz's video to your playlist.

Uploaded on Mar 3, 2011

I'm working on a project for Clairvoyant Techno Solutions called Unitrack, an app that tracks shipments for UPS, the USPS, and FedEx. I'm still working on the UI, as you can see, and I ran into a problem where the text got shoved into the left part of the control, where it looked rather bad. Also, the arrow got stretched out too much, which as you can see, isn't the effect I desired

So, I found the solution: make a 9-patch .png. However, the process isn't documented that widely. So, here's a youtube video. I do plan on making a web page to explain the process as well. Also note that the project being demonstrated is still being worked on, and I'm still making adjustments to the UI.

The process is actually simple once you figure out how to use the tool. You basically use the tool to mark rectangular regions that you want scaled. The unmarked areas don't get scaled. This gives you the power to make your control look better. Also, I decided to demonstrate on how I rigged the scaling on a spinner, one of the trickier controls to rig a 9-patch on.

I still need to tweak the settings, but hopefully you'll get the idea. Also, I forgot that F.lux was running, so apologies for those that are running it because you'll get a double dose of F.lux dimming. Also, as you can tell, I edited the video somewhat since there's not much point in things like the 2.5 minutes of the emulator loading being recorded. Also, having Fraps running didn't help that much with the loading times and responsiveness.

Edit: It's been over a year after I did this video. The right and bottom regions are the "content area". This is where Android puts the content, like text or other images. It seems pixel-based.

Another trick I found was that you can put transparent spaces to help automatically space your controls, instead of adjusting things.

I was also pretty new at Android, so I didn't know a few of the tricks to position the controls better. Let's say I used Windows 95-like code to do it in this video

  • Category

  • License

    Standard YouTube License

Loading icon Loading...

Loading icon Loading...

Loading icon Loading...

Loading icon Loading...

Ratings have been disabled for this video.
Rating is available when the video has been rented.
This feature is not available right now. Please try again later.

Loading icon Loading...

Loading...
Working...
to add this to Watch Later

Add to