3

I have an image, a half circle frame image and I need to put that image inside this frame. But I need to apply mask to my image so it is only displayed inside frame.

For example this is my image:

enter image description here

And my desired result should be like that:

enter image description here

The red frame also an image view which inside is transparent.

How can I achieve this in Android?

Figen Güngör
  • 12,169
  • 14
  • 66
  • 108

1 Answers1

3

There's a great tutorial on Styling Android blog in four parts that explains how you can achieve this.

Edit:

I've edited the code in part two of the tutorial and created the effect:

private Bitmap processImage(Bitmap bitmap) {
    Bitmap bmp;

    bmp = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(bitmap,
            BitmapShader.TileMode.CLAMP,
            BitmapShader.TileMode.CLAMP);

    float radius = bitmap.getWidth() / 2f;
    Canvas canvas = new Canvas(bmp);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(shader);

    RectF rect = new RectF(-bitmap.getWidth() / 2f, 0,
            bitmap.getWidth() / 2f, bitmap.getHeight());
    canvas.drawOval(rect, paint);

    return bmp;
}

I just replaced the drawRoundRect at the end of the code with drawOval and it essentially draws a circle that half of it is out of canvas.

Ashkan Sarlak
  • 7,124
  • 6
  • 39
  • 51
  • Thanks but how can I place the frame image onto this? Can I give width and height to this bitmap and then a little bigger width and height for frame? – Figen Güngör Sep 09 '15 at 12:17
  • Make your bitmap a bit bigger for the red frame, then before drawing the final image, draw the red frame: `canvas.drawOval(rectRedFrame, paintRedFrame);` `canvas.drawOval(rect, paint);` – Ashkan Sarlak Sep 09 '15 at 12:22
  • Thanks again, but I have another question. Why fitXY doesnt apply to inner bitmap image? – Figen Güngör Sep 09 '15 at 13:38
  • Okey, I solved my issue by changing this line: RectF rect = new RectF(-bitmap.getWidth() , 0, bitmap.getWidth() , bitmap.getHeight()); – Figen Güngör Sep 09 '15 at 13:46