Jetpack Compose Image Pager/Viewer (Side Scroll One by One)

Dependencies

dependencies {
    implementation "com.google.accompanist:accompanist-pager:0.20.2"
}

Screen

@ExperimentalPagerApi@Composablefun PhotoPagerScreen(    images: List<Any>,    page: Int,    onContentChange: (String, String) -> Unit,    onShortChange: (String, String) -> Unit) {    val pagerState = rememberPagerState()    HorizontalPager(count = images.size, state = pagerState) { page ->        val image = images[page]        val painter = rememberImagePainter(            data = image // ?: R.drawable.error,            builder = {                // size(64)                placeholder(R.drawable.placeholder)                // transition when placeholder -> image                crossfade(true)                error(R.drawable.error)            }        )        Box {            Image(                painter = painter,                contentDescription = null,                modifier = Modifier.fillMaxSize(),                contentScale = ContentScale.Fit            )        }    }    LaunchedEffect(page) {        pagerState.scrollToPage(page)    }}

NOTE: Refer Jetpack Compose Load Image With Coil

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.