jetc.dev Newsletter Issue #94
1.1.0-beta04 shipped, with more improvements!
We also celebrate the 1.0 release of Compose Multiplatform, learn how to leverage slot-based APIs, and see a Wear OS-based instrument tuner. We examine a cross-platform state management library, and I grumble about font padding.
Reviewing the release notes for the latest Jetpack Compose update!
1.1.0-beta04 is available now, with Kotlin 1.6.0 support!
Beyond that, we got:
Some new Lint warnings about mixing mutable states and mutable collections
Support for mouse wheel events
Magnifier support when dragging the cursor or selection handles in text entry fields
A variety of bug fixes
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
When extracting reusable composables, you sometimes need to determine how best
to split up the modifiers, between ones defined inside the reusable composable and
ones defined outside. The best solution for that is to have the reusable composable
Modifier as input, as we see in this week’s highlighted Stack Overflow
Posts, videos, and other new information related to Jetpack Compose!
JetBrains is declaring Compose Multiplatform — comprised of Compose for Desktop and Compose for Web — is stable, with a 1.0 release. There is also an announcement video as well. Congratulations to all who worked on this!
One complaint among Compose UI developers is the depth of nested calls, leading to passing lots of values down many layers in a call hierarchy (think: hoisted states). Kiran Rao writes about slots — composables as parameters to other composables — and how some careful code refactoring can help to minimize how many distinct values need to be passed and how deep in the hierarchy they need to go.
Moataz Nabil gives us a tour of the basics of testing composables in isolation,
createAndroidComposeRule() and its Espresso-esque API for identifying nodes
in the composition and asserting their state.
Kennay Kermani points out a notable limitation in
LazyVerticalGrid(): it cannot be
used inside of another vertically-scrolling container. Kennay’s workaround is to switch
FlowRow() composable to replace the grid, as
FlowRow() can be placed
in a vertically-scrolling container.
Takahiro Menju gives us an overview of state management, including what you need to
remember() about using
mutableStateOf(), how state hoisting works, the risks in
having composition state in a
ViewModel, and more!
Arildo Borges Jr. creates a Wear OS app that serves as a chromatic tuner, by identifying the nearest musical note to the sound being played and how far off from the proper value it is. Arildo combines Compose for Wear with Tarsos DSP, the latter providing the signal processing needed to identify the pitch of the current sound, so it can be compared to expected values.
Other Interesting Links
- On-device Google Translate with Jetpack Compose & MLKit
- Medium: Migrating an Existing App to Jetpack Compose: Where to begin?
- Medium: Jetpack Compose: MVVM State management in a simple way
- How I Learned to Stop Worrying About Custom Components and Love Compose
- Video: Apex, or How to Create a UI Framework
- Safe Compose arguments: An improved way to navigate in Jetpack Compose — Part 2
- Video: Copy Paste Jetpack Compose
- Video: How to Migrate XML <-> Compose
- Medium: Say Hello 👋 to Jetpack Compose and Compare with XML
- Video: Intro to Jetpack Compose
- Medium: How to handle Firebase Authentication in clean architecture using Jetpack Compose?
- Medium: etpack compose Space animation
- Medium: Jetpack Compose Animation under 50 lines using K5 Compose Playground
- Medium: Expert: Integration of HMS Core Kits in Android Jetpack App Part-1
- Layouts in Jetpack Compose
100% pure code!
Dmitriy Gorbunov created a Kotlin/Multiplatform library with a shared state-holding system for Compose UI and SwiftUI. Interestingly, it uses the Presentation Model pattern, not often seen in current MV* architecture discussions.
GitHub user ceribe brings us an implementation of a toolbar with overflow capability.
You provide the roster of action items, and the
OverflowMenu() shows the ones
that fit and sets up a classic overview drop-down menu for the rest.
Other Interesting Links
- GitHub: criske / compose-ssr
- GitHub: warting / In-App-Update-Compose
- GitHub: X1nto / BottomSheetDialogCompose
- Gist: Jaseemakhtar/CicularRevealMenu.kt
- GitHub: kaleidot725 / ScrcpyHub
- GitHub: bytebeats / compose-graphs
…And One More Thing
“Fit and finish” will be a challenge in Compose UI for a while. You can create fine user interfaces with current Compose UI. However, precisely matching supplied designs can still be a problem.
For example, this Kotlinlang
#compose Slack thread,
looks at the issue of vertically centering text, in this case inside of a “chip”-style
element. The chip was implemented using a
Text(), wrapped by a
Surface(), and the
text was not centering vertically. While a variety of other implementations were
proposed in the thread, in the end, the problem is one that the
View system solved a long
time ago: font padding.
Fonts can have intrinsic padding, and that padding may not be the same on all sides, particularly on the top and bottom. Font files describe that padding, and by default, the padding is taken into account. However, consumers of the font that honor the padding may result in this sort of centering problem, if the top and bottom padding is not even. For example, if the top padding is too large, the text will appear to be shoved downward within the available space of the container. For a transparent container, this is not an issue; for a bounded container, like a chip or button, this may be more obvious. This is exacerbated by Android’s handling of fallback fonts, apparently.
As this issue comment points out,
for custom fonts, you could modify the font itself. Otherwise, until then, we are stuck
waiting on a
Eventually, issues like this one will be addressed. But it is likely that this is just one of many “long tail” UI glitches that we will need to work around.
- 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?