Jetpack Compose for days

Curated resources to improve your knowledge of Jetpack Compose

Welcome to my new newsletter! Today’s issue is about Jetpack Compose. If you're not familiar with Jetpack Compose, it is a modern declarative UI framework for Android that allows developers to build native apps more quickly and easily.

With Jetpack Compose, you can create beautiful, responsive, and functional user interfaces with minimal code. In this issue, I’ll be sharing many resources to help you learn and improve your knowledge of Jetpack Compose.

Below you can find many resources grouped by topic to improve your knowledge of Jetpack Compose.

📝 State

State in Jetpack Compose Codelab

This codelab explains the core concepts related to using State in Jetpack Compose. It shows you how the app's state determines what is displayed in the UI, how Compose updates the UI when state changes by working with different APIs, how to optimize the structure of our composable functions, and using ViewModels in a Compose world.

A Compose state of mind: Using Jetpack Compose's automatic state observation

In this talk, Manual Vivo talks about how state works in Compose. He also teaches how to make sure Compose remembers the values you set and where to hoist state.

Gotchas in Jetpack Compose Recomposition

It’s very easy to create composables in Jetpack Compose, however, that also makes it very easy to missuse them. In the article you’ll learn common mistakes people making when storing state in Compose and how to fix them.

Jetpack Compose State Guideline

Very informative article showing 9 do’s and dont’s of state handling in Jetpack Compose.

Jetpack Compose Stability Explained

Have you ever seen @Stable or @Immatuble? Do you know what these annotations do? This article teaches you how they work and how Compase uses them to know when state changed.

Scoped recomposition in Jetpack Compose

This is a 7 part series that goes in depth to explain how state works in Jetpack Compose. If you’re really want to test your knowledge of state handling, this is a must read.

▶️ Animation

Animation

Official Android documentation about animations, probably the most extensive article you’re going to find. This document describes how to use Animation APIs as well as which API to use depending on your animation scenario.

Animating elements in Jetpack Compose Codelab

Learn how to use some Animation APIs in Jetpack Compose. The Codelab teaches animation such as changing a value, visibility and content size.

Implementing a circular carousel in Jetpack Compose

Well written article explaning how the author created a circular carousel, a set of items that the user can spin around. Not only it teaches you about Jetpack Compose but you also learn some math.

Animating brush Text coloring in Compose 🖌️

Learn how to use the brush to add a coloring effect to your texts.

Collapsing toolbar with parallax effect and curved motion in Jetpack Compose

Learn how to implement a collapsing toolbar with parallax effect in jetpack compose using no third party libraries. You’ll also learn how to implement curved motion using quadratic Bézier curve.

Customizing AnimatedContent in Jetpack Compose 🌟

Rebecca teaches us how to use the AnimatedContent composable to create beautiful content transitions in Compose. If you don’t know much about transition specs this article also shows some cool transitions you can use such slideIntoContainer, fadeOut, fadeIn and slideInHorizontally.

🎨 Theming

Jetpack Compose theming Codelab

Jetpack Compose introduced a new way of theming your app, in this Codelab, you’re going to learn how to create a consist theme that’s applied throughout your app.

Material Theming with Jetpack Compose Codelab

Similar to the previous Codelab but focused on Meterial Design.

Custom design systems in Compose

If you have a app that’s customized the Material Design might not fit it, this article explains how to create your own theme so that it can be customized to your needs.

🧪 Testing

Testing your Compose layout

Official Android documentation about testing, probably the most extensive article you’re going to find. It teaches you how to use finders, assertions, actions and matchers. It also teaches you common pattern to help you with testing.

Testing in Jetpack Compose Codelab

It doesn’t go in depth into testing but has a useful section about debugging your tests.

        |-Node #3 at (l=42.0, t=105.0, r=105.0, b=168.0)px
        | Role = 'Tab'
        | Selected = 'false'
        | StateDescription = 'Not selected'
        | ContentDescription = 'Overview'
        | Actions = [OnClick]
        | MergeDescendants = 'true'
        | ClearAndSetSemantics = 'true'

Jetpack Compose UI testing

Talks about advanced tips for testing Jetpack Compose such as how to test large and foldable screens.

Lessons learned on Jetpack Compose UI Testing: Robot Pattern

Teaches how to use the Robot pattern with Jetpack Compose components.

🏗️ Projects

Now in Android

This project built and maintaned by Google uses Material 3 and Jetpack Compose. It follows the architecture guidelines defined by Google, supports dark mode, is modularized and uses baseline profiles to improve startup times.

Marquee with Jetpack Compose

A marquee text, or in other words a component that scrolls the text if it doesn’t fit inside its bounds. In this article the author goes over the code to understand how it works and try to improve it.

Building a Budget Tracker with Jetpack Compose

He used Google Sheets to keep track of his income/expenses so he decided to build an app using Compose that would do same. In this article he shows the mistakes he made and how he built some of the customized components that were used in the project.

Bitcoin Market

Bitcoin Market app shows you the current Bitcoin market price and price chart of different time intervals.

Flux

Flux is a dynamic weather that communicates the weather throughout a landscape whose details vary according to the time and the weather at that particular time. This dynamic landscape follows a day / night cycle with multiple layers that vary regarding the phase of the day (night, sunrise, day and sunset). The sun and the moon are drawn using a quadratic function computed according to the available space for simplicity purposes.

JetHub

JetHub is a sample app using Github API and Jetpack components.

---

This is the first of many issues of my new newsletter aimed at helping you become a better engineer. It’ll be focused on Android/Kotlin but will also have topics that apply to software engineering in general.

Instead of simply sharing the latest news and updates, we've curated a selection of articles that we believe offer unique insights and have the potential to make a significant impact on your work as a developer.

If you like this issue please share and subscribe. See you next time :)