jetc.dev Newsletter Issue #165

Published: 2023-05-16

Google I|O happened! We got a new BOM version, a new alpha, some videos… and not a lot more.

In non-I|O stuff, we look at viewmodels and BackdropScaffold(). We peek at projects using Lottie and SealedX for Compose UIs. And we examine libraries for dynamic themes and floating action menus.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The Compose BOM is up to androidx.compose:compose-bom:2023.05.01, mostly with 1.4.3 versions of the Compose libraries.

Compose itself got a 1.5.0-alpha04 release. Of note:

  • includeFontPadding() was undeprecated

  • animateItemPlacement() is available for contents in a LazyStaggeredGrid(), which itself is now stable

  • A bunch of changes to the pager APIs, including removing pageCount and adding snapPositionalThreshold

Also, Compose-adjacent libraries were updated:

  • Glance now has a beta: androidx.glance:glance:1.0.0-beta01

  • Navigation for Compose is up to a new RC: androidx.navigation:navigation-compose:2.6.0-rc01

  • Wear Compose keeps chugging along: androidx.wear.compose:compose-foundation:1.2.0-alpha10

Google I|O 2023

Google I|O came and went, without a ton of new Compose news, just a continued steady pace of development. However, a number of conference-style videos were released in concert with I|O itself on Compose, including:

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Change a TextField() From a ViewModel?

A typical sample of TextField() uses remember { mutableStateOf() } for the field’s state. However, you might want that state to really reside in a ViewModel for various reasons. Each of those individually is fine, but combining the two requires care, lest you have two “sources of truth”, as we see in this week’s highlighted Stack Overflow question.

How Can We Measure Composition Time?

Performance measurement is tricky in general, even more so for compositions. Fortunately, we’re getting better tooling for that, but that only works when you’re using the tools. See some of the sticky bits in this week’s highlighted Kotlinlang #compose Slack thread. (and hopefully the embedded images will start working…)

Composable Commentary

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

What’s new in Jetpack Compose

Google’s Jolanda Verhoef wrote up a summary of recent changes in Compose, both stuff that was released in the previous months and brand-new items, such as the first Glance beta and the first Compose for TV alpha.

Why you need ViewModels and why you don’t

Alex Styl looks at the Jetpack ViewModel, how to use it with composables via the lifecycle-viewmodel-compose library, what value it still offers in the Compose world, and alternatives for when you are developing Compose-based UIs outside of Android.

Slides: Handling State in Jetpack Compose

Beatrice Kinya walks us through basic state management in Compose, including State, mutableStateOf(), remember()/rememberSavable(), and more.

Backdrop Scaffold in practice

Abdulahi Osoble wrote about the experimental BackdropScaffold() composable, which gives you separate content and background layers into which you can render your desired content. If the standard bottom sheet implementations do not quite fit your needs, Abdulahi demonstrates implementing one using BackdropScaffold().

Budding love for compose animation

Kristen Halper is back, this time looking at using Compose animations for drawing content frame-by-frame, in this case a sunflower.

Generating UI state in android for jetpack compose using sealedX library

Peter Chege explores using the SealedX library to code-generate UI state classes to use in a Compose UI project. SealedX lets you define a common sealed interface (e.g., Loading, Content, Error) and supply a list of model classes, and SealedX code-generates implementations of that interface for each of those model classes.

Medium: Using PreviewParameters and providing Composables to Jetpack Compose Previews

Katie Barnett returns, this time examining how we can pass a composable parameter to a @Preview-annotated composable. Her trick involves Kotlin’s functional interface syntax, to wrap a composable in something that PreviewParameterProvider supports.

Jetpack Compose: Create a Lottie Animation Screen and Advance to the Next Screen

Lottie is popular. Compose is popular. Biplab Bera looks at the combination: implementing a Lottie animation in a Compose UI-defined screen.

Medium: Build a form with Jetpack Compose, a better use of the state

The Lunabee Studio team describes how to handle form input in Compose UI, including the use of rememberSaveable() to retain basic state across configuration changes.

Resource Roundup

100% pure code!

GitHub: seyoungcho2 / ComposeDynamicTheme

SeyoungCho brings us a engine for dynamic Material 2 themes in Compose, to make it easy to switch between themes based on user input.

GitHub: lemillion12 / multi-floating-action-button

Sanyam Mehta implemented a floating action menu, where a FAB expands into a series of smaller menu items when tapped.

GitHub: ParveshSandila / CountryCodeChooser

Parvesh Kumar created a CountryCodeChooser() composable to allow users to choose a country code for a phone number from a searchable list.

Gist: mertceyhan / TypewriterTextEffect.kt

Cafer Mert Ceyhan put together a TypewriterTextEffect() composable that displays some text a little bit at a time, as if it is being typed in.