Shapeable ImageView In Android

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

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!