ShapeableImageView – Material Components

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 2	implementation 'com.google.android.material:material:1.2.0'

Step 2: Add ShapeableImageView in your XML layout.

<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.

<item name="cornerFamily">rounded</item>

</style>

Finally, You will get a circle ImageView.

. . .

ShapeableImageView – Material Components

Leave a Comment Cancel Reply

Message Sent!