Set image with rounded corners into ImageView

Question

I have a ListView with contact images and names or numbers. Now I want to round the corners of this contact image.

public View getView(final int position, View convertView, ViewGroup parent) {
    View row = convertView;
    UserHolder holder = null;
    Log.d("main", "pos:" + "" + position);

            if (row == null) {
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        row = inflater.inflate(layoutResourceId, parent, false);
        holder = new UserHolder();
        holder.Name = (TextView) row.findViewById(R.id.name);

        holder.Number = (TextView) row.findViewById(R.id.number);

        holder.img=(ImageView) row.findViewById(R.id.image);


        Typeface face=Typeface.createFromAsset(context.getAssets(),"helve.ttf");

        holder.Name.setTypeface(face);
        //holder.Number.setTypeface(face);

        //bit = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);     
       //

        //holder.img.setImageBitmap(getRoundedCornerBitmap(bit, 40));

        row.setTag(holder);
    } else {
        holder = (UserHolder) row.getTag();
    }
    User user = data.get(position); 

    holder.Name.setText(user.getName());
    holder.img.setImageBitmap(user.getbi());
    //holder.img.setImageBitmap(roundCornerImage(BitmapFactory.decodeResource(user.getbi(), R.drawable.ic_launcher),60));
    holder.Number.setText(user.getNumber());




    // Give Different Back Ground To List View---------------------------------------------

    if ((position % 2) == 0) {
        row.setBackgroundResource(R.drawable.list_dark);
    } else {
        row.setBackgroundResource(R.drawable.list_light);
    }




    Log.d("main", "pos:" + "" + position);

    return row;

}



static class UserHolder {
    TextView Name,Number;
    ImageView img;

}

How can I add rounded corners to this image?. I'm a bit confused what kind of change I have to do.

Answer 1

hi please use this custom imageview

public class RoundedImageView extends ImageView {

public RoundedImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

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

@SuppressLint("Instantiatable")
public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();

    Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;
    if (bmp.getWidth() != radius || bmp.getHeight() != radius)
        sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
    else
        sbmp = bmp;
    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
            Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(sbmp.getWidth() / 2 + 0.7f,
            sbmp.getHeight() / 2 + 0.7f, sbmp.getWidth() / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}

}

Answer 2

If you are trying to make your imageview as rounded corner

You can achieve this multiple ways

Method 1:: Use a background drawable which is rounded image(You can use nine-patch)

Method 2:: You can use these links

• Post1
• post2

---

Here is an demo answer <Source>

just use XML in case you have some space around the image:

Create a bordered shape with transparent content like this:

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

Then in a RelativeLayout you can first place your image and then in the same location above the shape with another ImageView. The cover-shape should be larger in size by the amount of the border width. Be careful to take a larger corner radius as the outer radius is defined but the inner radius is what covers your image.

Hope it helps somebody, too.

Edit as per CQM request the relative layout example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageToShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imgCorners"
        android:layout_alignLeft="@+id/imgCorners"
        android:layout_alignRight="@+id/imgCorners"
        android:layout_alignTop="@+id/imgCorners"
        android:background="#ffffff"
        android:contentDescription="@string/desc"
        android:padding="5dp"
        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/imgCorners"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@string/desc"
        android:src="@drawable/corners_white" />

</RelativeLayout>

---

Hope it helps

Answer 3

Dude here is the solution..

https://github.com/MostafaGazar/CustomShapeImageView For more detail https://coderwall.com/p/hmzf4w

Use this library u will find the circular shape in this library and also easy use.

U can also make your custom shape to this library like cloud etc. this library supports SVG file format and they made the SVG file of Rounded corner Imageview.

Just use and let me know if there is any problem