The Complete Guide

Deep Dive Into ShapeableImageView in Android

How to Code a Circular ImageView and other shapes easily.

Example for different shapes

I never worked with a designer that was happy with how the default ImagevView shape looks, to be honest, they are right it kinda looks boring with its sharp corner like an old square. and from that disapproval and the need to make our ImageViews looks beautiful. Libraries that help us achieve that started appearing to save us from the hideous-looking ImageView.

The CircleImageView by hdodenhof was added by default in any project. and it saved us a lot of time.

hdodenhof/CircleImageView

But Android Team at Google finally decided to keep up and introduced the ShapeableImageView in Material Design 1.2.0.

ShapeableImageView

Extends AppCompatImageView which means it has all the functionality provided in it.

New XML Attributes

• strokeColor
• strokeWidth

Both of them will be used to control the border attributes for the ImageView

CornerFamily

• Cut
• Rounded

Used to decide the type of the corner shape

CornerSize

Used to decide the size of the corner shape, can use Percentage or Absolute value in dp

Usage

First will need to add material design to Gradle

implementation ‘com.google.android.material:material:1.2.0’

Circle ImageView

Circle ImageView

Circle ImageView, Mostly used in users Avatars

First, we create the Style.