jetc.dev Newsletter Issue #77
The dust barely settled on the first stable release, and we already have a new
patch release plus our first
This week, we peek at those releases, plus spend a fair bit of time contemplating
InputField(). We also learn about Compose Multiplatform
and Accompanist Navigation Animation, look at accessibility and finite state machines,
and see some Compose UI libraries for progress buttons, info bars, and more.
Release Ruminations and Alpha Analysis
Reviewing the release notes for the latest Jetpack Compose updates!
We have a new patch release,
1.0.1. This version uses Kotlin
1.5.21, but otherwise
is unchanged, according to the release notes.
We also have the first new-version alpha:
1.1.0-alpha01. Of note:
AnimatedImageVector()is back, in a
There is a new
BrushPainterAPI, for applying an arbitrary
Painter(akin to how
ColorPainterapplies an arbitrary
TextField()now clears the selection on BACK navigation, to better match how the platform
BadgedBox()and accepts a
Badge()as a parameter
Compose Material now has a
NavigationRail()composable for your large-screen UIs
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Sometimes, you might want to alter the stock animation for a
You can tweak things like the damping ratio and stiffness using
as we see in this week’s highlighted Stack Overflow question.
We sometimes have cases where a specific composable might need to apply some
input validation, such as requiring that a field contains a plausible email
address. Where should that validation logic go? We explore a few options in this
week’s highlighted Kotlinlang
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
JetBrains has combined Compose for Desktop and Compose for Web under a common
“Compose Multiplatform” brand. Compose Multiplatform is now considered to be an alpha,
an upgrade over its previous developer preview status. They have also released a plugin
for IDEA and Android Studio that enables
@Preview support for Compose for Desktop.
And, an number of other improvements were made to Compose for Desktop and Compose
for Web as part of the alpha upgrade.
As part of the Compose Multiplatform launch, JetBrains released a video combining several interviews with JetBrains and Google staff members, explaining the role of Compose Multiplatform and where things will be going in time.
Google’s Android Developer Backstage podcast takes a deeper dive into testing
Compose UI apps, with Jose Alcérreca, Jelle Fresen, and Filip Pavlis contributing
their views on the history of testing Compose UI, the problems inherent in
testing, and how Compose’s testing options improve on them.
Google’s Ian Lake gives us an update on the state of Navigation for Compose, the limitations on which Compose animation APIs it can use, where animations for Navigation for Compose are headed, and introducing the Accompanist Navigation Animation stopgap implementation.
Francesc Vilarino Guell returns, with a post highlighting the subject from
the One Off the Slack post:
how to hoist state for an email-specific
InputField() where the state can handle
basic validation of the email address.
Other Interesting Links
- Medium: How to Show Date Picker in Jetpack Compose
- Video: ComposeView Comparisons
- Medium: LazyListState in Jetpack Compose
- Video: Mobile Developers React to Jetpack Compose 1.0
- Part 1, UI Widgets from Scratch in Jetpack Compose
- Kickstart your Android Project with Gong Base Project
- Video: Coil - Image Loading Library with Jetpack Compose
- Exploring App Bars in Jetpack Compose
- Medium: State in Jetpack Compose
- Medium: FlashChat : Jetpack Compose + Firebase
- Medium: Jetpack Compose VS SwiftUI !VS Flutter
100% pure code!
Other Interesting Links
- GitHub: phansier / Coffeegram-Desktop
- Gist: creativedrewy / RoundedDiamondFabShape.kt
- GitHub: akshay2211 / NYTimes-Compose
- GitHub: yigit / ComposeCity
- GitHub: zsoltk / chesso
- GitHub: Xacalet / Minesweeper
- GitHub: jawa7 / GitHubApiApp
…And One More Thing
This week’s One Off the Slack post highlights one aspect that makes migrating to Compose a bit challenging: with a new UI toolkit come new options and recommended patterns for classic problems.
That post considers where validation logic goes, for simple fixed validation rules like “is the text entered into this field an email address or not?”. The three possibilities examined there are:
The composable (e.g.,
EmailInput()) knows the validation rules
The viewmodel handles the validation rules, and the composable is just rendering things
Create a custom state object via an
interfaceand let it handle the validation rules
The first two have clear analogues in the classic
View system: an
EditText could handle the email validation itself, or your viewmodel
could handle the validation.
The custom state object option could also be done with a custom
could accept some sort of state object via some function (e.g.,
EmailEditText could forward events to that state object (e.g., via
react to changes in the state itself to update the UI. However, this particular pattern
was not often seen – developers would be more likely to go with either of the other
But state objects abound in Compose UI. Any composable with state has its own state
object. Creating a state object for a custom composable – one that perhaps wraps a
stock state object and handles more business rules – is the sort of thing that should
be natural. However, “muscle memory” of the classic
View system may impede adoption
of this approach for a while, until we get more used to the way that Compose UI works
and how best to employ its various patterns.
- 2022-01-11: Screenshot testing! Accessibility! Text and fields! Rendering composables to bitmaps! Tooltips! And... Wordle in the terminal?!?
- 2022-01-04: rememberSaveable()! White-label apps via product flavors! Loading buttons! Sliders! Canvas! Action menus! Preferences! And... ugly gradients?!?
- 2021-12-28: Glance! Space! Compose Multiplatform in the real world! Formatted text in fields! State management! Date pickers! Chat UIs! And, how did 2021 turn out?