Compose: Unable to easily tint placeholder in GlideImage
- Dominant language
- Java
- Stars
- 35k
- Forks
- 6.2k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 8
Description
**Glide Version**: 5.0.0-rc01
**Integration libraries**: Compose: 1.0.0-beta01
**Device/Android Version**: All versions supporting dark themes/dynamic themes most impacted
**Issue details / Repro steps / Use case background**:
I am creating a list of items, showing an image of the artist, plus the title and artist name. If the artist image is downloaded successfully it will show a jpg image cropped into a circle. That is working fine.
However, if the image fails to download and potentially while loading, I want to show an icon in its place AND be properly tinted whether the user has a light or dark theme enabled. I'm also using a dynamic theme so the actual colors may have a slight tint to them based on theme.
Here is a basic look/feel for what I expect:
Here is the look/feel for what actually happens:
Note the dark theme is not tinted to the expected color of the text. The light theme is using pure black vs a slightly elevated black as well, but it is subtile to the naked eye.
Note: This is reproducible with resources, drawables and a painter using an ImageVector.
This actually makes sense. In Compose Image() lets you pass two items to help color an image: an alpha value and a colorFilter. The drawback is if I passed them, then the would also apply to the raw image rendering it into a colored circle which I do not want.
What would be handy is if I could provide an alternate colorFilter/alpha for the placeholders. I could see adding this information in two different ways:
1) an optional placeholderAlpha, placeholderColorFilter parameter on GlideImage itself. Defaults would be the same as alpha/colorFilter
2) providing this information in the placeHolder() function. The advantage of this, is the tint could be different for both loading/failure cases, but I realize this is the more messy form as you have to pass a placeholder item, alpha and colorFilter for each potential placeholder.
I would be fine with option 1 because it seems reasonable for any place holders to have the same tinting, but it is possible someone has a need for option 2.
The workarounds are not great options:
1) Use GlideSubcomposition and render my own placeholders using the proper tint. Relatively easy, but now always in the sub-composition flow which sounds worse using it in a list.
2) Jump through a hoop to get a drawable to load and then apply the appropriate tint before handing to Glide. It is a bigger hoop to use the compose based material icons.
3) Switch to a solid color placeholder instead
**Layout code**:
```kotlin
val painter = rememberVectorPainter(image = Icons.Rounded.AccountCircle)
GlideImage(
model = hostImageUri,
contentDescription = null,
modifier = adjustedModifier.clip(CircleShape),
alignment = Alignment.Center,
contentScale = ContentScale.Crop,
failure = placeholder(painter)
)
```
No error see images.
Contributor guide
Assessment
This issue has not been assessed yet.