CODEWITHSUNDEEP
android-jetpack-navigation
Roony
Roony

Reputation: 113

How to make a painter that returns a shimmer effect using jetpack compose?

I'm using Coil for loading images, while the images are loading I want to show a shimmer effect.

I found some ways to achieve that,but none of them was the kind that I wanted, what I want is a composable function that returns a painter to use it as a place holder like this:

AsyncImage(
model = url,
placeHolder = {
shimmerEffectPainter()
}

)

Any help?

Upvotes: 2

Views: 1172

Answers (1)

ernesthor
ernesthor

Reputation: 251

You can use the SubcomposeAsyncImage from coil

    SubcomposeAsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(imgUrl)
        .build(),
    contentDescription = null,
    contentScale = ContentScale.FillWidth,
    loading = {
        shimmerEffectPainter()
    },
    modifier = Modifier
        .fillMaxWidth()
)

You can also check this out https://google.github.io/accompanist/placeholder/

It can be used in other composables, but I'm having a hard time to remove the shimmering effect of the accompanist when using AsyncImage from coil, but the above code helped me out. Hope it helps you too

Upvotes: 1

Related Questions