Image Gallery

Gallery Preview Default

Gallery Preview Hero

Slideshow

Image Grid

Chip Grid

Installation

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

Usage

Example of an image gallery preview default:

                                                
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryPreviewDefault
                                                
                                                BpkImageGalleryPreviewDefault(
                                                    image = Image(painter = painterResource(id = imageResId), contentDescription = ""),
                                                    buttonText = stringResource(stringResId),
                                                    onButtonClicked = { /* Do something */ },
                                                )

Example of an image gallery preview hero:

                                                
                                                import androidx.compose.foundation.layout.height
                                                import androidx.compose.ui.unit.dp
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryPreviewHero
                                                
                                                val pagerState = rememberBpkCarouselState(
                                                    totalImages = 4,
                                                )
                                                
                                                BpkImageGalleryPreviewHero(
                                                    modifier = modifier.height(345.dp),
                                                    state = pagerState,
                                                ) {
                                                    Image(
                                                        modifier = Modifier.fillMaxSize(),
                                                        painter = painterResource(id = imageResId),
                                                        contentDescription = "",
                                                        contentScale = ContentScale.Crop,
                                                    )
                                                }

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: String, contentScale: 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: String, contentScale: 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: String, contentScale: ContentScale ->
                                                                        // Image content
                                                                    },
                                                                ),
                                                                // more images
                                                            ),
                                                            content = {  /* Category image content */ },
                                                        ),
                                                        // more categories
                                                    ),
                                                )