How to Implement Shapeable ImageView in Android?

In Android, ShapeableImageView is used to change the shape of your image to circle, diamond, etc. Also, you can set a corner radius to your ImageView. You can do much more by using this ShapeableImageView with minimal code. So in this article, we are going to make a ShapableImageView in android. By implementing this application we will get a basic idea of how editing of photos is done in android applications. Here we will implement two features i.e to cut or round the corners of an image.

What we are going to build in this article?

Here we will be using two images, one image we will edit with XML code and the other with java code. Using SeekBar the user can round or cut all four corners of the image separately. Note that we are going to implement this application using Java language. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Creating a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio? 

Step 2: Adding the required dependency

Open Gradle Scripts > build.gradle(module). Go to app > right click > open module settings > dependencies > Add dependency > Library dependency.

Type material in the search bar and click on search. Select the dependency shown in the below image-

Click on sync now to save the changes.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>

<!-- Linear layout as parent layout-->
<LinearLayout
    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"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center"
    tools:context=".MainActivity">

      <!-- text view to show the text "using xml"-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Using xml"
        android:textStyle="bold"
        android:textSize="20sp"
        android:padding="12dp"
        />

      <!-- shapable image view-->
    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="339dp"
        android:layout_height="230dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/gfg"
        app:shapeAppearance="@style/CornerCut" />

      <!-- text view to show the text "using java"-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Using Java"
        android:textSize="20sp"
        android:textStyle="bold"
        android:padding="12dp"
        />

     <!-- shapable image view-->
    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="339dp"
        android:layout_height="230dp"
        android:layout_weight="1"
        android:id="@+id/image_View"
        android:src="@drawable/gfg"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        />

      <!-- spinner to provide options of round and cur-->
    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sp_family"
        android:padding="12dp"
        android:layout_marginTop="16dp"
        />

      <!-- seekbar for top left corner-->
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sb_top_left"
        android:layout_marginTop="16dp"
        />

      <!-- seekbar for top right corner-->
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sb_top_right"
        android:layout_marginTop="8dp"
        />

      <!-- seekbar for bottom left corner-->
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sb_bottom_left"
        android:layout_marginTop="8dp"
        />

      <!-- seekbar for bottom right corner-->
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sb_bottom_right"
        android:layout_marginTop="8dp"
        />

</LinearLayout>

Step 4: Working on themes.xml file

Navigate to res > values > themes > themes.xml file and use the below code in it.

XML

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ShapableImageView" 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="CornerCut" parent="">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerFamilyBottomLeft">cut</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerSizeTopRight">25%</item>
        <item name="cornerSizeBottomLeft">25%</item>
        <item name="cornerSizeBottomRight">50%</item>

    </style>
</resources>

After executing the above code design of the activity_main.xml file looks like this.

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

package com.example.shapableimageview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.SeekBar;
import android.widget.Spinner;

import com.google.android.material.imageview.ShapeableImageView;
import com.google.android.material.shape.CornerFamily;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

    // Initialize variable
    ShapeableImageView imageView;
    Spinner spFamily;
    SeekBar sbTopLeft,sbTopRight,sbBottomLeft,sbBottomRight;
    int cornerFamily= CornerFamily.CUT,topLeft=0,topRight=0,bottomLeft=0,bottomRight=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // assign variable
        imageView=findViewById(R.id.image_View);
        spFamily=findViewById(R.id.sp_family);
        sbTopLeft=findViewById(R.id.sb_top_left);
        sbTopRight=findViewById(R.id.sb_top_right);
        sbBottomLeft=findViewById(R.id.sb_bottom_left);
        sbBottomRight=findViewById(R.id.sb_bottom_right);

        // Initialize array list
        ArrayList<String> arrayList=new ArrayList<>();

        // add values in array List
        arrayList.add("cut");
        arrayList.add("rounded");

        // set adapter
        spFamily.setAdapter(new ArrayAdapter<>(MainActivity.this,
                android.R.layout.simple_spinner_dropdown_item,arrayList));

        // Set Listener on spinner
        spFamily.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                // check condition
                if(position==0)
                {
                    // when cut selected
                    cornerFamily=CornerFamily.CUT;
                }
                else
                {
                    // when rounded selected
                    cornerFamily=CornerFamily.ROUNDED;
                }

                // create update method
                updateImage();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });

        // set listener on all seekbar
        sbTopLeft.setOnSeekBarChangeListener(this);
        sbTopRight.setOnSeekBarChangeListener(this);
        sbBottomRight.setOnSeekBarChangeListener(this);
        sbBottomLeft.setOnSeekBarChangeListener(this);
    }

    private void updateImage() {
        // set appearance
        imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel().toBuilder()
                .setTopLeftCorner(cornerFamily,topLeft)
                .setTopRightCorner(cornerFamily,topRight)
                .setBottomLeftCorner(cornerFamily,bottomLeft)
                .setBottomRightCorner(cornerFamily,bottomRight)
                .build());
    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        switch (seekBar.getId())
        {
            case R.id.sb_top_left:
                                    topLeft=progress;
                                    break;
            case R.id.sb_top_right:
                                    topRight=progress;
                                    break;
            case R.id.sb_bottom_left:
                                    bottomLeft=progress;
                                    break;
            case R.id.sb_bottom_right:
                                    bottomRight=progress;
                                    break;
        }
        // call update method
        updateImage();
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
}

Here is the final output of our application.

Output: