Shapeable ImageView in Android
Posted By : Avinash Srivastava | 29-Oct-2021
The ImageView that make the bitmap with the provided Shape. Let say, in your application, you may need an application with various shapes like shape of Circle, Rectangle, Rounded corners, Stroke/Border, etc. Using Shapeable ImageView we can easily draw images with any shape.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--Adding styles to make different shapes for shapeable image view-->
<style name="ivStyle_Circle">
<item name="cornerSize">40%</item>
<item name="cornerFamily">rounded</item> <!--possible values are rounded, cut-->
</style>
<style name="ivStyle_Corners_Rounded">
<item name="cornerSize">10dp</item>
<item name="cornerFamily">rounded</item>
</style>
<style name="ivStyle_Corners_Cut">
<item name="cornerSize">10dp</item>
<item name="cornerFamily">cut</item>
</style>
<style name="ivStyle_Corners_Cut_Square">
<item name="cornerSize">50%</item>
<item name="cornerFamily">cut</item>
</style>
<style name="ivStyle_Corners_Rounded_Top_Right">
<item name="cornerSizeTopRight">60%</item>
<item name="cornerFamily">rounded</item>
</style>
<style name="ivStyle_Corners_Rounded_Top_Right_Botom_Left">
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomLeft">50%</item>
<item name="cornerFamily">rounded</item>
</style>
<style name="ivStyle_Corners_Cut_Top_Right_Botom_Left">
<item name="cornerSizeTopRight">40%</item>
<item name="cornerSizeBottomLeft">40%</item>
<item name="cornerFamily">cut</item>
</style>
</resources>
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="vertical">
<!--Circle - Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Circle"/>
<!--Circle - With Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Circle"
app:strokeWidth="5dp"
app:strokeColor="@color/black"/>
<!--All Rounded Corners - Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Rounded"/>
<!--All Rounded Corners - With Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Rounded"
app:strokeColor="@color/black"
app:strokeWidth="5dp"/>
<!--All Cut Corners - Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Cut"/>
<!--All Cut Corners - With Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Cut"
app:strokeColor="@color/black"
app:strokeWidth="5dp"/>
<!--All Cut Corners Square- Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Cut_Square" />
<!--All Cut Corners Square- Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Cut_Square"
app:strokeWidth="5dp"
app:strokeColor="@color/black"/>
<!--Top Right Rounded Corner - Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Rounded_Top_Right"/>
<!--Top Right Rounded Corner - With Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Rounded_Top_Right"
app:strokeColor="@color/black"
app:strokeWidth="5dp"/>
<!--Top Right, Bottom Left Rounded Corners - Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Rounded_Top_Right_Botom_Left"/>
<!--Top Right, Bottom Left Rounded Corners - With Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Rounded_Top_Right_Botom_Left"
app:strokeWidth="5dp"
app:strokeColor="@color/black"/>
<!--Top Right, Bottom Left Cut Corners - Without Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Cut_Top_Right_Botom_Left"/>
<!--Top Right, Bottom Left Cut Corners - With Border-->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"
app:shapeAppearanceOverlay="@style/ImageStyle_Corners_Cut_Top_Right_Botom_Left"
app:strokeColor="@color/black"
app:strokeWidth="5dp"/>
<!--Apply programmatically-->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/shapeableIv"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="5dp"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="@drawable/atif03"/>
</LinearLayout>
</ScrollView>
package com.exmple.shapeableimageview
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.imageview.ShapeableImageView
import com.google.android.material.shape.CornerFamily
class MainActivityKotlin: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
//init imageview to apply shape, borders etc
val shapeableImageView = findViewById<ShapeableImageView>(R.id.shapeableIv)
//setup properties for ShapeableImageView
val shapeAppearanceModel = shapeableImageView.shapeAppearanceModel.toBuilder()
.setAllCorners(CornerFamily.ROUNDED, 125f)
.build()
//set ShapeableImageView
shapeableImageView.shapeAppearanceModel = shapeAppearanceModel
setContentView(R.layout.activity_main)
}
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avinash Srivastava
Avinash is self motivated person. Experience in Kotlin & mobile Expertise in cross platform , work in various mobile applications