Shape your Image: Circle, Rounded Square, or Cuts at the corner in Android
Published in
4 min readMay 14, 2022
Using the MDC library let’s shape images in just a few lines of code by using ShapeableImageView.
Source Code link at bottom of this page.
Don’t like reading? Watch the video instead 👇 OR click here to watch
Ok, let’s start the tutorial.
Step 1
Create a New Project in Android Studio with an Empty Activity.
I will use ShapeableImageView which belongs to the Android MDC library (Material Design Component library).
By default, MDC library dependency is added to the project. But still, let’s first ensure the dependency is added. Go to build.gradle file (Module level) and ensure the following dependency is there:
implementation 'com.google.android.material:material:1.6.0'The version of the library might vary. You can use the above version or continue to use the latest one (which is by default added to your project).
Step 2
Let’s create a new values resource file under res/values directory. I have named the file custom_styles.xml. The filename doesn’t matter, you can name it as per your wish.
Put the following code within res/values/custom_styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Circular">
<item name="cornerSize">50%</item>
</style>
<style name="RoundedSquare">
<item name="cornerSize">10%</item>
</style>
<style name="CornerCut">
<item name="cornerSize">15dp</item>
<item name="cornerFamily">cut</item>
</style>
<style name="DiamondCut">
<item name="cornerSize">75dp</item>
<item name="cornerFamily">cut</item>
</style>
<style name="SpecificCornerCut">
<item name="cornerSizeTopRight">75dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerSizeBottomLeft">75dp</item>
<item name="cornerFamilyBottomLeft">cut</item>
</style>
<style name="SpecificCornerRounded">
<item name="cornerSizeTopRight">75dp</item>
<item name="cornerFamilyTopRight">rounded</item>
<item name="cornerSizeBottomLeft">75dp</item>
<item name="cornerFamilyBottomLeft">rounded</item>
</style>
</resources>Let’s talk about the above code:
- Each <style> represents a new shape. The ‘name’ of the <style> is user-defined.
- <style> can contain multiple <item> tags.
- <item> contains ‘name’ attribute to define the corner shapes. Such as ‘cornerSize’, ‘cornerFamily’, ‘cornerSizeTopRight’ etc are the pre-defined values of the attribute ‘name’.
- cornerSize: This value defines the corner shape. You can use absolute % or a value in dp. Increasing the % or the dp value will increase the masked area of your image. Below is the example:
Alternatively, instead of cornerSize value, you can also apply the mask to a specific corner by using values such as cornerSizeTopRight, cornerSizeTopLeft, cornerSizeBottomRight, and cornerSizeBottomLeft as shown in the code above.
- cornerFamily: This value defines the corner shape type. It can be either rounded or cut. Using rounded will make the corner curved whereas using cut will give the corner a subtle cut. If you don’t declare cornerFamily, then by default it will be rounded. Below is the example:
Alternatively, instead of cornerFamily value, you can use values such as cornerFamilyTopRight, cornerFamilyTopLeft, cornerFamilyBottomLeft, and cornerFamilyBottomRight to apply shape type to a specific corner as shown in code above.
Step 3
Okay, let’s add this image to the res/drawable folder. OR alternatively, you can get the image from here.
Step 4
The last and final step is to update activity_main.xml with the following code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/txvCircularShape"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#eee"
android:gravity="center"
android:text="Circular ImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCircular"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:src="@drawable/action_hero"
app:layout_constraintEnd_toStartOf="@+id/imvCircularWithStroke"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/txvCircularShape"
app:shapeAppearanceOverlay="@style/Circular"/>
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCircularWithStroke"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:padding="5dp"
android:src="@drawable/action_hero"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imvCircular"
app:layout_constraintTop_toBottomOf="@id/txvCircularShape"
app:shapeAppearanceOverlay="@style/Circular"
app:strokeColor="#00BCD4"
app:strokeWidth="5dp" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/textCornerRadiusShare"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#eee"
android:gravity="center"
android:text="Corner Radius ImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imvCircularWithStroke" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCornerStroke"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:src="@drawable/action_hero"
app:layout_constraintEnd_toStartOf="@+id/imvCornerRadiusWithStroke"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/textCornerRadiusShare"
app:shapeAppearanceOverlay="@style/RoundedSquare" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCornerRadiusWithStroke"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:padding="5dp"
android:src="@drawable/action_hero"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imvCornerStroke"
app:layout_constraintTop_toBottomOf="@id/textCornerRadiusShare"
app:shapeAppearanceOverlay="@style/RoundedSquare"
app:strokeColor="#00BCD4"
app:strokeWidth="5dp" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/txvCornerCut"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#eee"
android:gravity="center"
android:text="Corner Cut ImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imvCornerRadiusWithStroke" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCornerCutOne"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:src="@drawable/action_hero"
app:layout_constraintEnd_toStartOf="@+id/imvCornerRadiusWithStroke"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/txvCornerCut"
app:shapeAppearanceOverlay="@style/CornerCut" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCornerCutTwo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:padding="7dp"
android:src="@drawable/action_hero"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imvCornerStroke"
app:layout_constraintTop_toBottomOf="@id/txvCornerCut"
app:shapeAppearanceOverlay="@style/DiamondCut" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/txvCornerShape"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#eee"
android:gravity="center"
android:text="Specified Corner Radius ImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imvCornerCutTwo" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCornerShapeOne"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:src="@drawable/action_hero"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imvCornerRadiusWithStroke"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/txvCornerShape"
app:shapeAppearanceOverlay="@style/SpecificCornerCut" />
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/imvCornerShapeTwo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:padding="7dp"
android:src="@drawable/action_hero"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/imvCornerStroke"
app:layout_constraintTop_toBottomOf="@id/txvCornerShape"
app:shapeAppearanceOverlay="@style/SpecificCornerRounded" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>Don’t worry about the code length. The code is very simple and is just repetitive. Let’s simply it:
- Instead of plain <ImageView>, I am using <ShapeableImageView> which is a modern class of MDC library.
- Use app:shapeAppearanceOverlay attribute and refer to different <style> created in Step 2.
- Additionally, you can use app:strokeColor and app:strokeWidth to apply an outline stroke to your image.
Perfect! Quite simple isn’t it?
