Search code examples
androidimageview

Rounded scaled ImageView from right side only


How can I round an image that is scaled (CenterCrop) from right-top and right-bottom (all right side) only.

Sample This is what I am trying to do.

I found that class that can do similar (TopRoundedImage, thanks to the author) but for top-left and top-right. I am trying to change it but I guess I am still doing it wrong.

Also, I am using Glide to request the image from Internet then I want to round right side only.

I have tried to use a background drawable, but it doesn't work (I read it is because of the scale).

public class RightRoundedImageView extends AppCompatImageView
{
    private final RectF roundRect = new RectF();
    private float rect_radius = 7;
    private final Paint maskPaint = new Paint();
    private final Paint zonePaint = new Paint();

    public RightRoundedImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init();
    }

    public RightRoundedImageView(Context context)
    {
        super(context);
        init();
    }

    private void init()
    {
        maskPaint.setAntiAlias(true);
        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        zonePaint.setAntiAlias(true);
        zonePaint.setColor(Color.WHITE);
        float density = getResources().getDisplayMetrics().density;
        rect_radius = rect_radius * density;
    }

    public void setRectAdius(float radius)
    {
        rect_radius = radius;
        invalidate();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom)
    {
        super.onLayout(changed, left, top, right, bottom);
        int w = getWidth();
        int h = getHeight();
//        roundRect.set(0, 0, w, h + rect_radius);//round top
        roundRect.set(0, 0, w + rect_radius, h); //round left
//        roundRect.set(0, 0, w - rect_radius, h); //round all


    }

    @Override
    public void draw(Canvas canvas)
    {
        canvas.saveLayer(roundRect, zonePaint, Canvas.ALL_SAVE_FLAG);
        canvas.drawRoundRect(roundRect, rect_radius, rect_radius, zonePaint);
        canvas.saveLayer(roundRect, maskPaint, Canvas.ALL_SAVE_FLAG);
        super.draw(canvas);
        canvas.restore();
    }

}

If anyone know or can help, it would be appreciated. Thanks.


Solution

  • you can use drawable shape for this :

    <?xml version="1.0" encoding="UTF-8"?>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="#FFFFFF"/>
            <stroke android:width="3dip" android:color="#B1BCBE" />
            <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="10dp"
                android:topLeftRadius="0dp" android:topRightRadius="10dp"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    
    imageView.setBackground(this.getResources().getDrawable(R.drawable.my_shape));
    

    also check this link question how-to-make-an-imageview-with-rounded-corners