Add Expandable Horizontal Pager in Android Jetpack Compose.

Related tags

Kotlin Projects android kotlin library uiview android-sdk kotlin-library android-library pager android-lib jetpack-compose compose-library jetpack-compose-library
Overview

ExpandableHorizontalPagerCompose

Add Expandable Horizontal Pager in Android Jetpack Compose.

How it looks

Usage

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

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' }
       ...
    }
} 
...
  1. Sync the project
  2. Add dependencies
dependencies {
        implementation "com.google.accompanist:accompanist-pager:0.26.5-rc"
        implementation 'com.github.commandiron:ExpandableHorizontalPagerCompose:1.0.11'
}
You might also like...
Clean Android multi-module offline-first scalable app in 2022. Including Jetpack Compose, MVI, Kotlin coroutines/Flow, Kotlin serialization, Hilt and Room.

Android Kotlin starter project - 2022 edition Android starter project, described precisely in this article. Purpose To show good practices using Kotli

Krzysztof Dąbrowski 176 Jan 3, 2023
Android & iPhone payments apps built w/ SwiftUI & Jetpack Compose
Android & iPhone payments apps built w/ SwiftUI & Jetpack Compose

Android & iPhone payments apps built w/ SwiftUI & Jetpack Compose, the apps persist data locally w/ SQLDelight and Remote w/ Firebase., Payments w/ Stripe and are architected to emphasize code sharing

Mwai Banda 21 Dec 21, 2022
Build with Jetpack Compose & all modern techniques and architecture of android app development
Build with Jetpack Compose & all modern techniques and architecture of android app development

IMDB Movie App Build with Jetpack Compose & all modern techniques and architecture of android app development ScreenShots 🛠 Built With 🛠 Kotlin - Fi

Jayant Kumar 7 Dec 17, 2022
Spinwheel for Android using Jetpack Compose.
Spinwheel for Android using Jetpack Compose.

SpinwheelCompose SpinWheel in Android using Jetpack Compose. How it looks Usage val textList by remember { mutableStateOf( listOf("Pie 1"

Emir Demirli 8 Dec 18, 2022
Affogato is a multipurpose library for Android, Jetpack Compose and Kotlin.
Affogato is a multipurpose library for Android, Jetpack Compose and Kotlin.

Affogato Affogato is a multipurpose library for Jetpack Compose, Android and Kotlin. Core-ktx Core-ktx is a Kotlin library that provides a set of Kotl

Ghasem Shirdel 8 Sep 3, 2022
PhotoSearch is an Android TV app using Jetpack Compose.
PhotoSearch is an Android TV app using Jetpack Compose.

PhotoSearch What's PhotoSearch? 🚀 PhotoSearch is an Android TV app using Jetpack Compose UI. The purpose of this project is to try new Android techno

Erick Tijero 4 Nov 18, 2022
AnKunv2 is an Android application built with Jetpack Compose to stream anime on demand.
AnKunv2 is an Android application built with Jetpack Compose to stream anime on demand.

AnKunv2 AnKunv2 is an app a bit similar to YouTube but to stream anime. Updated from AnKun using Jetpack Compose. Tech Stack Kotlin AndroidX UI - Jetp

Albert E 7 Jan 7, 2023
Ejemplo de App Android con Kotlin, Jetpack Compose, Retrofit y consumo de la API REST de Pokémon
Ejemplo de App Android con Kotlin, Jetpack Compose, Retrofit y consumo de la API REST de Pokémon

Pokémon Jetpack Compose Ejemplo de App Android con Kotlin, Jetpack Compose, Retrofit y consumo de la API REST de Pokémon Jetpack Compose Retrofit Poké

Brais Moure 70 Jan 31, 2023
Jetpack Compose for Desktop and Web, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
Jetpack Compose for Desktop and Web, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.

Jetpack Compose for Desktop and Web, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.

JetBrains 10k Jan 7, 2023
Comments
  • i cant change any property in the design

    i cant change any property in the design

    Hi friend, i hope u replace the modifier in the design with the instance rather than the main Modifier , because no one can edit any property in the column or another components size or color etc...

    opened by nooraldenakel 2
Releases(1.0.12)
Owner
Emir Demirli
Emir Demirli
GitHub
Add Ios Swipe Search TextField Component in Android Jetpack Compose.

IosSwipeSearchCompose Add Ios Swipe Search TextField Component in Android Jetpack Compose. How it looks Usage val text = remember { mutableStateOf("")

Emir Demirli 11 Jan 9, 2023
Add screenshots to your Android tests

Testify — Android Screenshot Testing Add screenshots to your Android tests Expand your test coverage by including the View-layer. Testify allows you t

Shopify 222 Dec 26, 2022
Titanium Android module: Add a view to a BottomNavigation

ti.bottomNavView Titanium Android module that allows you to add a custom view to a BottomNavigation: Install <module>ti.bottomNavView</module> Method

Michael Gangolf 5 Aug 23, 2022
Starterexpert - Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target

TwoSum Given an array of integers nums and an integer target, return indices of

Praveen Kumar Kumaresan 0 Jan 17, 2022
Add page & limit as GET parameter to get all titans data in a paginated format

Add page & limit as GET parameter to get all titans data in a paginated format (default values : page=1 and limit=3). Here the page param is the page number which you require and limit is the maximum number of items per page. Sample Request :

krishna chaitanya 1 Jan 31, 2022
Kotlin extension function provides a facility to "add" methods to class without inheriting a class or using any type of design pattern

What is Kotlin Extension Function ? Kotlin extension function provides a facility to "add" methods to class without inheriting a class or using any ty

mohsen 21 Dec 3, 2022
🛒 Mercado Libre App Clone using modern Android development with Hilt, Coroutines, Jetpack (Room, ViewModel), and Jetpack Compose based on MVVM architecture.

Meli Clone ?? Mercado Libre App Clone using modern Android development with Hilt, Coroutines, Jetpack (Room, ViewModel), and Jetpack Compose based on

Esteban Aragon 7 Sep 22, 2022
FirestoreCleanArchitectureApp is an app built with Kotlin and Firestore that displays data in real-time using the MVVM Architecture Pattern. For the UI it uses Jetpack Compose, Android's modern toolkit for building native UI.

FirestoreCleanArchitectureApp FirestoreCleanArchitectureApp is an app built with Kotlin and Cloud Firestore that displays data in real-time using Andr

Alex 66 Dec 15, 2022
Modular Android architecture which showcase Kotlin, MVVM, Navigation, Hilt, Coroutines, Jetpack compose, Retrofit, Unit test and Kotlin Gradle DSL.

SampleCompose Modular Android architecture which showcase Kotlin, MVVM, Navigation, Hilt, Coroutines, Jetpack compose, Retrofit, Unit test and Kotlin

Mohammadali Rezaei 7 Nov 28, 2022
Accounting-App - An Android app built with Kotlin, Material, Jetpack Compose, Hilt, Room, Coroutines, Data-Store, MVVM-Clean Architecture and JUnit tests

Accounting App An Android app built with Kotlin, Material, Jetpack Compose, Hilt

Madhur Gupta 18 Dec 2, 2022