General Android semi transparent bug

Question

I use anti aliasing to make my images more smooth. When using anti aliasing a dark border will be drawn around the images. This happens because Android uses the color black and mixes it with the yellow from the images. This is a gernal problem! When I draw a rectangle and set the alpha value to 127 the image also gets quiet dark. Instead of using black Android should use white to draw the transparency.

Is there any workaround how I can handles this problem?

Example sourcecode for drawing a semi transparent rectangle to a canvas. The rectangle is dark as well but it should be bright.

Bitmap bmp = Bitmap.createBitmap(200, 200, Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
Paint rPaint = new Paint();
rPaint.setColor(Color.parseColor("#F7E836"));
rPaint.setAlpha(127);
rPaint.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, 100, 100, rPaint);

The images are SVG graphics which are rendered with the following library: http://code.google.com/p/svg-android/

I think I found the bug. The problem is the SurfaceView. Its background is black. The same semi-transparent bug occurs when I use the code above and display it on an ImageView and the background color of the UI element behind the ImageView is black. The background color of the SurfaceView is always black. If I change this to white with setBackgroundColor, the SurfaceView gets white, but the white background will be drawn OVER all my other images drawn with OpenGL. I think these must be switched. First the background color should be drawn and than the OpenGL stuff.

Answer 1

Post links to the original source images and show how your anti-aliasing them (code).

When an image is anti-aliased the algorithm will insert colors between the colors which make up the edges. So with your yellow star image, if the background was white, it will attempt to add pixels around the edge which are between the yellow and white (a lighter shade of yellow). This is what 'smooths' the image.

But, if the image has an indexed color space, those lighter shades of yellow probably don't exist in the images pallet and as a result, you can get almost any other color in its place, whatever color in the index lands on the index value calculated.

The image in your question is an indexed png and hence has this problem.

If this is the issue, then you need to convert your original source images to an non-indexed color space, or anti-alias them prior to indexing the images which doesn't work well if the images need to be scaled by your application or if you need to anti-alias against various different backgrounds.

The other thing that could be happening is that your anti-aliasing against a different background than you think you are, specifically the yellow star is anti-aliased correctly if the background were black, posting your code is the easiest way to figure this out.