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
) {
/* ... */
}
ScrollStrategy.EnterAlways
ScrollStrategy.EnterAlwaysCollapsed
ScrollStrategy.ExitUntilCollapsed
3 Jun 20, 2022
14 Dec 21, 2022
5 Dec 29, 2022
21 Dec 7, 2022
9 Jul 11, 2022
116 Dec 22, 2022
24 Nov 18, 2022
1 Feb 26, 2022
8 Dec 18, 2022
38 Sep 25, 2022
186 Jan 1, 2023
382 Jan 5, 2023
3 Dec 31, 2022
1 Aug 11, 2022
180 Jan 2, 2023
5 Apr 5, 2022
3 Dec 15, 2022
10 Dec 29, 2022