Android 9 patches and scaling

Yesterday I decided to pretty up the placeholder UI of my civ/PCG (procedural content generation) map game. I wanted to have some buttons with a background image and, thinking I knew what I was doing, created some ninepatches:

Now, this is a place holder too, but it does kinda suggest what I want to do: have a button with a background so it looks like a wax seal. The activity it’s on has a nice nine patch parchment scroll, so I thought this would look quite nice.

Enter a couple of hours of frustration.

I could not, for the life of me, get the button background to scale correctly. The image was there, the text was there, the text of the button was on the image, centered in the way the content should be. But the background image of the button was scaled WAY too large!

Why would my button image background, which I had taken the trouble to turn into a proper ninepatch, not correctly scale?

After much google-fu, much swearing and even wierd combinations of LinearLayouts, FrameLayouts, ImageViews and TextViews, the solution was depressingly simple: my nine-patch was too large.
It turns out nine patches (those .9.png files) scale up really well. BUT THEY DO NOT SCALE DOWN! So my 256×256.9.png looked HUGE and drowned the centered text.

Making it much smaller (64×64), and all of the sudden everything works perfectly: the image scales and wraps my text very well.

So, to answer the question: “why does my android button image background not scale properly?”, it is because ninepatch images do not scale down.

This entry was posted in android, art and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s