ExpandableHorizontalPagerCompose

Add Expandable Content (Image etc.) Horizontal Pager in Android Jetpack Compose.

How it looks

Usage

ExpandableHorizontalPager(
    count = films.size,
    initialHorizontalPadding = 64.dp,
    initialWidth = 240.dp,
    targetWidth = maxWidth,
    mainContent = { page ->
        AsyncImage(
            modifier = Modifier.fillMaxSize(),
            model = ImageRequest.Builder(LocalContext.current)
                .data(films[page].imageUrl)
                .crossfade(true)
                .build(),
            contentDescription = null,
            contentScale = ContentScale.FillHeight
        )
    },
    overMainContentExpanded = { page ->
        OverMainContent(
            title = "Details",
            imageVector = Icons.Default.KeyboardArrowDown
        )
    },
    overMainContentCollapsed = { page ->
        OverMainContent(
            title = "Close",
            imageVector = Icons.Default.KeyboardArrowUp,
            iconOnTop = true
        )
    },
    HiddenContent(
        title = films[page].title,
        overview = films[page].overview
    )
)

Setup

1. Open the file settings.gradle (it looks like that)

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        // add jitpack here 👇🏽
        maven { url 'https://jitpack.io' }
       ...
    }
} 
...

2. Sync the project
3. Add dependencies

dependencies {
        implementation "com.google.accompanist:accompanist-pager:0.26.5-rc"
        implementation 'com.github.commandiron:ExpandableHorizontalPagerCompose:1.0.4'
}