Hello, in this video, I’ll show you how to create custom shaped ImageViews using the Material UI Components library for android.
Shapeable ImageView
Hello, in this tutorial, I’ll show you how to create custom shaped ImageViews using the Material UI Components library for android.
Setup
To begin, go to your app’s build.gradle file and add the dependency for Material UI Components.
implementation 'com.google.android.material:material:1.4.0'
For the latest version of the library, visit to the Maven Repository for Android Material.
Sync the project and wait for the process to finish.
Shaping the ImageView
When you have the library loaded in, add an ImageView to a layout.
To add a shape to this ImageView, we have to turn it into a ShapeableImageView.
Swap into the code view for the layout.
Highlight the ImageView element and type Shapeable. You should see a context menu for the ShapeableImageView.
Select it and press enter.
To add a shape to it, locate the themes.xml file.
Under the main style, define a new style and call it circle.
<style name="circle">
</style>
To change the corners for the ImageView, add an item element with the name cornerSize.
In between the tags, set the value to 50%.
<style name="circle">
<item name="cornerSize">50%</item>
</style>
Go back to the ImageView, search for the shapeAppearance attribute, and apply the style to change the shape.
Make sure the width and height are the same if you want the image to be circular.
If we run the app, the image would have a circular shape.
Other shapes
Instead of changing all four corners of the image at once, we can change each one individually.
Go back to the themes.xml file and define a new style call custom shape.
<style name="custom_shape">
</style>
Instead of using cornerSize to change all 4 corners at once, we can use cornerSizeTopLeft and right to change the corners on the top side.
The same can be done with the bottom with cornerSizeBottomLeft and right.
<style name="custom_shape">
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">30dp</item>
<item name="cornerSizeBottomLeft">30dp</item>
</style>
If we go back to the image and apply this shape, we will get a different result.
Cut Edges
We can also have sharp edges instead of round ones. Go back to the themes.xml file and set the cornerFamily to cut.
This will turn all the edges into sharp edges.
<style name="custom_shape">
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">30dp</item>
<item name="cornerSizeBottomLeft">30dp</item>
<item name="cornerFamily">cut</item>
</style>
If you want to change each corner individually, you can use cornerFamilyTopLeft and Right and cornerFamilyBottomLeft and Right.
<style name="custom_shape">
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">30dp</item>
<item name="cornerSizeBottomLeft">30dp</item>
<item name="cornerFamilyTopLeft">cut</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomLeft">cut</item>
<item name="cornerFamilyBottomRight">rounded</item>
</style>
