Com google android material imageview shapeableimageview

ShapableImageView in Android: Make Circular Image Border

Do you rely on external libraries to draw shapes on your ImageView ? Well now there is ShapableImageView in Android to facilitate just that.

But the best part is that you don’t need to use the circular image view libraries.

What is ShapableImageView in Android ?

ShapableImageView in Android is a subclass of ImageView that supports custom shapes. Such as circular frame or rounded corners.

Sure, you can achieve that by just wrapping the ImageView inside a CardView . But here we will look at using the ShapableImageView ‘s API.

It was introduced in material design library version 1.2. And it provides a rather convenient way to do things.

We will look at what shapes we can create using ShapableImageView. And we will also look at problems and their solutions using in ShapableImageView.

You must also include this library in the dependencies

Styling Attributes in ShapableImageView

Before we move on let us see what do we need to style our view.

We must know that there are exactly 2 ways to do things. One is through Java/Kotlin and the other is through XML.

Here I will described about the XML way. And later we will look into the programmatic way.

Step 1: We must create a style in styles.xml or theme.xml .

If we look at the snippet above. We can see the cornerFamily and cornerSize attribute.

cornerFamily has only two values rounded and cut. And,

cornerSize takes in the dp unit like: 8dp, 20dp, etc. And the variations are cornerSizeTopLeft , cornerSizeTopRight , cornerSizeBottomLeft , cornerSizeBottomRight .

And it adjusts the roundness of each of the corners.

Now that we have understood what we need let us move on with our goal.

Circular Border for Image

Our resulting UI will look like below. Focus on the Image only.

To create a circular border add the snippet in your styles.xml or themes.xml . Change the percentage to see how the border changes.

And add the following ShapableImageView in your layout.

From the code snippet about we can see these attributes stand out

1. app:shapeAppearanceOverlay is how we change the shape. So, in our case it is @style/ShapeAppearance.CircularBorder .
2. app:strokeColor is for adding the border color. And,
3. app:strokeWidth is for the width of the border.

Now there is a problem with our output, the image has no space with the border. We will look at this later on in the post.

Diamond Cut Border for Image

The output of cut corner style is shown below

Just like in the style above we have to declare the style with cornerFamily cut.

• 50% will produce a diamond like shape.
• 25% will produce a octagonal shape.

And the code for our layout will stay same except for the name of app:shapeAppearanceOverlay.

Now we have completed the basic styling for our ShapableImageView. Let us look at the main problem in each of the example above.

Padding issue with ShapableImageView

If we see closely with the image above we can see that there is no space between the border and the image. This can look really not clean in certain situations.

Let us try adding the padding attribute to the ShapableImageView to solve this.

After adding the output is exactly same except the image has reduced in size. So, clearly setting padding to the layout doesn’t solve the issue.

Whats the solution then ?

Well it’s pretty easy, we have to create a custom inset drawable. Create a new resource file in the drawable directory.

• android:drawable is where you actual image will be referenced
• android:inset is just like android:padding put in a dp value

After creating the new drawable resource. We have to use it instead of the actual image like below

Which was before

And the out put of the adjustments is like below.

It’s almost perfect but there’s still a little problem. Can you see it ?

Cutting Side Issue in ShapableImageView Android

If you look closely you can see the ShapableImageView has a bit of our border cut off at each side.

Let us solve that issue too. It’s really simple. We just have to use the padding in our layout. And the value must be half of app:strokeWidth .

In the above examples we can see we have 2dp width of stroke. So let us include padding of 1dp in our layout.

As you can see the issue is now gone. If it doesn’t resolve you can try increasing the padding with practical units.

Why did the cut happen ? It’s in the way the ImageView draws the mentioned drawable.

I hope you liked the implementation, be sure to bookmark and visit often for new tutorials.

Источник

gabrielemariotti / README.MD

The Material Components Library introduced with the 1.2.0-alpha03 the new ShapeableImageView .

In your layout you can use:

Then in your code apply the ShapeAppearanceModel to define your custom corners:

Also you can use the shapeAppearanceOverlay attribute in your layout to define the shape with a style.
For example to achieve a circular image:

This comment has been minimized.

Copy link Quote reply

kikasik commented Dec 27, 2019

This comment has been minimized.

Copy link Quote reply

jrcmadushanka commented Feb 11, 2020

Thanks..
Does the android:scaleType attribute support on this element?

This comment has been minimized.

Copy link Quote reply

