bumptech / bumptech/glide

Compose: Unable to easily tint placeholder in GlideImage

Open
#5,301 5 comments 1 reaction 0 assignees View on GitHub
Compose
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:

Expected result

Here is the look/feel for what actually happens:

Actual result

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.