jetc.dev Newsletter Issue #206

Published: 2024-03-19

We got a new Compose BOM and new Compose/Wear Compose alphas, plus a new Compose Multiplatform patch release!

We also look at scrolling text and window resizes. We use previews to improve our accessibility and add support for drag-and-drop. We preview edge-to-edge UIs and auto-link some text. Plus, we explore design systems, including me complaining about hand-wavy support for fully-custom design systems.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The Compose BOM is up to 2024.02.02, largely mapping to the 1.6.3 patch releases, containing bug fixes.

We also got 1.7.0-alpha04 for the main Compose artifacts. This release contains various performance improvements, along with:

• hintLocales support in KeyboardOptions to hint to the IME what locale is best to use

• BasicTextField2() is now BasicTextField(), and its overload that worked with simple strings (vs. a state object) was removed

• Preliminary support for stylus handwriting in BasicTextField()/BasicTextField2()

We also got a new androidx.compose.material:material-navigation artifact for allowing bottom sheets to be Navigation for Compose destinations.

Wear Compose is up to 1.4.0-alpha04. This adds new overloads of ToggleChip() and SplitToggleChip() designed to work with a RadioButton() by means of a selectionControl parameter.

In Compose-adjacent libraries, we got:

• androidx.navigation:navigation-compose:2.8.0-alpha04
• androidx.paging:paging-compose:3.3.0-alpha04
• androidx.paging:paging-compose-android:3.3.0-alpha04

Also, JetBrains released Compose Multiplatform 1.6.1. This contains support for Kotlin 1.9.23 and various bug fixes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Display Long Vertically-Scrolling Text?

If the answer is “long enough to scroll, not so long as to run out of memory”, use the verticalScroll() modifier on your Text(). If the answer is “memory might be an issue”, use LazyColumn() and individual Text() nodes per chunk of text (e.g., per paragraph). Learn more in this week’s highlighted Stack Overflow question.

How Can I Optimize Window Resizing?

When we resize a window, such as on Compose for Desktop, everything wants to recompose. Sometimes that is overkill and harms performance, with the performance issues becoming worse with certain container choices, such as BoxWithConstraints(). Learn about some options, plus LocalWindowInfo.current.containerSize, in this week’s highlighted Kotlinlang Slack thread.

Composable Commentary

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

Video: The Missing Library of the Compose Multiverse

The Talking Kotlin crew chat with Adriel Café about two of Adriel’s libraries: Lyricist for string management and Voyager for navigation.

Opinion: Jetpack Compose needs a Design System layer

Nick Rout argues that we need better support for fully-custom design systems, perhaps in the form of a formal architecture layer. The associated Kotlinlang Slack thread has more in-depth discussion and debate on the concept, and I chime in more later in this newsletter issue.

Video: Building Complex Design Systems with Compose

Speaking of design systems, Anton Shilov walks us through the challenges in creating such a design system, best practices (including snapshot testing of design system components), and more.

Accessibility Checks with Jetpack Compose Previews

Eevis Panula is back, exploring a new feature of Android Studio Iguana: accessibility UI checks as part of the preview system. The “Start UI Check Mode” runs an accessibility scanner against the previewed composable and reports on anything that needs some extra attention.

How to Drag and Drop using Modifier.dragAndDropSource/Target - Jetpack Compose

Radhika Saliya reports on the new dragAndDropSource() and dragAndDropTarget() modifiers, simplifying the process of adding drag-and-drop capabilities to your composable screens.

Medium: @Composable Modifier vs composed factory in Jetpack Compose

Google’s recommendations for building custom modifiers has varied over the years, most recently focused on Modifier.Node for improved performance. ilyas ipek compares and contrasts various options for creating custom modifiers.

Optimize App Performance By Mastering Stability in Jetpack Compose

Jaewoong Eum looks at the performance implications of @Stable and @Immutable and how best to employ them to reduce unnecessary recompositions. The post also explores Compose compiler metrics reports, the little-used @NonRestartableComposable annotation, and more.

Medium: Constraint Layout — Jetpack Compose

Jayesh Seth brings us an in-depth look at ConstraintLayout(), including how to create and use guidelines, chains, and barriers.

Medium: Going edge-to-edge with Compose without losing it

Costa Fotiadis explores how to implement edge-to-edge support in a composable screen, such as to dynamically change the color behind the system bar.

Other Interesting Links

• Animations with Lookahead in Jetpack Compose
• Container Transform Animation with Lookahead in Jetpack Compose
• Create Instagram-like Long Press and Draggable Carousel Indicators in Jetpack Compose
• Medium: Alert Dialog with Jetpack compose: A Step-by-Step Guide
• Medium: Animation In Compose Series (Part 2) — Understanding AnimationSpec
• Medium: Building an Icon Picker for the Jetpack Compose material-icons-extended library
• Medium: Document scanner with ML Kit using Jetpack Compose
• Medium: Effortless TextField Validation with Custom Annotations in Jetpack Compose: Simplifying TextField Validation
• Medium: How to build a custom design system with Jetpack compose
• Medium: How to create Glovo-like main screen animation using Jetpack Compose (Part 2)
• Medium: Jetpack Compose — Chapter 8: Mastering Columns and Rows
• Medium: Multi-Section collapsable List in Jetpack Compose
• Medium: Optimizing Performance in Jetpack Compose
• Organizing large Jetpack Compose code bases. My best version yet
• Video: Architectural Patterns for Large-Scale Jetpack Compose Apps
• Video: Making Data Visualizations More Accessible

Resource Roundup

100% pure code!

GitHub: PierfrancescoSoffritti / tap-target-compose

Google’s Pierfrancesco Soffritti created a Compose UI implementation of the original Material Design’s “tap target” UX, to highlight UI elements as part of onboarding or other education.

GitHub: Edge-to-Edge Previews

Timo Drick brings us a library that offers an EdgeToEdgeTemplate() composable to use as a wrapper for @Preview content and gives us window insets support. Learn more in the associated Medium post.

GitHub: kevincianfarini / monarch

Kevin Cianfarini created a series of libraries designed to abstract away the concept of feature flags. You can consume them in several forms, including a Compose State for easy use in composables. It also abstracts the source of the feature flag values, with a supplied implementation for LaunchDarkly.

GitHub: Calvin-LL / AutoLinkText

Calvin Liang wanted Linkify and android:autoLink support that we use with TextView. Since Compose lacks this, Calvin set about creating an equivalent for Compose Multiplatform, centered around an AutoLinkText() wrapper around BasicText().

Other Interesting Links

• GitHub: gocityengineering / compose-country-picker (country code picker)
• GitHub: lokified / SelectaCompose (selectable lazy lists and grids)
• GitHub: mikepenz / HypnoticCanvas (Hypnotoad-approved backgrounds)
• GitHub: tusharhow / Shimmerfy (shimmer composables)

New Releases

Chris Banes’ Haze library gained Compose for Web/WASM support in 0.6.1 and now is up to 0.6.2 with some bug fixes.

…And One More Thing

The Kotlinlang Slack thread tied to Nick Rout’s design system post contains some thoughts from me. In a nutshell: Compose UI’s support for non-Material design systems can work, but we would be in a much better position had Google published multiple design systems from the outset. We might have better APIs or tooling surrounding custom design systems. And, if nothing else, library developers would be better at finding ways to be a bit more agnostic of design systems.

I pointed out the third-party composables problem three years ago and doubled-down on it a bit less than two years ago.

Whether it is led by Google, by JetBrains, or by the community at large, it would be tremendously helpful if we had leadership on custom design systems. Otherwise, as libraries grow, the situation will get worse before it gets better.