jetc.dev Newsletter Issue #139

Published: 2022-11-01

This week, we look at the new stable Compose 1.3.0… and what comes afterwards!

We also have a long list of Android Dev Summit videos, a look at applying a state machine to Compose state, and a new Google tool to convert Figma diagram components into composables.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

First, we now have a bill of materials (BOM) for applying a consistent set of Compose artifacts. The documentation shows how to use it. The 2022.10.00 edition of the BOM points to Compose 1.3.0, the new stable minor version. Google’s Jolanda Verhoef also has a linked set of tweets describing how to use the BOM.

But, stuff never stays stable for long, as we also now have 1.4.0-alpha01. Of note:

SnapshotStateList offers toList() and SnapshotStateMap offers toMap(), with implementations that avoid data copies
AnnotatedString.Builder supports Appendable
awaitEachGesture() replaces forEachGesture()
WindowInsets now offers imeAnimationSource and imeAnimationTarget

We also got a beta01 for Wear Compose 1.1.0. In addition to bug fixes, we can now specify font details (e.g., family, weight) to CurvedText().

Android Dev Summit 2022

Google held the first phase of the Android Dev Summit 2022 in Mountain View. The event consisted of a dizzying array of short presentations (the longest was about 25 minutes, and most were under 10 minutes). Ones expressly on Compose include:

There were other presentations related to Compose as well, such as “Introducing Relay” and “State holders and state production in the UI layer”.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Move the Focus?

The good news is that FocusRequester() and the focusRequester() modifier make it easy to change the focus. However… not everything is focusable by default, necessitating the use of the focusable() modifier. See this in action in this week’s highlighted Stack Overflow question.

How Do We Flash a Background?

Animating the background of a UI element to draw attention to it is reasonably common. However, this requires an animation with limited repetition: not just once and not forever. You have a few options for this, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

What’s new in Jetpack Compose

Google’s Jolanda Verhoef provided us with the official announcement of the Compose 1.3.0 stable release, the Compose BOM, and more! The post includes links to the Lyft marketing piece and the Zepeto marketing piece, describing their experiences with Compose.

Material Design 3 for Compose hits stable

Google’s Gurupreet Singh announced that the Compose Material Design 3 artifacts are now in a stable release (though, oddly, the post fails to mention that this is 1.0.0).

Tweets: How JetLagged Was Created

Google’s Rebecca Franks and Simona Stojanovic delivered one of the Android Dev Summit 2022.1 presentations, “Custom layouts and graphics in Compose”. Rebecca also wrote up a series of tweets describing how JetLagged — the sleep tracking app profiled in that presentation — was set up.

Medium: How to Create a State Machine on Jetpack Compose

Marco Cattaneo reviews FlowRedux, a Kotlin/Multiplatform library that offers a DSL for describing state machines. Marco applies this to the content/loading/error state triple often used in resource-bound UI, specifically for loading the roster of GitHub repositories for a particular GitHub user.

Resource Roundup

100% pure code!

Relay

Google has released Relay. Relay is a pair of plugins, one for Figma, one for Android Studio. The plugins let you package up and export a component from a Figma design, then import that into Android Studio and have it code-generate Compose UI code for you.

GitHub: maxkeppeler / sheets-compose-dialogs

Maximilian Keppeler has released a series of libraries that contain composables for a bunch of common scenarios: calendars, time entry, duration entry, emoji selection, and more!