Introduction
In this article, you will learn how we can create different image view shapes using shapeable image view in android. When we are working on an industrial project, we may have to require images with different shapes. Shapeable image views very good component to deal with this requirement because the shape can be changed using a few lines. Using shapeable image view we can make our image circle, rounded, square, etc. Let's understand with the help of the example-
Let's Start With Android Studio
Step 1
Create a new project and select an empty activity
![Shapeable ImageView In Android]()
Step 2
We need to check whether material design dependency is equal to 1.2.0 or higher present in our build. gradle(Module) or not. If it is not added please added the below dependency.
implementation 'com.google.android.material:material:1.2.0'
Step 3
First, we need to create some custom style to change the shape of the image so go to theme.xml and add the below code
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.ShapeableImageViewExample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="CircleImageview">
<!-- To make circle image -->
<item name="cornerSize">50%</item>
<item name="cornerFamily">rounded</item>
</style>
<style name="RoundedImageview">
<!-- To make rounded corner image -->
<item name="cornerSize">10dp</item>
<item name="cornerFamily">rounded</item>
</style>
<style name="CornerCutImageview">
<!-- To make corner cut image -->
<item name="cornerSize">10dp</item>
<item name="cornerFamily">cut</item>
</style>
<style name="CornerCutSquareImageview">
<!-- To make corner cut square image -->
<item name="cornerSize">50%</item>
<item name="cornerFamily">cut</item>
</style>
<style name="CornersRoundedTopRightBottomLeft">
<!-- To make corner rounded top right and bottom left image -->
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomLeft">50%</item>
<item name="cornerFamily">rounded</item>
</style>
<style name="CornersCutTopRightBottomLeft">
<!-- To make corner cut top right and bottom left image -->
<item name="cornerSizeTopRight">40%</item>
<item name="cornerSizeBottomLeft">40%</item>
<item name="cornerFamily">cut</item>
</style>
</resources>
Step 4
Go to activity_main.xml and add the below code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:gravity="center">
<!-- Circle Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/circle_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginEnd="20dp"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/CircleImageview" />
<!-- Rounded Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/rounded_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_toRightOf="@+id/circle_img"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/RoundedImageview" />
<!-- Corner Cut Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/corner_cut_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_below="@+id/circle_img"
android:layout_marginTop="20dp"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/CornerCutImageview" />
<!-- Corner Cut square Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/corner_cut_square_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_below="@+id/circle_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@+id/corner_cut_img"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/CornerCutSquareImageview" />
<!-- Circle Image with Border Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/circle_with_border_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_below="@+id/corner_cut_img"
android:layout_marginTop="20dp"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/CircleImageview"
app:strokeColor="@color/purple_700"
app:strokeWidth="3dp" />
<!-- Rounded Image with Border Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/rounded_with_border_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_below="@+id/corner_cut_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@+id/circle_with_border_img"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/RoundedImageview"
app:strokeColor="@color/purple_700"
app:strokeWidth="3dp" />
<!--Top Right, Bottom Left Rounded Corners Image-->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/custom1_cut_corner_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_below="@+id/rounded_with_border_img"
android:layout_marginTop="20dp"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/CornersRoundedTopRightBottomLeft" />
<!--Top Left Bottom Right Rounded Corners Image -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/custom2_cut_corner_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_below="@+id/rounded_with_border_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_toRightOf="@+id/custom1_cut_corner_img"
android:padding="3dp"
android:scaleType="centerCrop"
android:src="@drawable/olaf"
app:shapeAppearanceOverlay="@style/CornersCutTopRightBottomLeft" />
</RelativeLayout>
</RelativeLayout>
Step 5
Press the run button and launch the application
![Shapeable ImageView Example]()
Conclusion
In this article, we have seen how we can create different image shapes using shapeable image view in android. Thanks for reading and hope you like it. If you have any suggestions or queries on this article, please share your thoughts. you can read my other articles by clicking here.
Happy learning, friends!