Newsletter Issue #32

Published: 2020-09-22

alpha03 is out! On the whole, it was a fairly quiet release, with few major breaking changes mentioned in the release notes.

This week, we will look at those changes, explore state and immutability, work with Column(), and see some early experiments in layout XML to composable conversions. Plus, Leland Richardson is live!

(well, OK, he’s not live right in this email – that would be rather weird)

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Jetpack Compose State

State is a never-ending source of Compose confusion. In this week’s highlighted Stack Overflow question, a developer was having difficulty understanding why modifying a var in a data class used for state did not trigger recomposition. The answer: use immutable data class objects and copy().

Stability Now!

Immutability is going to be central to many Compose development patterns. Mutable data leads to too few or too many recompositions, depending on circumstances. Using a MutableList, for example, can lead to too many recompositions, as seen in this week’s highlighted Slack thread.

Composable Commentary

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

Compose Foundation alpha03 Release Notes

InnerPadding is now PaddingValues. “Gravity” is now “Alignment”. And ComposeTestRule is now the home of onNode() and waitForIdle(), to serve as the long-term replacement for existing global functions.

Compose Material alpha03 Release Notes

BottomNavigationItem used to have onSelect as a parameter; that is now onClick. BottomNavigationItem also gets a new InteractionState parameter (as does Tab). Buttons no longer have disabled colors, and TextField no longer applies an alpha to the supplied background color.

Leland Richardson… Live!

If you are into live-streamed coding sessions, Google’s Leland Richardson has started offering those on Twitch, with an eye towards Compose and Compose UI development.

How to Write Memorable Functions

State management in Compose is a popular topic of discussion. Here, Denis Crăciunescu reviews the various options for state management in Compose, including remember() and mutableStateOf().

Exploring Jetpack Compose: Column

Joe Birch offers a peek at Column, with a deep dive into the various modifiers, arrangement options, and alignment choices. As with Row, Column is a fairly powerful composable; many UIs can be assembled with Row or Column without having to break out a ConstraintLayout or do your own custom layout.

Video: Firebase with Jetpack Compose

All Techies returns a short screencast of blending Firestore for data storage with Compose UI for the user interface. All Techies also released a similar short screencast on using Firebase Remote Config with Compose.

Resource Roundup

100% pure code!

GitHub: pocmo / recompose

Sebastian Kaspari is working on tools (CLI and a Studio plugin) to convert classic View-based layouts into equivalent composables.

GitHub: badoualy / animatedsvg-composable

Yann Badoual gives us a library for animating the rendering of SVG, as a Compose port of a previous View-based library.

GitHub: skydoves / DisneyCompose

Jaewoong Eum has published a Compose sample app demonstrating the combination of Compose UI and Hilt, in the context of a Disney movie catalog app.

Gist: cbeyls / FlowLayout.kt

A “flow layout” has long been a popular request in Android app development: show as many children as possible on the current row, then start a new row and continue. Here, Christophe Beyls demonstrates a take on that structure in Compose UI, using a custom set of Layout() rules.

Gist: antonshilov / TreeRenderer.kt

Anton Shilov posted a demonstration of a composable for rendering a tree structure of semi-arbitrary breadth and depth.

…And One More Thing

We have many techniques for dealing with state in Compose. Most of the simple examples that you see use remember { mutableStateOf() }, because it makes for a nice self-contained Compose UI example. At the same time, we also have state adapters for lots of streams: LiveData, StateFlow, RxJava Observable, etc.

Over the next year, we will be experimenting with various patterns for employing these techniques, and hopefully we will have a well-documented core set of patterns to recommend to newcomers to Compose, once Compose ships a stable version.

If I had to guess, we will wind up drawing a distinction between “data being created” and “data ready for use”. Once data is deemed ready for use, we hand it over to a viewmodel and have it do its work, no different than we would in a classic View-based Android UI. However, many user interfaces will involve a lot of user input to get to the “ready for use” state — many times we will not want to update the viewmodel on every keypress in a text-entry field, for example. We will use remember() and things like that for “local” state to a composable, handing that state off to the viewmodel when all the input from the user is ready. Yet, in other cases, such as real-time filtering, we might actually want to update the viewmodel on each keypress.

Compose is trying to not lock us into one particular approach, so we can have a palette of approaches to choose from to apply to a particular UI situation. We just need to have that palette be documented well enough that newcomers do not feel that they have to “reinvent the wheel” or try using one specific technique (e.g., remember()) for everything.