Compose preview with coil image from url
Asked Answered
P

0

11

In my Android app I use Jetpack Compose for the UI.

In a screen I'm rendering an image, using a lottie file that is downloaded from a url. The lottie image file is rendered like this:

@Composable
private fun Image(assetUrl: String) {
    val composition by rememberLottieComposition(LottieCompositionSpec.Url(assetUrl))
    val progress by animateLottieCompositionAsState(composition, iterations = LottieConstants.IterateForever)

    LottieAnimation(
        composition = composition,
        progress = { progress }
    )
}

I want to provide a preview composable method that will also render the above Image composable. Ideally, I'd like to be able to do something like this:

@Preview
@Composable
private fun ScreenPreview(){
    Theme {
        Surface {
            Screen(assetUrl = /* Some URL */)
        }
    }
}

where for example, the screen will be some composable containing the Image composable:

@Composable
fun Screen(assetUrl: String){
    Image(
        assetUrl = assetUrl
    )
}

Questions:

  • Is there a way to have a preview composable method in which an image will be loaded from a url?
  • If not, do you think that this is something that could possibly be implemented in the future?
  • Is there any other alternative way, to show in a preview composable, another image in place of the image that is loaded from a url? That's so that, when someone sees the preview in Android Studio, he/she'll anticipate that an image will exist in this space in a screen. I'm looking for an alternative way, that wouldn't include adding some unnecessary extra composable that may be used only for the preview or some similar solution.
Pietrek answered 21/2, 2023 at 20:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.