ImageView rounded corners

java android xml imageview rounded-corners

148,515

Solution 1

I use Universal Image loader library to download and round the corners of image, and it worked for me.

ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(thisContext)
            // You can pass your own memory cache implementation
           .discCacheFileNameGenerator(new HashCodeFileNameGenerator())
           .build();

DisplayImageOptions options = new DisplayImageOptions.Builder()
            .displayer(new RoundedBitmapDisplayer(10)) //rounded corner bitmap
            .cacheInMemory(true)
            .cacheOnDisc(true)
            .build();

ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.init(config);
imageLoader.displayImage(image_url,image_view, options );

Solution 2

SIMPLEST APPROACH:

Create an xml file rounded_fg.xml under res/drawable/ folder of your app. The content of rounded_fg.xml is as follows,

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="2"
    android:shape="ring"
    android:thicknessRatio="1"
    android:useLevel="false">
    <gradient
        android:type="radial"
        android:gradientRadius="8dp"
        android:endColor="@color/white"
       />
</shape>

You can match endColor with ImageView container layout background & gradientRadius may be any value as per your requirements (<=36dp).

Now use this drawable as foreground for your imageview as follows,

 <ImageView
     android:layout_width="55dp"
     android:layout_height="55dp" 
     android:foreground="@drawable/rounded_fg" />

Works perfect with square images and/or imageview.

Square Image/ImageView:

Rectangular Image/ImageView:

Foreground applied over a button:

Solution 3

Now we no need to use any third party lib or custom imageView

Now We can use `ShapeableImageView`

SAMPLE CODE

First add below dependencies in your build.gradle file

implementation 'com.google.android.material:material:1.2.0-alpha05'

Make ImageView Circular from coding

Add ShapeableImageView in your layout

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/myShapeableImageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/nilesh" />

Kotlin code to make ImageView Circle

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.shape.CornerFamily
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


//        <dimen name="image_corner_radius">50dp</dimen>

        val radius = resources.getDimension(R.dimen.image_corner_radius)
        myShapeableImageView.shapeAppearanceModel = myShapeableImageView.shapeAppearanceModel
            .toBuilder()
            .setTopRightCorner(CornerFamily.ROUNDED, radius)
            .setTopLeftCorner(CornerFamily.ROUNDED, radius)
            .setBottomLeftCorner(CornerFamily.ROUNDED, radius)
            .setBottomRightCorner(CornerFamily.ROUNDED, radius)
            .build()

            // or  You can use setAllCorners() method

        myShapeableImageView.shapeAppearanceModel = myShapeableImageView.shapeAppearanceModel
            .toBuilder()
            .setAllCorners(CornerFamily.ROUNDED, radius)
            .build()


    }
}

OUTPUT

Make ImageView Circle from using a style

First, create a below style in your style.xml

<style name="circleImageViewStyle" >
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

Now use that style in your layout like this

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/myShapeableImageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="20dp"
    app:shapeAppearanceOverlay="@style/circleImageViewStyle"
    app:srcCompat="@drawable/nilesh" />

OUTPUT

Please find the complete exmaple here how to use ShapeableImageView

Solution 4

you can do by XML like this way

<stroke android:width="3dp"
        android:color="#ff000000"/>

<padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"/> 

<corners android:radius="30px"/>

and pragmatically you can create rounded bitmap and set in ImageView.

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
    bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);

final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);

return output;
}

For Universal lazy loader you can use this wat also.

DisplayImageOptions options = new DisplayImageOptions.Builder()
        .displayer(new RoundedBitmapDisplayer(25)) // default
        .build();

Solution 5

NEW ANSWER Use Glide library for this. This lib is also recommended by Google. See How to round an image with Glide library?

OLD ANSWER Just add that image in a cardView and set cardView's elevation on 0dp...will do the trick (in my case was a viewPager with images - just replace the viewPager with an ImageView):

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:cardElevation="0dp">

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

View more solutions

148,515

Author by

FIXI

Updated on May 12, 2020

Comments

FIXI about 4 years

I wanted image to have rounded corners. I implement this xml code and use this in my image view. but image overlap the shape. I am downloading the image through async task.

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >
 <corners android:radius="20dip" />
</shape>


<ImageView
    android:id="@+id/trVouchersImage"
    android:layout_width="55dp"
    android:layout_height="55dp"
    android:layout_marginLeft="8dp"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_alignParentLeft="true"
    android:background="@drawable/ash_arrow"
 />

FIXI over 10 years

I try second code but the problem is that i download the image and then save it in bitmap, then i round the bitmap and set bitmap for image view. Image view is part of table layout.At first install it did not round the image. but after that it works. why its not working for 1st time?
Sanket Kachhela over 10 years

are you using UniversalImageLoader library?
FIXI over 10 years

i include library but dont know which method to use to round corners
Sanket Kachhela over 10 years

if yes than you can set radius in using that library. and if any other library than you are just displaying it as rounded. so convert bitmap first than save it as cache in SDCard.
Pravinsingh Waghela over 8 years

I require the image to be in a circle? what should be the values of corners in that case?
zionpi over 8 years

notice that RoundedBitmapDisplayer will give you OOM exception.
eddie over 8 years

Wow, i'm surprised that this worked! I wonder how does performance-wise
Alexandru Circus over 8 years

I think it should work for pre-lollipop as well, because you use the v7 compat lib
Naveed Ahmad almost 8 years

This will round the background, but the image inside the imageView is still rectangular. not the suitable answer.
Moses Aprico almost 8 years

You need to define app:contentPadding="0dp" in the CardView. Otherwise, it will have default padding.
Andrew Quebe over 7 years

This merely sets a background with rounded corners...if you remove the colors and the padding, the image isn't altered.
Alexandru Circus about 7 years

@Marchy - now I would suggest to use Glide library(also recommended by Google) for achieving this effect. stackoverflow.com/questions/25278821/…
Leon about 7 years

how to make Rectangular, can you give a sample?
Nihal about 7 years

If ImageView layout height & width are not same then you'll get a rectangular view as shown in pic above. This technique won't give perfectly rounded corners for rectangular view. It's best with square view. That's why I have given the comparison. If it's fine for you then go for it.
Parth Anjaria over 5 years

can we use this for rectangular view with rounded corners? @Nihal
Nihal over 5 years

@ParthAnjaria You can use it. You can look at the sample image in the post to get a feel of how it appears.
Parth Anjaria over 5 years

not able to get the exact value, can you add details here
Nihal over 5 years

@ParthAnjaria What values you are talking about? Nothing will change in the drawable rounded_fg.xml file. Only the container view dimensions (width & height) will change.
Nathan F. almost 5 years

Note that this requires API 23