compose-collapsing-toolbar

A simple implementation of CollapsingToolbarLayout for Jetpack Compose

Installation

You should add mavenCentral() repository before installation. Then add the following line to the dependencies block in your app level build.gradle:

implementation "me.onebone:toolbar-compose:2.0.1"

or build.gradle.kts:

implementation("me.onebone:toolbar-compose:2.0.1")

Example

An example can be found here.

Usage

Connecting AppBarContainer and CollapsingToolbar

The first step you should do to use collapsing toolbar is to connect AppBarContainer and CollapsingToolbar. This can be accomplished by passing the same CollapsingToolbarState instance to AppBarContainer and CollapsingToolbar. A most common way to get the state is by using rememberCollapsingToolbarState():

val state = rememberCollapsingToolbarState()

AppBarContainer(
    collapsingToolbarState = state,
    /* ... */
) {
    CollapsingToolbar(
        // Be sure to pass the same CollapsingToolbarState instance you passed to AppBarContainer
        collapsingToolbarState = state,
        /* ... */
    ) {
        /* ... */
    }
}

Adding child to CollapsingToolbar

Similar to CollapsingToolbarLayout, you may add children to the CollapsingToolbar. The toolbar will collapse until it gets as small as the smallest child, and will expand as large as the largest child.

Adding child to AppBarContainer

The AppBarContainer may consist of at most one CollapsingToolbar and unlimited number of body composable. Each body composable should be marked with appBarBody() modifier:

AppBarContainer(/* ... */) {
    CollapsingToolbar(/* ... */) {
        /* ... */
    }

    LazyColumn(
        modifier = Modifier
            .appBarBody() // <<--- body composable should be marked with `appBarBody()` modifier 
    ) {
        /* ... */
    }
}

Note that the CollapsingToolbar only if the body composable is scrollable. You don't need to care about anything when using LazyColumn because it is scrollable by default, however, if you hope to use non-scrollable such as Column or Row as body you should use verticalScroll() modifier for CollapsingToolbar to inspect nested scroll.

AppBarContainer(/* ... */) {
    CollapsingToolbar(/* ... */) {
        /* ... */
    }

    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            // ^^ body composable should be scrollable for collapsing toolbar to play with nested scroll
            .appBarBody()
    ) {
        /* ... */
    }
}

parallax, pin, road

You can tell children of CollapsingToolbar how to deal with a collapse/expansion. This works almost the same way to the collapseMode in the CollapsingToolbarLayout except for the road modifier.

CollapsingToolbar(/* ... */) {
    Image(
        modifier = Modifier.parallax(ratio = 0.2f) // parallax, pin, road are available
    )
}

road modifier

The road() modifier allows you to place a child relatively to the toolbar. It receives two arguments: whenCollapsed and whenExpanded. As the name suggests, these describe how to place a child when the toolbar is collapsed or expanded, respectively. This can be used to display a title text on the toolbar which is moving as the scroll is fed.

CollapsingToolbar(/* ... */) {
    Text(
        text = "Title",
        modifier = Modifier
            .road(
                whenCollapsed = Alignment.CenterStart,
                whenExpanded = Alignment.BottomEnd
            )
    )
}

The above code orders the title Text to be placed at the CenterStart position when the toolbar is collapsed and BottomEnd position when it is expanded.

Scroll Strategy

ScrollStrategy defines how CollapsingToolbar consumes scroll. You can set your desired behavior by providing scrollStrategy at AppBarContainer:

AppBarContainer(
    /* ... */
    scrollStrategy = ScrollStrategy.EnterAlways // EnterAlways, EnterAlwaysCollapsed, ExitUntilCollapsed are available
) {
    /* ... */
}

amenon / compose-collapsing-toolbar Goto Github PK