Blending two images

All your problems with Audio, Video and Images.

Blending two images

Postby Opwiz » Fri Oct 15, 2010 3:51 pm

Hi there, this is my first post on this nice forum. I'm developing an app where I have a image gallery and I wish to make it more stylish by creating a jagged border around each image, see this link for the effect I'm going for: http://www.easyelements.com/jagged-border.html. I'm not that familiar with image manipulation, but I suppose the effect is done by blending two images somehow (alpha blending?). Can this be done? I'm using standard ImageViews/Bitmaps to render the images.

Thanks
Opwiz
Opwiz
Freshman
Freshman
 
Posts: 4
Joined: Fri Oct 15, 2010 3:39 pm

Top

Re: Blending two images

Postby Tage Nielsen » Sat Oct 16, 2010 6:55 am

LayerDrawables and ImageViews play well together, and a gallery is a series of ImageViews. The following should get you pointed in a good direction.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. ImageView imageView
  2. BitmapDrawable photo, overlay1;
  3. ShapeDrawable overlay2;  // the jagged border could be defined as a shape
  4. // initialize above objects, then...
  5. LayerDrawable layers = new LayerDrawable(2);
  6. layers[0] = (BitmapDrawable) photo;
  7. layers[1] = (BitmapDrawable) overlay1 ;   // or (ShapeDrawable) overlay2;
  8. imageView.setImageDrawable(layers);
Parsed in 0.033 seconds, using GeSHi 1.0.8.4
Tage Nielsen
Junior Developer
Junior Developer
 
Posts: 17
Joined: Wed Oct 13, 2010 8:02 pm

Re: Blending two images

Postby Opwiz » Sat Oct 16, 2010 12:18 pm

Tage Nielsen wrote:LayerDrawables and ImageViews play well together, and a gallery is a series of ImageViews. The following should get you pointed in a good direction.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. ImageView imageView
  2. BitmapDrawable photo, overlay1;
  3. ShapeDrawable overlay2;  // the jagged border could be defined as a shape
  4. // initialize above objects, then...
  5. LayerDrawable layers = new LayerDrawable(2);
  6. layers[0] = (BitmapDrawable) photo;
  7. layers[1] = (BitmapDrawable) overlay1 ;   // or (ShapeDrawable) overlay2;
  8. imageView.setImageDrawable(layers);
Parsed in 0.032 seconds, using GeSHi 1.0.8.4


Thanks for the suggestion. I ended up doing it in another way. I found a excellent tutorial here: http://android.cyrilmottier.com/?p=230, (it's in french - use google translate if you can't read). In short you draw the image on a bitmap using a canvas and then draw the jagged border bitmap mask on top using a paint with PorterDuffXfermode.

Edit: fixed link
Opwiz
Freshman
Freshman
 
Posts: 4
Joined: Fri Oct 15, 2010 3:39 pm

Top

Return to Multimedia Problems

Who is online

Users browsing this forum: Google Feedfetcher and 33 guests