How to covert imageview into different shape?

Question

Actually I wanna convert the image into the mentioned shape in picture . I've tried a lot of similar questions in SO but none of them were helpful. You may advise to use drawable in foreground of imageView but I've gotta set the foreground programmatically which is valid only api>23 . Can anyone please help me to solve this issue?

You can see in image that there's background of image . I wanna convert the image into that shape programmatically.

Even I tried to use Gradient Drawable but it was futile

Code:

GradientDrawable gradientDrawable= new GradientDrawable();
        float[] radii = new float[8];
        radii[0] = 15; // Goes clockwise, so this is the top left corner start position.
        radii[1] = 15; // top left end position.
        radii[2] = 15;
        radii[3] = 15;
        radii[4]=0;
        radii[5]=0;
        radii[6] = 15;
        radii[7] = 15;
        gradientDrawable.setCornerRadii(radii);
        holder.img.setBackgroundDrawable(gradientDrawable);

`setBackgroundDrawable` is deprecated. Instead use `setBackground`. — Kunu, May 01 '18 at 14:31

wolfenrain · Accepted Answer · 2018-05-01T13:57:20.327

1

You could change the onDraw method of your imageView class by applying a clipPath:

@Override
protected void onDraw(Canvas canvas) {
    float[] radii = new float[8];
    radii[0] = radius; // Goes clockwise, so this is the top left corner start position.
    radii[1] = radius; // top left end position.
    radii[2] = radius;
    radii[3] = radius;
    // Skipping 4 and 5 because thats the bottom right corner.
    radii[6] = radius;
    radii[7] = radius;
    Path clipPath = new Path();
    clipPath.addRoundRect(new RectF(0, 0, this.getWidth(), this.getHeight()), radii, Path.Direction.CW);
    canvas.clipPath(clipPath);
    super.onDraw(canvas);
}

refs:

edited May 01 '18 at 13:57

answered May 01 '18 at 13:42

wolfenrain

309
1
9

Sir thanks a lot for your answer but it's showing can't resolve constructor for this line **clipPath.addRoundRect(new RectF(0, 0, this.getWidth(), this.getHeight(), radii, Path.Direction.CW);** – Srinivas Nahak May 01 '18 at 13:47
@user8027365 I forgot a bracket to close off the `RectF`, fixed it in the example. – wolfenrain May 01 '18 at 13:50
Hmm, and you added it to your ImageView extended class? Or are you creating your ImageView in a different way? – wolfenrain May 01 '18 at 14:08
it's not changing anything – Srinivas Nahak May 01 '18 at 14:11

Kunu · Answer 2 · 2018-05-01T14:13:56.787

0

If you want to create a drawable image then you can set a different radius for a different corner like

<corners
    android:topRightRadius="15dp"
    android:topLeftRadius="15dp"
    android:bottomLeftRadius="15dp"/>

Apart from that, you can use GradientDrawable to create a background image and use setCornerRadii for variable corner radius.

Example for GradientDrawable

GradientDrawable gradientDrawable= new GradientDrawable();
gradientDrawable.setCornerRadii(15,15,15,15,15,15,0,0);

void setCornerRadii (float[] radii)

Specifies radii for each of the 4 corners. For each corner, the array contains 2 values, [X_radius, Y_radius]. The corners are ordered top-left, top-right, bottom-right, bottom-left. This property is honored only when the shape is of type RECTANGLE.

for setting color use gradientDrawable.setColor(YOUR_COLOR) method and you can use multiple color there for gradient look.

Here (15,15,15,15,15,15,0,0) suggest X radius and Y radius for all 4 corner starting from top left.

edited May 01 '18 at 14:13

answered May 01 '18 at 13:46

Kunu

5,078
6
33
61

could you please elaborate how to use **Gradient Drawable** for my case @Kunu – Srinivas Nahak May 01 '18 at 13:49
should i set this gradient as my background ? @Kunu – Srinivas Nahak May 01 '18 at 14:15
If you use single color and it will be same as normal background. – Kunu May 01 '18 at 14:16
It's not chaning anything sir – Srinivas Nahak May 01 '18 at 14:21
Can you update your question with your updated code? – Kunu May 01 '18 at 14:22
`setBackgroundDrawable` is deprecated. Instead use `setBackground`. – Kunu May 01 '18 at 14:27

score 0 · Answer 3 · answered May 01 '18 at 15:25

Finally I solved my problem by taking reference from from this and this

Finally the ImageView Class looks like:

public class RoundedImageView extends ImageView {

private Path mMaskPath;
private Paint mMaskPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private int mCornerRadius = 10;

public RoundedImageView(Context context) {
    super(context);

    init();
}

public RoundedImageView(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);

    init();
}

public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    init();
}

private void init() {
    ViewCompat.setLayerType(this, ViewCompat.LAYER_TYPE_SOFTWARE, null);
    mMaskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}


public void setCornerRadius(int cornerRadius) {
    mCornerRadius = cornerRadius;
    generateMaskPath(getWidth(), getHeight());
    invalidate();
}

@Override
protected void onSizeChanged(int w, int h, int oldW, int oldH) {
    super.onSizeChanged(w, h, oldW, oldH);

    if (w != oldW || h != oldH) {
        generateMaskPath(w, h);
    }
}

private void generateMaskPath(int w, int h) {
    mMaskPath = new Path();
    float[] radii = new float[8];
    radii[0] = 20; // Goes clockwise, so this is the top left corner start position.
    radii[1] = 20; // top left end position.
    radii[2] = 20;
    radii[3] = 20;
    // Skipping 4 and 5 because thats the bottom right corner.
    radii[6] = 20;
    radii[7] = 20;
    mMaskPath.addRoundRect(new RectF(0,0,w,h), radii, Path.Direction.CW);
    mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);
}

@SuppressLint("WrongConstant")
@Override
protected void onDraw(Canvas canvas) {
    if(canvas.isOpaque()) { // If canvas is opaque, make it transparent
        canvas.saveLayerAlpha(0, 0, canvas.getWidth(), canvas.getHeight(), 255, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
    }

    super.onDraw(canvas);

    if(mMaskPath != null) {
        canvas.drawPath(mMaskPath, mMaskPaint);
    }
}
 }

How to covert imageview into different shape?

3 Answers3