CollapsingToolbarInCompose
Branches
master: Initial code.column_version: Resulting code using aColumn.lazycolumn_version: Resulting code using aLazyColumn.
Description
This is a native Android application whose UI is completely implemented in Jetpack Compose. It replicates the functionality of a Coordinator Layout and displays a list of items with a collapsing toolbar on top that behaves differently depending on its scroll flag.
This project is part of a programming guide published on Medium that shows how to implement a collapsing toolbar in Jetpack Compose which can be found here.
Purpose
The main purpose is to show how to implement the same functionality of a Coordinator Layout built 100% in Jetpack Compose. In order to do so, 4 out of its 5 different behaviors/scroll flags are implemented:
Scroll behavior
The toolbar acts like if it were attached to the top of the list. When the list is scrolled down, the toolbar gets collapsed and leaves the screen before the first element does. When the list is scrolled up, once the first element is completely shown, the toolbar enters the screen and gets expanded.
EnterAlways behavior
As soon as the list is scrolled down, no matter its current position or scroll state, the toolbar gets collapsed and leaves the screen. When the list is scrolled up, the toolbar enters the screen immediately and gets expanded.
EnterAlwaysCollapsed behavior
As soon as the list is scrolled down, no matter its current position or scroll state, the toolbar gets collapsed and leaves the screen. When the list is scrolled up, the toolbar enters the screen immediately, but it only gets expanded if the first element is being shown completely.
ExitUntilCollapsed behavior
In this case, the toolbar never leaves the screen. As soon as the list is scrolled down, no matter its current position or scroll state, the toolbar gets collapsed. When the list is scrolled up, the toolbar gets expanded only if the first element is being shown completely.
Theme
The application is titled Costa Rica Wildlife and shows a list of exotic animals that can be found across this country.
Photo Credits
- Arenal Volcano by [Fabio Fistarol]
- Jaguar by [Omar Mena]
- Scarlet Macaw by [Shannon Kunkle]
- Baby Green Sea Turtle by [Charlotte Rush]
- Red-Eyed Tree Frog by [Zdeněk Macháček]
- Hoffman's Two-Toed Sloth by [Adrián Valverde]
- Resplendent Quetzal by [Zdeněk Macháček]
- White-Nosed Coati by [Frank Williams]
- Green Iguana by [Alli Elder]
- Keel-Billed Toucan by [Zdeněk Macháček]
- Capuchin Monkey by [Etienne Delorieux]
- Emerald Basilisk by [Ray Harrington]
- King Vulture by [Birger Strahl]