jetc.dev Newsletter Issue #99
This week, while we wait for the next Compose release, we look at state hoisting
TextField() colors. We spend a lot of time exploring testing, particularly
automated screenshot testing. We look at two composable-to-a-bitmap libraries and
two Wordle clones. And I suggest a bit of code organization to help avoid accidentally
mixing and matching your Compose UI and Glance composables.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
State hoisting, in the official documentation, is handled not by passing
MutableState objects around, but rather by passing function types, such as lambda
expressions. See how this represents a composable form of encapsulation in this week’s
highlighted Stack Overflow question.
Compose Material follows Material Design and is rather rigid in how it applies colors.
As a result, there is no good way to swap colors for, say, a
by creating a full
MaterialTheme, as we see in this week’s
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
David Vávra profiles how AirBnB’s Showkase library
not only gives you rapid access to all of your
@Preview composables, but how it also
gives you access to bitmaps for use with your favorite screenshot testing framework.
This allows your
@Preview composables to perform “double duty”, both for examining
the UI manually and for automated testing.
Carlos Monzon brings us an extensive post outlining different ways to improve
accessibility in our Compose UI interfaces. The post covers things like
multiple ways to increase your touch target sizes, using
and semantic nodes, and more!
VisualTransformation is Compose UI’s way to let you control how the text
TextField() is rendered, independently of what the actual text value is.
While the classic example is password shrouding, Thiago Souza explores using
it for many other scenarios, such as date formatting and phone number formatting.
Sometimes our text is a bit long, and our
Text() composable truncates the rendered
output, perhaps with an ellipsis. However, we may still need to give the user some
idea of what the text is that is not visible. Sinan Kozak explores using the
Text() to determine what text was truncated, so another composable can render
some hints based on that data.
Thomas Künneth continues exploring larger screen devices, including foldables, in the world of Compose UI. Previously, Thomas has focused on how to get your UI to adapt to larger screens by making use of the available space. This time, Thomas looks at cases where you might not have a good idea of how to make use of that space.
Other Interesting Links
- Medium: Introduction to Animation in Jetpack Compose
- Medium: Compose Destinations: simpler and safer navigation in Compose with no compromises
- Medium: Passing arguments to screens in Jetpack Compose
- Interoperability in Jetpack Compose
- Medium: MVP/MVC to Reactive Architectures for Jetpack Compose
- Introducing Jetpack Compose into an existing project
- Medium: How to apply State Management and State Hoisting in Jetpack Compose Apps
- Bottom Navigation in Jetpack Compose
- Medium: Swipe to delete in Jetpack Compose Lazy Column Android
- Medium: UI Testing in Jetpack Compose
- Canvas: How to draw text in Jetpack Compose?
100% pure code!
Many apps wind up needing tooltips to highlight and document certain UI elements,
perhaps a part of a first-time use education mode. GitHub user skgmm created one
for Compose UI that can be displayed as an independent popup or be included
as part of a
John O’Reilly created a Kotlin/Multiplatform edition of a word game similar to Wordle. John’s supports Android, iOS, and Compose for Desktop. Olivier Patry created the same sort of app, supporting Compose for Desktop and an ASCII terminal mode.
Other Interesting Links
- GitHub: tunjid / Mutator (state pipeline from actions)
- GitHub: Madrapps / plot (line graphs)
- GitHub: SimformSolutionsPvtLtd / SSJetpackComposeSwipeableView (swipe to edit/dismiss)
- GitHub: k0shk0sh / ComposeEasyForms (data entry form management)
- GitHub: amirhwsyn/W-PatternLock (pattern lock UI library)
- GitHub: softartdev / MaterialThemePrefs (KMP library for dark/light themes)
- GitHub: wangyung / persona (particle animation system)
- GitHub: DanielMartinus / Konfetti (confetti animation)
…And One More Thing
Compose UI has
Box(). Glance has
Box(). They are not interchangeable.
Compose UI has
Text(). Glance has
Text(). They are not interchangeable.
Compose UI has
Button(). Glance has
Button(). They are not interchangeable.
And so on.
Glance uses its own set of Composables. Do not combine
The problem is that if you have both in the same module, auto-complete support in the IDE might steer you to import the wrong one, causing confusion until you track down the flawed import.
One solution for this is to use separate modules for your Compose UI composables and your Glance composables. Do not have the Glance dependency in the Compose UI module, and do not have the Compose UI dependencies in the Glance module.
The implication is that classes that are in common between them — use cases,
repositories, etc. — come from some central module(s) that the Compose UI
and Glance modules themselves depend upon. That in turn may require some extra
work to get your dependency inversion logic set up to be able to inject things
into both the Compose UI and Glance modules. That sounds like a headache, and to
an extent it will be for the initial setup. However, this appears to be the long-term
Android app development approach: many smaller modules making up the app, so you
can use dependency lists, Kotlin’s
internal keyword, and other things to help
shape the API surface of a module and the APIs visible within that module from
Or, just keep fussing with getting your Glance and Compose UI composables mixed up.
- 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?