Collapsing Toolbar in Jetpack Compose | Codebase

Glenn Sandoval

Published in

Kotlin and Kotlin for Android

6 min readMay 8, 2022

Project description and initial code

You can go to any article of this guide by clicking on one of the links below:

Collapsing Toolbar in Jetpack Compose

Project description

The project CollapsingToolbarInCompose is a native Android application whose UI is completely implemented in Jetpack Compose. It displays a list of items with a collapsing toolbar on top that behaves differently depending on its scroll flag.

The application is titled “Costa Rica Wildlife” and shows a list of exotic animals that can be found across this country. All the sample images are stored inside the res/drawable folder to avoid requests to external servers for simplicity.

Initially, the screen looks like the following image:

Codebase

⚠️ ATTENTION: In this guide, we won’t build any new composable except for the new screen that we are going to create using the composables already present in the project. Although I will describe them all, I’ll limit myself to show only the most relevant parts of their code.

🔗 You can find the initial code on my GitHub account:

GitHub - pencelab/CollapsingToolbarInCompose

A Coordinator Layout-like component in Jetpack Compose

github.com

Branches

master: Contains the initial code that we need to start working on the collapsing toolbar implementation.
column_version: Contains the resulting code using a Column.
lazycolumn_version: Contains the resulting code using a LazyColumn.

Package Organization

If you open the project and display its directory tree structure under the ‘Android’ view option, you will see the following:

There are two packages: data and ui. In the context of an MVVM or MVP architecture, these packages represent the Model layer and the View layer respectively.

Data package

Inside the data package, you can find another package named model. The model package contains the only data class required for our purpose.

— Animal.kt

This is the only data class which contains the animal’s name and its drawable resource ID that points to its respective image.

UI package

The ui package contains two packages: theme and composables.

theme: Contains all the files that Android Studio adds when a new project is created. Those files are the ones where we define colors, shapes, typography and the theme of our application.

💬 I’ll omit the description of those files since they are present in every project and you should be familiar with them already.

composables: Contains all the reusable composables that we need to build our UI with a collapsing toolbar functionality. These reusable composables are: the toolbar, both lists — one built with a Column and the other one with a LazyColumn—, and a Card.

Files and Composables

— AnimalCard.kt

The composable function AnimalCard defines the composable that will be used for displaying each item of the list and uses a Card as main structure.

Input Parameters:

animal: Instance of the animal to be displayed. It holds its name and its drawable resource ID.
modifier: Optional parameter applied to the Card.

This is what it looks like:

— Toolbar.kt

The composable function CollapsingToolbar defines the toolbar and uses a Surface as main structure.

Input Parameters:

backgroundImageResId: Drawable resource ID to be displayed as background.
progress: Value between 0f and 1f, where 1f corresponds to its expanded state and 0f corresponds to its collapsed state.
onPrivacyTipButtonClicked: Lambda that defines the event to be triggered when the ‘Privacy Tip’ button is clicked.
onSettingsButtonClicked: Lambda that defines the event to be triggered when the ‘Settings’ button is clicked.
modifier: Optional parameter applied to the Surface.

This is what it looks like in its collapsed state:

CollapsingToolbar | Collapsed state preview

This is what it looks like in its expanded state:

CollapsingToolbar | Expanded state preview

💬 If you’re curious about the toolbar’s composition and dynamics, check out my article “A closer look at the Toolbar”, where I discuss it in more detail.

— EagerCatalog.kt

The composable function EagerCatalog defines the scrollable component to be used along with the collapsing toolbar to form the screen that will be displayed. It uses a Column as main structure. Unlike a LazyColumn, a Column doesn’t apply paddings to its content, so we need to reproduce that effect with Spacer blocks.

Input Parameters:

animals: List of animals used for populating the Column.
columns: Number of items that will be displayed per row.
modifier: Optional parameter applied to the Column.
scrollState: Optional parameter applied to the verticalScroll modifier of the Column.
contentPadding: Optional parameter that determines the size of the Spacer blocks that will be attached to the content of the Column.

— LazyCatalog.kt

The composable function LazyCatalog defines the scrollable component to be used along with the collapsing toolbar to form the screen that will be displayed. It uses a LazyColumn as main structure.

Input Parameters:

animals: List of animals used for populating the LazyColumn.
columns: Number of items that will be displayed per row.
modifier: Optional parameter applied to the LazyColumn.
listState: Optional parameter applied to the state attribute of the LazyColumn.
contentPadding: Optional parameter applied to the contentPadding attribute of the LazyColumn.

This is what the entire list looks like in either version:

💬 You can use a LazyVerticalGrid instead of a LazyColumn for the same grid effect.

— MainActivity.kt

This is the only Activity in the project, so this is the Activity that will be displayed when the application is launched. For simplicity, the list of animals is hardcoded and populated during onCreate.

The composable function CollapsingToolbarInComposeApp is called at the end of onCreate and defines the screen to be displayed.

Input Parameters:

animals: List of animals used for populating the content of the catalog.

And that’s it! If you’re curious about the composition and details of any of these composables, take a closer look at their code, explore and play around with them. In the next articles, we are going to build the new screen using all the composables presented in this article. I’ll be especially focusing on the different scroll flag implementations to make them interchangeable, so we will be able to change the toolbar behavior by modifying only one line of code.

Continue with the article of the version you’re interested in: