A Coordinator Layout-like component in Jetpack Compose.

Related tags

Jetpack Compose CollapsingToolbarInCompose
Overview

CollapsingToolbarInCompose

Branches

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

💬 lazycolumn_version branch will be available along with its articles soon. Stay tuned! It won't take longer than a week between publications.

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.

Expanded Toolbar Preview


Collapsed Toolbar Preview


Sample List Preview

Photo Credits

You might also like...
Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle events. ViewModel, UI and Screenshot tests included :)
Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle events. ViewModel, UI and Screenshot tests included :)

AndroidMVIExample Example Jetpack Compose Android App, that uses the newest mechanisms, like StateFlow, SharedFlow, etc. to manage states and handle e

Patryk Kosieradzki 55 Nov 18, 2022
FullMangement - an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries, and MVVM design pattern.
FullMangement - an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries, and MVVM design pattern.

Full Management is an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries and MVVM design pattern.

Amr algnyat 4 Nov 1, 2022
🔥 Yet another Tinder like swipeable cards, built for Jetpack Compose
🔥 Yet another Tinder like swipeable cards, built for Jetpack Compose

twyper Yet another Tinder like swipeable card library, built for Jetpack Compose ✨ Demo Screen.Recording.2022-02-20.at.10.46.59.PM.mov ⌨️ Usage 1. Add

theapache64 88 Dec 24, 2022
Jetpack Compose is like Android XML

Jetpack Compose is like Android XML

CHECK24 Profis 11 Nov 18, 2022
A Jetpack Compose Modifier that enables Tinder-like card gestures.
A Jetpack Compose Modifier that enables Tinder-like card gestures.

Compose Tinder Card A Jetpack Compose Modifier that enables Tinder-like card gestures. Demo Click the play button to see the Modifier.swipeableCard()

Alex Styl 93 Dec 28, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

🐜 🐜 🐜 Compose flocking Ants(boids) 🐜 🐜 🐜 Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop 🚀 , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Comments
  • Android 12+ issues

    Android 12+ issues

    Hello there,

    One info, in order to use this implementation with lazy column and ExitUntilCollapsedState, you should disable overscroll effect on that list since on Android 12+ animation is interrupted with items stretching.. or rework it somehow :)

    opened by vladanSD 1
Owner
Glenn
I’m a software developer who loves learning and making new things all the time. I especially like mobile technology.
Glenn
GitHub
Kotlin, MVVM, Navigation Component, Hilt, Jetpack Compose, Retrofit2

What is this project? This course will replace my old java mvvm introduction: https://codingwithmitch.com/courses/rest-api-mvvm-retrofit2/. Watch the

Mitch Tabian 452 Jan 1, 2023
ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet. Use blurhash and coil to ensure good performance.

compose-image-blurhash ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real

Orlando Novas Rodriguez 24 Nov 18, 2022
Android Sample Kotlin+ MVI + Jetpack compose + Coroutines + Retrofit + Hilt + Room + Navigation component

MVIComposeSample Android Sample app to show user latest movies implementing MVI + Clean Architecture using kotlin & Jetpack compose following solid an

Ahmed Atwa 10 Dec 28, 2022
Icontent - Jetpack Compose component to show all random content sended by Inmersoft guide backend

icontent IContent is a library that allows loading audio visual content generica

Orlando Novas Rodriguez 3 Nov 3, 2022
❤️ A heart-shaped toggle switch component built using Jetpack Compose

heart-switch A heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's I heart toggle Dribbble shot and Anatoliy

Anton Popov 30 Dec 14, 2022
Jetpack Compose component box.

Jetpack Compose Component Box About The Project ℹ️ This project is a project where you can find and use custom components in Jetpack Compose. Our goal

Mert Toptas 43 Dec 10, 2022
A Jetpack Compose component used for displaying Markdown-formatted text.

MarkdownText A library for displaying Markdown contents within Jetpack Compose. Uses Coil Current limitations Lists that are annotated with the * must

Arnau Mora 4 Dec 15, 2022
Android Clean Architecture with MVVM using Jetpack component

Android Clean Architecture with MVVM using Jetpack component ?? What is Clean Architecture? Clean architecture is a category of software design patter

Jbsolutions 6 Dec 10, 2022
Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Shivaraj M Patil 1 Apr 13, 2022
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Bernat Borrás Paronella 178 Jan 4, 2023