Shading artifact beneath an ImageView with a png that have fully transparent background

Question

I'm working on a Gingerbread (2.3.3) device. I have an ImageView which contains an arrow figure and have a fully transparent background which I need to draw on some background. The problem is that there's a "shading" artifact beneath the ImageView's bounding box.
If you look closely on the following image, you'll see the artifact i'm talking about: 1

Both the foreground image and the background image have alpha channels and therefore are decoded as ARGB8888 (I double checked this by manually decoding their resources into a bitmap, print out the bitmap configuration which showed ARGB8888, and then assigning them to their respective views). I also configured the Activitiy's window to be PixelFormat.RGBA_8888 before the call to setContentView().

Please don't refer me to threads that suggest decoding the bitmap as ARGB8888 and/or set the window to be RGBA_8888, since I tried both solutions, which didn't help.

Any ideas how can I fix this issue?

EDIT:

Here's the function which sets the Window pixel format and drawables (called directly from onCreate()):

public void testTransparency() {
    getWindow().setFormat(PixelFormat.RGBA_8888);
    setContentView(R.layout.transparency_test);
    LinearLayout ll = (LinearLayout)findViewById(R.id.ll);      
    Bitmap bgBmp = BitmapFactory.decodeResource(getResources(), R.raw.bg);
    Log.d(TAG,"BG BMP Config: " + bgBmp.getConfig());
    ll.setBackgroundDrawable(new BitmapDrawable(bgBmp));
    ImageView iv = (ImageView)findViewById(R.id.iv);
    iv.setBackgroundDrawable(null);
    Bitmap arrowBmp = BitmapFactory.decodeResource(getResources(), R.raw.big_arrow);
    Log.d(TAG,"Arrow BMP Config: " + arrowBmp.getConfig());
    iv.setImageBitmap(arrowBmp);
}

And here's the (very simple) layout my test is using:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/ll"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical"  
    android:gravity="center">

<ImageView android:id="@+id/iv"
    android:layout_width="72dp"
    android:layout_height="120dp"
    /></LinearLayout>

The 'bg' resource can be found at 2
The 'big_arrow' resource can be found at "http://i.imgur.com/3V6QU.png"

EDIT 2:
I found out I can't reproduce the problem on the emulator, nor on my N1 (2.3.4) or XOOM (3.2.1). There are 2 options continuing from here:
1. The problem is device specific (Android based appliance i'm working on)
2. There's a specific problem with 2.3.4 and 32BPP framebuffer while rendering transparent PNGs on top of each other.

Thanks.

Can you post the xml of the ImageView you ae decoding it into? I have never seen this effect before on any of my graphics so don't know what might be causing it. — Kaediil, Dec 05 '11 at 15:23
Interesting, I see it in your screenshot, but not in my emulator when I run the code. — Kaediil, Dec 05 '11 at 17:04
How did you generate the screenshot that shows the darker box on the ImageView? — Kaediil, Dec 05 '11 at 18:10
Did you just try to add: android:background="@color/transparent" to the ImageView in the xml? — Kaediil, Dec 05 '11 at 19:17

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Found the bug and indeed it was a platform specific bug.

I found out when I remove the neon optimizations in the blended blitting portion of SKIA (in SkBlitRow_D32.cpp - SkBlitRow::Proc32 SkBlitRow::Factory32(unsigned flags)), the shading artifact disappears.

A useful tip for anyone who want to debug this sort of bugs:
You can always draw your view hierarchy to a bitmap (See: Android get a bitmap of a view before drawing? for example) and then use Bitmap.compress method to export the bitmap to a PNG file. This way you can obtain your view hierarchy snapshot with its alpha channel (Which doesn't appear in A DDMS screenshot since it's generated after composition). I found out this way that the alpha value within the shaded area is '1' instead of '0', creating the artifact.

score 0 · Answer 2 · answered Jul 14 '13 at 00:22

Simply setting

BackButton.setBackgroundColor(Color.TRANSPARENT);

solved my issue with an ImageButton on a HTC Desire HD with Android 2.3.5 where my button image has less height than the default background. Empiric observation; artifact did not show on a Galaxy Note 1 with Android 4.1.2

Shading artifact beneath an ImageView with a png that have fully transparent background

2 Answers2