Blending between bitmaps / preserving alpha channel?

Put your problem here if it does not fit any of the other categories.

Blending between bitmaps / preserving alpha channel?

Postby AM » Mon Jul 20, 2009 11:28 am

Hi! I'm new to this forum (well, have been lurking for a while and learned a lot familiarizing myself with android development, but this is my first post).

The problem I've run into is that I've got two bitmaps I need to blend between, whilst preserving the alpha channel in the output. Basically I need to be able to fade between the two images based on the input to a slider control from the user.

My original idea was to have a LayerDrawable containing two BitmapDrawables (one for each image) and simply setting the Alpha of the upper drawable to the value of the slider. The problem with this approach is that both bitmaps have an alpha channel (with some transparency, but identical for both pictures), which means that even when the output should have faded all the way to the upper bitmap you will see the lower one "through it".

Is there any fast way to interpolate only the color channels of my two bitmaps, leaving the alpha channel intact? I could iterate through all the pixels and perform the blending manually to create a third output Bitmap in the OnDraw method of my custom View, but I suspect that would be very slow. :(

/ Andreas Mattsson
Posts: 4
Joined: Thu Jun 18, 2009 2:57 pm


Postby hongster » Wed Jul 22, 2009 7:00 am

I am not sure if it will achieve your desired effect.

The ColorMatrixColorFilter constructor takes in a float array of size 20. This array represents a 4x5 matrix. Pass it into Paint's setColorFilter() method, and use the paint for drawing your bitmaps. (Internally Android will multiply the matrix with a color vector: [R G B A 1], which represent each color pixel from source bitmap.) Using this method, you may need to draw to the canvas twice, laying a bitmap on top of each other.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. Bitamp bitmap1;
  2. // init btimap1
  3. Bitamp bitmap2;
  4. // init btimap2
  5. Rect srcRect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  6. Rect destRect = srcRect; // assuming both bitmap same size
  8. Paint paint = new Paint();
  9. float i = 0.6; // your slider value, assuming it range from 0.0 to 1.0
  10. ColorMatrixColorFilter colorMatrix = new ColorMatrixColorFilter(new float[] {
  11.   i, 0, 0, 0, 0
  12.   0, i, 0, 0, 0
  13.   0, 0, i, 0, 0
  14.   0, 0, 0, 1, 0 // alpha channel is preserved
  15. });
  16. paint.setColorFilter(colorMatrix);
  17. canvas.drawBitmap(bitmap1, srcRect, destRect, paint);
  19. i = 1 - i; // interpolation
  20. colorMatrix = new ColorMatrixColorFilter(new float[] {
  21.   i, 0, 0, 0, 0
  22.   0, i, 0, 0, 0
  23.   0, 0, i, 0, 0
  24.   0, 0, 0, 1, 0 // alpha channel is preserved
  25. });
  26. paint.setColorFilter(colorMatrix);
  27. canvas.drawBitmap(bitmap2, srcRect, destRect, paint);
Parsed in 0.012 seconds, using GeSHi

The SDK came with sample codes in <sdk-dir>/platforms/android-1.5/samples/ApiDemos/ folder. You can use as reference for using ColorMatrix.

Canvas.drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
Paint.setColorFilter(ColorFilter filter)
Junior Developer
Junior Developer
Posts: 14
Joined: Mon Jun 29, 2009 4:51 am

Postby AM » Fri Jul 31, 2009 7:25 pm

Indeed, I do not think that will give me the effect I desired - drawing twice will still have the final output image's alpha different from the alpha channel of the two input images.

But thanks for pointing me towards the ColorMatrixColorFilter! I may actually be able to get what I wanted with that... I'll fiddle with it some more and see what I can work out. :)
Posts: 4
Joined: Thu Jun 18, 2009 2:57 pm


Return to Other Coding-Problems

Who is online

Users browsing this forum: No registered users and 5 guests