android - Transparency made from interstection -

pulling hear out on one. have background bitmap want overlay bitmap on top of has transparent cutouts. have no problem doing if cutout basic shape, need cutout intersection of 2 circles (sort of leaf shape). tried making third bitmap produce cutout template can't clean representation of cutout let alone work cutout template.

anyone know how this? here (simplified) attempt:

@override public void draw(canvas canvas) {     float w = canvas.getwidth();     float h = canvas.getheight();      // used set proportions     float off = 300f;      paint paint = new paint();      // make background bitmap yellow green gradient     bitmap bitmapbkg = bitmap.createbitmap((int) w, (int) h, bitmap.config.argb_8888);     canvas canvasbkg = new canvas(bitmapbkg);     paint.reset();     paint.setshader(new lineargradient(0, h/2 - off, 0, h/2 + off, color.yellow, color.green, shader.tilemode.clamp));     canvasbkg.drawrect(new rectf(0, 0, w, h), paint);      // make overlay bitmap red magenta gradient have cutouts     bitmap bitmapover = bitmap.createbitmap((int) w, (int) h, bitmap.config.argb_8888);     canvas canvasover = new canvas(bitmapover);     paint.reset();     paint.setshader(new lineargradient(0, h/2 - off, 0, h/2 + off, color.red, color.magenta, shader.tilemode.clamp));     canvasover.drawrect(new rectf(0, 0, w, h), paint);      // make bitmap of intersecting circles used cutout shape     bitmap bitmapcut = bitmap.createbitmap((int) w, (int) h, bitmap.config.argb_8888);     canvas canvascut = new canvas(bitmapcut);      paint.reset();     paint.setcolor(color.black);     //paint.setxfermode(new porterduffxfermode(porterduff.mode.xor));     canvascut.drawcircle(w / 2 - (off / 2 ), h / 2, off, paint);      paint.reset();     paint.setcolor(color.black);     paint.setxfermode(new porterduffxfermode(porterduff.mode.xor));     canvascut.drawcircle(w / 2 + (off / 2), h / 2, off, paint);      // apply cutout overlay     paint.reset();     paint.setcolor(color.black);     paint.setxfermode(new porterduffxfermode(porterduff.mode.dst_atop));     canvasover.drawbitmap(bitmapcut, 0, 0, paint);      // draw background , overlay onto main canvas     paint.reset();     paint.setcolor(color.black);     canvas.drawbitmap(bitmapbkg, 0, 0, paint);     canvas.drawbitmap(bitmapover, 0, 0, paint); } 

here image of getting:

what trying have outside portion red-magenta; eye-shape in middle should yellow-green.

turns out trick adding yet layer.

    // make secondary overlay cuts out whole circles     bitmap bitmapover2 = bitmap.createbitmap((int) w, (int) h, bitmap.config.argb_8888);     canvas canvasover2 = new canvas(bitmapover2);     paint.reset();     paint.setshader(new lineargradient(0, h / 2 - off, 0, h / 2 + off, color.red, color.magenta, shader.tilemode.clamp));     canvasover2.drawrect(new rectf(0, 0, w, h), paint);     paint.reset();     paint.setcolor(color.black);     paint.setxfermode(new porterduffxfermode(porterduff.mode.clear));     canvasover2.drawcircle(w / 2 - (off / 2), h / 2, off, paint);     canvasover2.drawcircle(w / 2 + (off / 2), h / 2, off, paint); 

applying so:

    // draw background , overlay onto main canvas     paint.reset();     paint.setcolor(color.black);     canvas.drawbitmap(bitmapbkg, 0, 0, paint);     canvas.drawbitmap(bitmapover2, 0, 0, paint);     canvas.drawbitmap(bitmapover, 0, 0, paint); 

basically bit of trick. draws mid-tier backdrop twice, once full circle cutouts , other eye-shape cutout. 2 fit right pull off desired effect.

of course @rotwang, right. using path , arcto() better solution. reason avoided approach b/c arcto() api 21+ feature. far i've manged keep api 17+. if else provide arcto() solution completeness cool compare.