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 inKeyboardOptions
to hint to the IME what locale is best to use -
BasicTextField2()
is nowBasicTextField()
, 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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?