Material Components have sufficient attributes to customize as per need. We don’t need a third-party library or make a custom view for the circle image view.
In this blog, we will make a circle image view with the help of Material ShapeableImageView. By using ShapeableImageView, you can change the shape of your image to circle, diamond, etc. Also, you can set a corner radius to your image view.
Step 1: Add Material Dependency
|
1 |
implementation 'com.google.android.material:material:1.2.0' |
Step 2: Add ShapeableImageView in your XML layout.
|
1 2 3 4 5 6 7 8 9 10 |
<com.google.android.material.imageview.ShapeableImageView android:id="@+id/imageView" tools:src="@tools:sample/avatars" android:layout_width="240dp" android:layout_height="240dp" android:scaleType="centerCrop" android:adjustViewBounds="true" android:layout_gravity="center_horizontal" app:shapeAppearanceOverlay="@style/circleImageView" /> |
Step 3: Add circle image style in file styles.xml.
|
1 2 3 4 5 |
<!--Material Circle Image style--> <style name="circleImageView" parent="ShapeAppearance.MaterialComponents.MediumComponent"> <item name="cornerFamily">rounded</item> <item name="cornerSize">50%</item> </style> |
Finally, You will get a circle ImageView.
