Set Round Corner image in ImageView

Question

I have searched more on websites and got many suggestions like below

• Changing background with custom style to set the corner radius and padding ( Getting image as rectangle and background as rounded corner)

• Changing Given image to Bitmap by decoding the image and cropping functionality by passing this bitmap and width ( its taking more time to load)

I have checked the WhatsApp Chat history list and it has rounded corner images but its loaded with minimum time.

Could you please suggest me the best way to create listview template with rounded images as in WhatsApp?

I am expecting to change the image with rounded corner by setting the style details in xml page. (image width and height is 60 dp, also my listview having around 60 items)

References :

• https://xjaphx.wordpress.com/2011/06/23/image-processing-image-with-round-corner/
• How to Make an ImageView in Circular Shape?
• How to create a circular ImageView in Android?

res/mylayout.xml:

<ImageView
        android:id="@+id/contactssnap"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/contactssnap"
        android:background="@drawable/roundimage" />

res/drawable/roundimage.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#ffffffff" />
    <stroke
        android:width="2dp"
        android:color="#90a4ae" />
    <size
        android:height="50dp"
        android:width="50dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <corners android:radius="100dp" />
</shape>

Note: Supported Android Version from 14 to 22

Answer 1

Put imageView in CardView and set CornerRadius for CardView

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:cardCornerRadius="8dp"
        app:cardElevation="0dp">

        <ImageView
            android:id="@+id/imgTourismHr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY" />

    </android.support.v7.widget.CardView>

Answer 2

Did you check 9 patch technique in android?

If you are trying to create something like whats app bubble chats with rounded corners I suggest you to use this technique instead of using XML Bitmap Decoder.

here is an example : Link

according to this example you can use 9 patch generators to create your own custom shapes and bitmap images that automatically resize to accommodate the contents of the view and the size of the screen. Selected parts of the image are scaled horizontally or vertically based indicators drawn within the image.

Answer 3

Quick solution for anyone using Glide in loading network images, which is using RequestOptions.circleCropTransform():

Glide.with(context)
     .load(imageUrl)
     .apply(RequestOptions.circleCropTransform())
     .into(object : CustomViewTarget<ImageView, Drawable>(imageView) {
            override fun onLoadFailed(errorDrawable: Drawable?) {
            }
            override fun onResourceCleared(placeholder: Drawable?) {
            }
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                imageView.setImageDrawable(resource)
            }
        })

Answer 4

The answer from sats is worked. But RoundedBitmapDrawable cannot be applied to an ImageView with scaleType: centerCrop.

An updated.

If you are using Android API at level 21. We have a simple solution here.

1st, create drawable as background for the imageview

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="@android:color/white" />

<stroke
    android:width="1dp"
    android:color="@color/colorWhite" />
</shape>

Next, change ImageView's property setClipToOutline to true. And set rounded drawable as ImageView's background.

That's it.

In my demo, I using this method for rounded imageview. Can find it here cuberto's dialog

Answer 5

you can use the standard API's provided by Google to create a circular ImageView.

ImageView imageView = (ImageView) findViewById(R.id.circleImageView);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
roundedBitmapDrawable.setCircular(true);
imageView.setImageDrawable(roundedBitmapDrawable);

Also refer https://www.youtube.com/watch?v=zVC-YAnDlgk