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

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

1	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"
    />

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

<!--Material Circle Image style-->
<style name="circleImageView" parent="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

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

</style>

Finally, You will get a circle ImageView.

yogendra singh 1 October 2020

. . .

ShapeableImageView – Material Components

Leave a Comment Cancel Reply

Message Sent!