Coil placeholder not showing if vectorpainter is used in jetpack compose

Question

I am using the following code to display an image.

       AsyncImage(
               model = createImageUrl(audio.image_path),
                   contentDescription = "Song Artwork",
                    modifier = Modifier.fillMaxHeight()
                                       .aspectRatio(1f)
                                       .padding(horizontal = 4.dp),
                    placeholder = rememberVectorPainter(image = Icons.Outlined.MusicNote)
                )

The placeholder image is not being shown. Howeve, if I use placeHolder = painterResource(R.drawable.someDrawableInMyResource), the drawable is being shown when image is loaded.

What am I doing wrong?

score 4 · Answer 1 · answered Dec 16 '22 at 07:43

var loaded by remember {
        mutableStateOf(false)
    }
    AsyncImage(
        model = createImageUrl(audio.image_path),
        contentDescription = "Song Artwork",
        modifier = Modifier.fillMaxHeight().aspectRatio(1f).padding(horizontal = 4.dp),
        placeholder = rememberVectorPainter(image = Icons.Default.MusicNote),
        error = rememberVectorPainter(image = Icons.Default.MusicNote),
        fallback = rememberVectorPainter(image = Icons.Default.MusicNote),
        onSuccess = {
            loaded = true
        },
        colorFilter = if (!loaded) ColorFilter.tint(LocalContentColor.current) else null
    )

I used this workaround and this works. I am open for another clean suggestions.

For anybody stuck on the problem, I found the solution in coil docs. https://coil-kt.github.io/coil/recipes/#transforming-painters.. The idea is to wrap error-painter with forwardingPainter with tint provided. — Diken Mhrz, Mar 22 '23 at 16:11

score 0 · Answer 2 · answered Dec 16 '22 at 06:39

0

I found what I was doing wrong. I was in dark theme and the image vector`s tint color matched my background and thus nothing was being shown.

May help someone.

Edit: Well my question changed.. How to change placeholder tint to match my theme?

answered Dec 16 '22 at 06:39

Diken Mhrz

327
2
14

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 26 '22 at 07:44

Coil placeholder not showing if vectorpainter is used in jetpack compose

2 Answers2