Mach Banding images in Android

I used a linear gradient image for a background and in Photoshop (and everything else) it looks nice and smooth but when I displayed it in the emulator is was banded! What's worse, it's banded on my actual phone - a Droid Incredible. I'm running 2.2 both in emulation and on the phone.

Here's a sample - original on the le开发者_运维百科ft, Android'ed version on the right: http://pnart.com/temp/AndroidMach.jpg

This has the appearance of Android imposing some bit-depth limitation. What's going on and how do I fix it?

Thanks in advance!

I had the same problem and did some searching on Google. One of the sites I found suggested I put the gradient image in res/raw/ and load the image when needed. I tried this and it worked.

From what little I understand, any image you place under "drawable" will be processed by AAPT and it isn't guaranteed the final images will be the same as the ones you are putting into it. In this case, it decided to shrink the PNG gradient image to a smaller palette to shrink the size of the final APK. If someone else has a better (or more correct) explanation, I'd love to hear.

-Dan

just try this: get down the width and height to the screen resolution of the device (eg: for moto droid: w:320px and h:480px and in photoshop keep the resolution to 200 dpi or above)

Regards, Mistry Hardik

If there isn't any special reason for using an image to get a gradient I highly recommend looking up the Shape Drawable as it supports gradients which should (I haven't tried it but I assume) allow lossless scaling.

First of all, the color depth of phone's screen is much worse than that of your PC. On your PC you have 8-8-8 bits depth for R-G-B but for phones it's typical to have 5-6-5 depth. It means that any fine gradients/shades that look good on PC will be distorted when displayed on the device because its color depth is just not enough, physically.

Therefore, designer's rule №1: avoid fine shades and fine gradients in your designs.

But if you have to then, of course, you may try the following, but you've been warned!

1) For runtime-generated gradients: use dithering, like this:

setContentView(R.layout.screen_dashboard);
findViewById(R.id.layout).getBackground().setDither(true);

2) For graphics assets: always apply a 5-6-5 filter before saving png. Here is a good article with examples. Applying 5-6-5 filter ensures that color depth of your png is within device capabilities, and decreases png size too.

Seems like it might be because it's scaling the image to fit the screen. When non-vector gradients are scaled they often get that "banded" look. Try making a gradient that's the same size as the screen you're targeting, or try changing the ImageView (or whatever) that is displaying the image to make sure it's not stretching or scaling the image.

EDIT

In my opinion the best solution would be to create your gradient for your background at runtime have a look at GradientDrawable