Ryggs / pagecurl

This library allows to create an effect of turning pages, which can be used in book reader applications, custom on-boarding screens or elsewhere.

Page Curl

Page Curl library for Jetpack Compose.

Motivation

This library allows to create an effect of turning pages, which can be used in book reader applications, custom on-boarding screens or elsewhere.

Usage

Get a dependency

Step 1. Add the MavenCentral repository to your build file. Add it in your root build.gradle.kts at the end of repositories:

allprojects {
    repositories {
        ...
        mavenCentral()
    }
}

Or in settings.gradle.kts:

pluginManagement {
    repositories {
        ...
        mavenCentral()
    }
}

Step 2. Add the dependency. Check latest version on the releases page.

dependencies {
    implementation("io.github.oleksandrbalan:pagecurl:$version")
}

Use in Composable

The PageCurl has 2 mandatory arguments:

• count - The count of pages.
• content - The content lambda to provide the page composable. Receives the page number.

val pages = listOf("One", "Two", "Three")
PageCurl(count = pages.size) { index ->
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(MaterialTheme.colors.background)
            .fillMaxSize()
    ) {
        Text(
            text = pages[index],
            style = MaterialTheme.typography.h1,
        )
    }
}

Optionally state could be provided to observe and manage PageCurl state.

• state - The state of the PageCurl. Use it to programmatically change the current page or observe changes, and to configure shadow, back-page and interactions.

Column {
    val scope = rememberCoroutineScope()
    val state = rememberPageCurlState()
    Button(onClick = { scope.launch { state.next() } }) {
        Text(text = "Next")
    }

    val pages = listOf("One", "Two", "Three")
    PageCurl(
        count = pages.size,
        state = state,
    ) { index ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(MaterialTheme.colors.background)
                .fillMaxSize()
        ) {
            Text(
                text = pages[index],
                style = MaterialTheme.typography.h1,
            )
        }
    }
}

Optionally key lambda could be provided with stable key for each item. PageCurl with keys for each page will correctly preserve a current position when items are added or removed.

• key - The lambda to provide stable key for each item. Useful when adding and removing items before current page.

Column {
    var pages by remember { mutableStateOf(listOf("Four", "Five", "Six")) }
    Button(onClick = { pages = listOf("One", "Two", "Three") + pages }) {
        Text(text = "Prepend new pages")
    }

    PageCurl(
        count = pages.size,
        key = { pages[it].hashCode() },
    ) { index ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .background(MaterialTheme.colors.background)
                .fillMaxSize()
        ) {
            Text(
                text = pages[index],
                style = MaterialTheme.typography.h1,
            )
        }
    }
}

See Demo application and examples for more usage examples.

Simple.Page.Curl.mp4

Shadow.Configuration.mp4

Back.Page.Configuration.mp4