michaljanowicz commented Feb 26, 2020

Thanks..
Does the android:scaleType attribute support on this element?

This comment has been minimized.

Copy link Quote reply

jasonsparc commented Mar 27, 2020

This comment has been minimized.

Copy link Quote reply

naruavi commented Apr 26, 2020 •

Thanks
Could we manage image aspect with this

This comment has been minimized.

Copy link Quote reply

MrShiden commented Jul 2, 2020

This comment has been minimized.

Copy link Quote reply

simple-harmonics-git commented Jul 4, 2020

Hello, can I add a white stroke to the circular image?

This comment has been minimized.

Copy link Quote reply

PXNX commented Jul 28, 2020

and how do I set iamge resource programmatically?

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Aug 21, 2020

and how do I set iamge resource programmatically?

This comment has been minimized.

Copy link Quote reply

mym0404 commented Aug 23, 2020

This comment has been minimized.

Copy link Quote reply

HxBreak commented Aug 27, 2020

This comment has been minimized.

Copy link Quote reply

ernestkoko commented Aug 30, 2020

Very Nice. It helped me

This comment has been minimized.

Copy link Quote reply

iamarjun commented Sep 8, 2020

how can we shape it to look like a hexagon?

like these

This comment has been minimized.

Copy link Quote reply

Lakshay1729 commented Nov 15, 2020

how can we shape it to look like a hexagon?

like these

add cornerFamily=»cut» for hexagon like appearance Type A

This comment has been minimized.

Copy link Quote reply

Andre-max commented Jan 6, 2021

Hello, can I add a white stroke to the circular image?

Use app:strokeWidth for the stroke width and app:strokeColor for the color. They are available in the newer material versions.

This comment has been minimized.

Copy link Quote reply

EvgeniyOsetrov commented Mar 4, 2021

Do we need parent in style? Why it is empty?

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Jun 30, 2021

how to set stroke in themes? I tried to set in themes it doesn’t work but in the layout xml it can

Can’t help you without seeing your style and layout

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Jun 30, 2021

Do we need parent in style? Why it is empty?

Because it’s basically it’s a so called ThemeOverlay

This comment has been minimized.

Copy link Quote reply

uc-sja commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

This comment has been minimized.

Copy link Quote reply

uc-sja commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

The black background at the corners started showing when i set the radius in shapeableimageview

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

The black background at the corners started showing when i set the radius in shapeableimageview

Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?

This comment has been minimized.

Copy link Quote reply

uc-sja commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

The black background at the corners started showing when i set the radius in shapeableimageview

Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?

Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

The black background at the corners started showing when i set the radius in shapeableimageview

Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?

Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it’s own background. Frame layout is of a square shape. You make your image view corners rounded. It’s pretty obvious that you’ll see your frame layout’s background

This comment has been minimized.

Copy link Quote reply

uc-sja commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it’s own background. Frame layout is of a square shape. You make your image view corners rounded. It’s pretty obvious that you’ll see your frame layout’s background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

This comment has been minimized.

Copy link Quote reply

paulkugaev commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it’s own background. Frame layout is of a square shape. You make your image view corners rounded. It’s pretty obvious that you’ll see your frame layout’s background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

Everything seems fine. Could you share a zip with the project?

This comment has been minimized.

Copy link Quote reply

uc-sja commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it’s own background. Frame layout is of a square shape. You make your image view corners rounded. It’s pretty obvious that you’ll see your frame layout’s background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

This comment has been minimized.

Copy link Quote reply

Supkym commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it’s own background. Frame layout is of a square shape. You make your image view corners rounded. It’s pretty obvious that you’ll see your frame layout’s background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

I got same problem ,remove android:hardwareAccelerated=»false» from manifest.xml and it should works

This comment has been minimized.

Copy link Quote reply

uc-sja commented Jul 25, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :

And in the viewholder i wrote the following piece of code. for radius to take effect:

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it’s own background. Frame layout is of a square shape. You make your image view corners rounded. It’s pretty obvious that you’ll see your frame layout’s background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

I got same problem ,remove android:hardwareAccelerated=»false» from manifest.xml and it should works

Okays after digging around for several days, this seemed to work. Seems much like a hack, but again I guess android dev is full of hacks and workarounds. Could you explain why is this happening? because just to prevent the issue I have to turn on hardware acceleration(default behaviour) which comes at a cost of my app consuming more ram and battery..can we do something better?

Источник