Image Corner Radius

Question

Is there any way to round the corners of an ImageView through xml layout? And even if not, what are the ways we can achieve that?

PS: The image urls are being fetched from an API. Not from drawable folder

try sample from this link: [https://stackoverflow.com/questions/20743859/imageview-rounded-corners](https://stackoverflow.com/questions/20743859/imageview-rounded-corners) — , May 29 '19 at 05:56
Possible duplicate of [ImageView rounded corners](https://stackoverflow.com/questions/20743859/imageview-rounded-corners) — Basi, May 29 '19 at 05:58

score 1 · Accepted Answer · answered May 29 '19 at 06:05

1

by using Glide library

use

Glide
  .with(context)
  .load(url)
  .apply(
      RequestOptions()
        .circleCrop())
  .into(imageView)

answered May 29 '19 at 06:05

Basi

3,009
23
28

so you are using api, use glide – Basi May 29 '19 at 06:08
I am using Picasso. Can it be done with that? Or else I'll use Glide. And anyways, this has been in my head for a while now, should I be using Picasso or Glide – Rohan Vaish May 29 '19 at 06:24

Basi · Answer 2 · 2019-05-29T06:07:15.933

0

You can achieve it using custom views like this

public class RoundImageView extends ImageView {

    private float mRadius = 18.0f;
    private Path mPath;
    private RectF mRect;

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

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

    public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mPath = new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        mRect = new RectF(0, 0, this.getWidth(), this.getHeight());

        mPath.addRoundRect(mRect, mRadius, mRadius, Path.Direction.CW);

        canvas.clipPath(mPath);

        super.onDraw(canvas);
    }
}

and use it in your XML

<your_pkag.RoundImageView
     android:id="@+id/imgView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:src="@drawable/image" />

edited May 29 '19 at 06:07

answered May 29 '19 at 05:57

Basi

3,009
23
28

How is the java file RoundImageView being used in xml? – Rohan Vaish May 29 '19 at 06:00
like this `` – Basi May 29 '19 at 06:03
Also, I am getting images from my api, so `android:background="@drawable/image" ` will not work? Or can it? Because the image urls are coming from the API and I set it in the ImageView. So I don't think it will be possible to set it as a background. – Rohan Vaish May 29 '19 at 06:04
remove `android:background="@drawable/image"` and use `android:src="@drawable/image"`. i updated my answer – Basi May 29 '19 at 06:06
Okay. Thanks, I'll try that. – Rohan Vaish May 29 '19 at 06:16

score 0 · Answer 3 · answered May 29 '19 at 08:14

I don't know what you want to make. But for the borders.

You can create a drawable file like below.

line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <stroke android:width="2dp" android:color="#000" />
</shape>

activity_xxx.xml

    <ImageView
        android:layout_height:"200dp"
        android:layout_width:"200dp"
        android:background:"@drawable/line.xml"
    />

Image Corner Radius

3 Answers3