Transparent Bitmap in ImageView

Question

I'd like to draw something over an existing bitmap while keeping the Bitmaps seperated. So the idea is to have a RelativeLayout and two ImageViews stacked onto each other, the top one holding the bitmap to be drawn to and the bottom one holding the bitmap with the background picture.

layout.xml (only relevant part)

<RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
    <ImageView 
        android:id="@+id/photo_mask"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/transparent" />
    <ImageView 
        android:id="@+id/photo"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

layout.java (only relevant part)

setContentView(R.layout.layout);

ImageView image = (ImageView) findViewById(R.id.photo);
image.setImageBitmap(mSomeImage);

mMaskPaint = new Paint();
mMaskPaint.setColor(0xFF0000);
mMaskPaint.setAlpha(128);

mMaskBitmap = Bitmap.createBitmap(128, 128, Bitmap.Config.ARGB_8888);
mMaskBitmap.eraseColor(Color.TRANSPARENT);

mMaskCanvas = new Canvas(mMaskBitmap);
mMaskCanvas.drawCircle(64, 64, 10, mMaskPaint);

ImageView mask = (ImageView) findViewById(R.id.photo_mask);
image.setImageBitmap(mMaskBitmap);

Note that mSomeImage is a 128x128 Bitmap, so it will match the mask Bitmap. I'm drawing a red circle in the middle of the mask Bitmap, which shows perfectly. However, the mask Bitmap doesn't show the background image through, instead showing a black background.

So I tried:

setting the background color of the ImageView to transparent
setting the pixels of the mask Bitmap to transparent using .eraseColor
setting the Bitmap config to ARGB_8888
setting the alpha of the mask ImageView

none of which seem to work. When I do a eraseColor(Color.BLUE), the background is blue with the red circle in the middle. When I set the alpha of the mask ImageView, the background is still black. When I comment out the setImageBitmap(mMaskBitmap), the background image shows.

What am I missing here?

Try to set the imageview mask background to null, see if it works. — Wenhui
why are you erasing the transparent color? it seems like the mask bitmap needs to be transparent WITH a red circle. my guess is that the default value for a pixel is ff000000 - which is black. try not erasing the transparency. — toadzky
The eraseColor method actually fills a Bitmap with that color. — Will Kru

bill bill · Accepted Answer · 2012-12-23T08:26:00

Your background is wrong. Change

ImageView mask = (ImageView) findViewById(R.id.photo_mask);
image.setImageBitmap(mMaskBitmap);

to

ImageView mask = (ImageView) findViewById(R.id.photo_mask);
mask.setImageBitmap(mMaskBitmap);

Transparent Bitmap in ImageView

1 Answers