jetc.dev Newsletter Issue #171

Published: 2023-07-04

There is a new Compose Compiler version, a new Compose beta, and a new Compose Multiplatform patch release — we peek at all three!

In addition, we examine the impacts of ordinary var properties, @Immutable, and @Stable on recompositions. We see floating bubbles and improved animations in action menus. Our rounded rectangles get smoother. And our string resources get typesafe composable builders.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler is up to 1.4.8 and is able to target Kotlin 1.8.22. It also improves some errors and warnings around @Composable annotation usage.

The main Compose dependencies are up to 1.5.0-beta03. Other than adding support for custom FocusTarget implementations, and a new progress property on states like BottomSheetState and ModalBottomSheetState, this release is mostly bug fixes. It feels like we will move into RCs and a stable release fairly soon.

In Compose-adjacent dependencies, Navigation for Compose is up to 2.7.0-beta02.

Finally, Compose Multiplatform is up to 1.4.1, mostly with bug fixes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Does Mutable Data Not Trigger Recomposition?

This keeps coming up, so I keep pointing it out through these questions… Compose is powerful but it is not magic. In particular, changing the value of a plain var often does not trigger recomposition, as a plain var is not some form of State that is being observed. Learn more in this week’s highlighted Stack Overflow question.

Why Does @Immutable Data Not Trigger Recomposition?

Sometimes, we want recomposition to be skipped, such as when data really does not change but Compose might think it is. Two key tools for that are the @Immutable and @Stable annotations. However, the documentation is a bit confusing (“positional memoization”?). Learn more about the practical impacts of these two annotations in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Crafting a Floating Bubble in Android with Jetpack Compose

Vaios Tsitsonis needed a floating draggable bubble, akin to Android’s notification bubbles, but within an app. The resulting implementation leveraged onGloballyPositioned(), pointerInput(), and offset() modifiers.

Medium: Performance With Jetpack Compose — Part 1

Udit Verma created a two-post series, demonstrating how to dramatically reduce recompositions. The fixes ranged from simple remember() calls through immutable/stable parameters, deferring state reads by converting parameters to lambdas, and more!

Medium: Demystify Jetpack Compose Layout Constraint and Size Setting

Elye is back, this time examining the layout() modifier. layout() is very powerful, but also is sometimes unintuitive, and Elye spends a lot of time explaining its use.

Chris Mack refines the animations used in this earlier Medium post, to avoid some jank, have the menu expand from where the member tapped on it, and more.

HorizontalPager() is great, and it has low-level support for pager indicators, but there is a lack of actual indicator implementations. Radhika S shows how to implement a wide range of indicators, from simple sliding bars to bouncing dots and more.

Rhytham Negi walks us through a typical bottom tab bar implementation, using Navigation for Compose to control the content rendered based on the selected tab, using a sealed class to represent the bar items and their associated navigation routes.

Resource Roundup

100% pure code!

GitHub: c5inco / smoother

Google’s Chris Sinco published a sample app demonstrating a SmootherShape that implements a rounded rectangle with smoother corners, matching Figma’s approach.

GitHub: chrisbanes / material3-windowsizeclass-multiplatform

Chris Banes created an implementation of Material3’s window size classes for Compose Multiplatform, with support for Android, iOS, and desktop.

Paraphrase

The Cash App folks created a Gradle plugin that takes ICU message string resources and creates typesafe formatters for them, so you do not accidentally try to put a number into a string or vice versa. The formatters support both Compose UI and classic views.