Material-components-android: Add new `ShapeableImageView` component

Created on 20 Nov 2019  路  5Comments  路  Source: material-components/material-components-android

Currently ImageView doesn't support material shaping. First example on this site:
https://material.io/design/communication/imagery.html#

shows an image with rounded corners. This can be achieved by wrapping ImageView inside a CardView but having a built in support for material shaping would be more convenient.
Not sure if it should be a ShapeableImageView component or if it would be better to create MaterialImageView and replace regular ImageView with it during inflation (similar to other components like MaterialButton for example).

feature request

Most helpful comment

I Was excited to see this in 1.2 alpha03 release. I currently use a third-party 'com.makeramen:roundedimageview:2.3.0' library successfully. I also use it with Picasso 2.71828 with no issues.

I tried to replace the RoundedImageView with the included ShapeableImageView in my views which are used within a RecyclerView.ViewHolder. I found that upon scrolling, the images occasionally disappear and then may come back. Perhaps it is highlighting some other issue in my code, but perhaps it is some drawing or some other recycling that is causing the image to get dropped?

Note I am also using a Picasso placeholder like so:

Picasso.get().load(staff.imageUrl).placeholder(R.drawable.loading_icon).into(imageView)

For now I have reverted to the RoundedImageView. Hopefully this can be looked at and fixed by next release. Thank you.

Some additional info: there are a number of errors like so in the log:

E/ShapeableImageView: Shapeable Image view does not support the provided drawable. Only BitmapDrawble is supported

I set a break point and found that the drawable was actually null. So I suspect it has to do with the way Picasso is setting the drawable on the ImageView at times which cause a redraw, but if the drawable is null, perhaps it should be skipped and not drawn at all?

All 5 comments

I Was excited to see this in 1.2 alpha03 release. I currently use a third-party 'com.makeramen:roundedimageview:2.3.0' library successfully. I also use it with Picasso 2.71828 with no issues.

I tried to replace the RoundedImageView with the included ShapeableImageView in my views which are used within a RecyclerView.ViewHolder. I found that upon scrolling, the images occasionally disappear and then may come back. Perhaps it is highlighting some other issue in my code, but perhaps it is some drawing or some other recycling that is causing the image to get dropped?

Note I am also using a Picasso placeholder like so:

Picasso.get().load(staff.imageUrl).placeholder(R.drawable.loading_icon).into(imageView)

For now I have reverted to the RoundedImageView. Hopefully this can be looked at and fixed by next release. Thank you.

Some additional info: there are a number of errors like so in the log:

E/ShapeableImageView: Shapeable Image view does not support the provided drawable. Only BitmapDrawble is supported

I set a break point and found that the drawable was actually null. So I suspect it has to do with the way Picasso is setting the drawable on the ImageView at times which cause a redraw, but if the drawable is null, perhaps it should be skipped and not drawn at all?

Thanks @tylerwilson.

The latest implementation of ShapeableImageView at head should work exactly like a framework ImageView + adding the stroke and supporting the shape. We were able to remove all the handling of bitmaps and drawables from the code, so I expect Picasso should work well with it now.

Please give it a try!

Thank you for the fix. Looks good to me now.

One other issue though: in the previous ImageView I was using scaleType=centerCrop. But it appears the ShapeableImageView is locked into fitXY somehow. I tried setting both in XML and as style overlay.

Thank you.

@tylerwilson that should also be fixed now. Check

https://github.com/material-components/material-components-android/issues/890#issuecomment-573690709

To see how to test with one of the latest snapshots.

Latests one is 1.2.0-dev-20200130

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mnayef95 picture mnayef95  路  3Comments

gabrielemariotti picture gabrielemariotti  路  3Comments

ataulm picture ataulm  路  3Comments

JakeWharton picture JakeWharton  路  3Comments

KelvinPac picture KelvinPac  路  3Comments