Image Gallery

Carousel

Day	Night

Slideshow

Day	Night

Image Grid

Day	Night

Chip Grid

Day	Night

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of an image gallery carousel:

                                                
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryCarousel
                                                
                                                val state = rememberBpkCarouselState(totalImages = totalImages)
                                                
                                                BpkImageGalleryCarousel(
                                                    state = state,
                                                    modifier = Modifier.height(100.dp),
                                                    onImageClicked = { index -> /* handle on click */ },
                                                ) { index ->
                                                    Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
                                                }

Example of an image gallery without categories:

                                                
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGallerySlideshow
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImage
                                                
                                                val modalState = rememberBpkModalState()
                                                val coroutineScope = rememberCoroutineScope()
                                                
                                                BpkImageGallerySlideshow(
                                                    modifier = modifier,
                                                    state = modalState,
                                                    closeContentDescription = "",
                                                    initialImage = 0,
                                                    onCloseClicked = { coroutineScope.launch { modalState.hide() } },
                                                    onDismiss = { /* handle dismiss */ },
                                                    onImageChanged = { /* Handle on image change if needed (ie logging) */ },
                                                    images = listOf(
                                                        BpkImageGalleryImage(
                                                            title = "",
                                                            description = "",
                                                            credit =  "",
                                                            content = { contentDescription, contentScale ->
                                                                // Image content
                                                            },
                                                        ),
                                                    )
                                                )

Example of an image gallery with categories and chips:

                                                
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryChipCategory
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryChipGrid
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImage
                                                
                                                val modalState = rememberBpkModalState()
                                                val coroutineScope = rememberCoroutineScope()
                                                
                                                BpkImageGalleryChipGrid(
                                                    modifier = modifier,
                                                    state = modalState,
                                                    initialCategory = 0,
                                                    closeContentDescription = "",
                                                    onCloseClicked = { coroutineScope.launch { modalState.hide() } },
                                                    onDismiss = { /* handle dismiss */ },
                                                    onImageChanged = { /* Handle on image change if needed (ie logging) */ },
                                                    onCategoryChanged = { /* Handle on category change if needed (ie logging) */ },
                                                    onImageClicked = { /* Handle on image clicked if needed (ie logging) */ },
                                                    categories =  listOf(
                                                        BpkImageGalleryChipCategory(
                                                            title = title,
                                                            images = listOf(
                                                                BpkImageGalleryImage(
                                                                    title = "",
                                                                    description = "",
                                                                    credit =  "",
                                                                    content = { contentDescription, contentScale ->
                                                                        // Image content
                                                                    },
                                                                ),
                                                                // more images
                                                            ),
                                                        ),
                                                        // more categories
                                                    ),
                                                )

Example of an image gallery with categories and image chips:

                                                
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImageCategory
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImageGrid
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImage
                                                
                                                val modalState = rememberBpkModalState()
                                                val coroutineScope = rememberCoroutineScope()
                                                
                                                BpkImageGalleryImageGrid(
                                                    modifier = modifier,
                                                    state = modalState,
                                                    initialCategory = 0,
                                                    closeContentDescription = "",
                                                    onCloseClicked = { coroutineScope.launch { modalState.hide() } },
                                                    onDismiss = { /* handle dismiss */ },
                                                    onImageChanged = { /* Handle on image change if needed (ie logging) */ },
                                                    onCategoryChanged = { /* Handle on category change if needed (ie logging) */ },
                                                    onImageClicked = { /* Handle on image clicked if needed (ie logging) */ },
                                                    categories =  listOf(
                                                        BpkImageGalleryImageCategory(
                                                            title = title,
                                                            images = listOf(
                                                                BpkImageGalleryImage(
                                                                    title = "",
                                                                    description = "",
                                                                    credit =  "",
                                                                    content = { contentDescription, contentScale ->
                                                                        // Image content
                                                                    },
                                                                ),
                                                                // more images
                                                            ),
                                                            content = {  /* Category image content */ },
                                                        ),
                                                        // more categories
                                                    ),
                                                )