ImageView rounded corners [duplicate]
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:
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 );
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 yourbuild.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.AppCompatActivityimport android.os.Bundleimport com.google.android.material.shape.CornerFamilyimport 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