CollapsingToolbarInCompose

Branches

master: Initial code.
column_version: Resulting code using a Column.
lazycolumn_version: Resulting code using a LazyColumn.

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

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.