jetc.dev Newsletter Issue #175

Published: 2023-08-01

A bunch of Compose updates shipped, including a 1.5.0 RC!

We also look at Live Edit and Compose Multiplatform, including how to work with fonts across platforms. We examine tab indicators and TV grids. And we see one intrepid developer who is trying to make a Compose design system matching Samsung’s OneUI.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler is up to 1.5.1, fixing a @ReadOnlyComposable bug.

The main Compose artifacts are now out in a 1.5.0-rc01 release. Among the changes:

The IDE inspection to warn you to use primitive-specific states (e.g., mutableStateIntOf()) is now optional
They fixed a bug tied to using SubcomposeLayout() inside movableContentOf()

We also got 1.6.0-alpha02 of the main Compose artifacts. Of note:

There were several performance improvements made in compose-runtime
Text input APIs were overhauled (PlatformTextInput*)

In Compose-adjacent artifacts:

ConstraintLayout for Compose is up to 1.1.0-alpha11
Glance is up to 1.0.0-rc01
Navigation for Compose now is out with a 2.7.0-rc01 release
Paging for Compose is up to 3.2.0
TV Compose shipped 1.0.0-alpha08
Wear Compose shipped both 1.2.0-rc01 and 1.3.0-alpha02

Finally, Compose Multiplatform is up to 1.4.3.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Make a Sound on Focus Changes?

By default, Compose focus changes are silent. That makes sense in desktop/mobile environments and keyboard-based navigation. However, on the TV, usually there is some sort of audible confirmation of focus changes, clicks, etc. See how to enable those in this week’s highlighted Stack Overflow question.

When Should We if()?

With the LazyColumn() DSL, we call item() for each composable to be displayed in the column. But, what if we have some conditional items, where the decision of whether or not to show it is made on the fly. Do we put the if() test inside of item() or outside? Or, do we avoid the problem entirely and filter out conditional items before calling LazyColumn() in the first place? Review the various arguments in this week’s highlighted Kotlinlang #compose Slack thread.

Android Worldwide July 2023

The Android Worldwide crew held another round of presentations, including some that touched on Compose, such as:

Composable Commentary

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

Deep dive into Live Edit for Jetpack Compose UI

The Android Studio team compares and contrasts Live Edit (shipping with the Giraffe release) with preview composables and traditional “apply changes” and walks us through how Live Edit works under the hood. They also point out some of the limitations of Live Edit and where it might be improved in the future.

Video: Build an iOS & Android app in 100% Kotlin with Compose Multiplatform

JetBrains’ Sebastian Ainger demonstrates how to use Kotlin Multiplatform and Compose Multiplatform to build a single-source iOS and Android app, from scratch.

Medium: Custom Font Magic in Compose Multiplatform: Unlock Your Creativity!

Kashif Mehmood looks at what it takes to use custom fonts in Compose Multiplatform, to support both iOS and Android. Kashif uses expect/actual syntax to have per-platform implementations of a font() function that returns Font objects that you can then use in your Compose Multiplatform themes.

Custom TabRow Indicator in Jetpack Compose

sinsamaki demonstrates how to create a TabRow() indicator that looks like a handwritten circle around the tab’s title, as opposed to more traditional bars and highlights.

Lazy Grids for Android TV using Jetpack Compose

Joe Birch continues his tour of TV Compose by looking at TvLazyVerticalGrid() and TvLazyHorizontalGrid(), demonstrating how they differ from their touch-centric LazyVerticalGrid() and LazyHorizontalGrid() counterparts.

Medium: Swipe To Reveal Previous Screen State in Jetpack Compose

Manasseh Kola explores how to implement a particular aspect of Instagram’s current navigation: swiping the top screen exposes the previous screen underneath. The approach used here avoids any particular navigation framework and instead implements its own screen stack.

From ViewModel to Compose Presenter: The New Form of State Management

Antoni Sanchez examines Molecule, CashApp’s library for emitting values on a StateFlow from a composable. Antoni explains how to migrate StateFlow logic from a viewmodel to a Molecule-managed composable function.

Resource Roundup

100% pure code!

GitHub: TrainerSnow / oneui-compose

GitHub user TrainerSnow is tackling the big challenge of creating a Compose UI design system that resembles Samsung’s OneUI design, as a counterpart to Compose Material. A substantial number of widgets are availble in alpha form today.

GitHub: skydoves / compose-stable-marker

Jaewoong Eum extracted some stability marker annotations from compose-runtime, including @Stable and @Immutable. If you want to mark certain classes with these annotations, but your module does not otherwise need to depend on compose-runtime, you could depend on this library instead.

GitHub: playmoweb / ComposeMultiDatePicker

The Playmoweb team brings us a calendar-style date picker, designed for users to pick either single dates or date ranges. You can control the oldest and newest dates, the colors, and the radius of the rounded corners of the calendar card.

GitHub: seyoungcho2 / FilledSliderCompose

SeyoungCho created a seekbar-style widget, supporting horizontal and vertical orientations, custom colors, rectangular or rounded shapes, continuous or discrete selections, and more!