I want to do a round corner ImageView. But I want it have background color (e.g., #000). With current solutions (either build an extended round corner view or paint a round corner bitmap) the background property will spoil the effect, as the view will be in a black rectangle (see the below image).
Is it possible to realize such a view that the background zone is also round cornered?
PS, why I want a background color: I allow users to upload non-square images but my image view zone is square, so I want a color to "align" them (see the below image - I want the red part to be round).
Rounded corners can be done using Lollipop's outlines and pre-Lollipop paths. See:
Prepare masks
if (cornerRadius > 0) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { setClipToOutline(true); setOutlineProvider(ShadowShape.viewOutlineProvider); } else { cornersMask = new Path(); cornersMask.addRoundRect(new RectF(0, 0, getWidth(), getHeight()), cornerRadius, cornerRadius, Path.Direction.CW); cornersMask.setFillType(Path.FillType.INVERSE_WINDING); } } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) setOutlineProvider(ViewOutlineProvider.BOUNDS); }
draw(Canvas) method
if (cornerRadius > 0 && getWidth() > 0 && getHeight() > 0 && Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT_WATCH) { int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG; int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, saveFlags); super.draw(canvas); paint.setXfermode(pdMode); canvas.drawPath(cornersMask, paint); canvas.restoreToCount(saveCount); paint.setXfermode(null); } else { super.draw(canvas); }
and the missing viewOutlineProvider
viewOutlineProvider = new ViewOutlineProvider() { @Override public void getOutline(View view, Outline outline) { ShadowShape shadowShape = ((ShadowView) view).getShadowShape(); if (shadowShape == RECT) { outline.setRect(0, 0, view.getWidth(), view.getHeight()); } else if (shadowShape == ROUND_RECT) { outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), ((CornerView) view).getCornerRadius()); } else if (shadowShape == CIRCLE) { outline.setOval(0, 0, view.getWidth(), view.getHeight()); } } };
And the image:
You can mess with this code in any way you want. You can cut the image and the background to any shape, separately or together. For more details check out the code on github.
