Creating a Dynamic Image Slider with Accompanist Pager in Jetpack Compose 🚀

Every problem solved is a lesson learned. #AndroidTips #SolvedProblemToday

Jetpack Compose

Image sliders are a common feature in many mobile applications, allowing users to easily browse through a series of images with a swipe of their finger. In Jetpack Compose, the Accompanist library provides an easy-to-use pager component for implementing this feature.

Image Slider

To get started, make sure you add the dependency for Accompanist Pager. Then, create a function to display your image slider. In this example, we’ll call it ImageProductPager and pass in a Product object:

@OptIn(ExperimentalPagerApi::class)
@Composable
fun ImageProductPager(product: Product) {
    val items = product.images
    val pagerState = rememberPagerState()

    HorizontalPager(
        count = items?.size ?: 0,
        state = pagerState
    ) { page ->
        // Define the content of each page here
        SubcomposeAsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(items?.get(page))
                .crossfade(true)
                .build(),
            loading = {
                CircularProgressIndicator(
                    color = Color.LightGray,
                    modifier = Modifier.padding(48.dp)
                )
            },
            contentDescription = stringResource(R.string.product_thumbnail),
            contentScale = ContentScale.Fit,
            modifier = Modifier.height(260.dp)
        )
    }
    Spacer(modifier = Modifier.size(Dimens.dp8))
    HorizontalTabs(
        items = items ?: emptyList<String>(),
        pagerState = pagerState
    )
}

In this function, we first retrieve the list of images from the Product object and create a PagerState object using the rememberPagerState() function from the Accompanist library. We then create a HorizontalPager component and pass in the count of items and the pager state.

Inside the HorizontalPager, we define the content of each page using the SubcomposeAsyncImage component from the Accompanist library. This component loads the image asynchronously and displays a progress indicator while the image is being loaded.

Finally, we add a HorizontalTabs component to display dots below the image slider that indicate the current page. This component takes in the list of image URLs and the pager state as parameters.

@OptIn(ExperimentalPagerApi::class)
@Composable
private fun HorizontalTabs(
    items: List<String?>?,
    pagerState: PagerState,
) {
    val dotRadius = 4.dp
    val dotSpacing = 8.dp
    
    Box(
        modifier = Modifier
            .height(dotRadius * 2)
            .fillMaxWidth()
    ) {
        Row(
            modifier = Modifier.align(Alignment.Center),
            horizontalArrangement = Arrangement.spacedBy(dotSpacing),
        ) {
            items?.forEachIndexed { index, _ ->
                Box(
                    modifier = Modifier
                        .size(dotRadius * 2)
                        .clip(CircleShape)
                        .background(
                            if (pagerState.currentPage == index) Color.Gray else Color.LightGray
                        ),
                )
            }
        }
    }
}

In this function, we create a Box component that wraps a row of Box components, each representing a dot. We use the clip modifier to round the corners of each dot and the background modifier to set the color based on whether the current page matches the index of the dot.

With these two functions in place, we can now easily create an image slider with Accompanist pager in our Jetpack Compose application.

I have sample app using jetpack compose with dynamic image slider in my repository github.com/im-o.

Done and dusted, thank you! 🎉

GitHub — im-o/jetpack-compose-clean-architecture: Jetpack Compose with usecase pattern 🎉