jetc.dev Newsletter Issue #86
Today we look at pesky overscoll effects and whether state changes are transactional. We look at adapting to different screen sizes, including for foldables. We test our composables with Espresso and robots. And we explore accessibility, list reordering, and HTML in composables.
Note that I am dropping the “…And One More Thing” section for a while; I hope to add that back in a few months. After 85 “more things”, I need to recharge for a bit.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
We tend to mutate states without really considering when their changes will trigger
recomposition. In particular, we might have independent states that we want to mutate
in a transactional fashion, such that recomposition only occurs after both mutations
complete. See how Compose handles this in this week’s highlighted Kotlinlang
Posts, videos, and other new information related to Jetpack Compose!
Johann Blake has created an expansive Compose UI framework, called Jetmagic. Among other things, it aims to help simplify creating responsive UIs, ones that adapt well to different screen sizes. Jetmagic introduces the concept of “composable resources” that get selected automatically based on device configurations, and in this post, Johann explains how Jetmagic works.
Nav Singh gives us a whirlwind tour of techniques for improving the accessibility of Compose UI apps, from customizing how Talkback handles our UIs (e.g., via click labels) to general improvements on usability (e.g., setting custom touch target sizes).
The “robot” testing pattern is a way of creating a layer in test code that represents actual user interactions with screens. In this post, Marco Cattaneo briefly examines how we can implement this pattern in our Compose UI tests.
Ahmed Sellami wraps up a blog post series, combining the animations and gestures from
previous posts into a drag-to-reorder implementation for
LazyColumn() in Compose UI.
For added sizzle, Ahmed adds a particle animation when the item gets dropped into position.
For scenarios that may involve text entry of large numbers, it is nice to use
a locale-specific way of adding thousands separators to the entered text, so
users can better visualize exactly how huge the number is. Mohammad Omidvar
demonstrates how to do this in Compose UI, using a custom
System BACK navigation is inevitable, rather like Thanos. In this post,
Siva Ganesh Kantamani briefly looks at how we can handle BACK events in Compose UI, in cases where
our navigation framework does not. This involves a
BackHandler() and some state management.
Elye is back, taking a look at Compose UI’s
In the classic
ConstraintLayout became the “go-to” container class
because usually it was more efficient than nested rows and columns via
Elye explores to what extent that is still true in Compose UI and what other rationale
there may be to invest in
Thomas Künneth really likes foldables. In this post, Thomas continues a theme from previous posts, looking at how Compose UI can adapt to unusual screen scenarios. Specifically, Thomas examines split-screen foldables, the type with a hinge that breaks up the screen (e.g., Microsoft Surface Duo series), and how composables can identify the hinge position and take it into account.
Denis Rudenko shows a variety of techniques in this post, including using ExoPlayer
in Compose UI, pausing playback when the player scrolls out off-screen and saving
the last video position for later. Integrating ExoPlayer also gets into
and lifecycle events.
Other Interesting Links
- Injecting singleton dependencies into composables
- Video: Compose internals spelunking — with Jake Wharton
- Building faster Android apps with Jetpack Compose
- An Introduction to Jetpack Composable
100% pure code!
This repository contains Johann Blake’s massive Compose UI framework described in his Medium post profiled earlier in this newsletter issue.
Alexander Karkossa brings us a small library for taking string resources
with HTML markup and rendering them via an
HtmlText() is a wrapper around
Text() that converts the HTML into an
Other Interesting Links
- 2022-05-17: Google I|O 2022 videos! Compose beta01! Layout()! State! drawBehind()! Credit cards! App intros! And... what's a horologist?!?
- 2022-05-10: StateFlow vs. State! Design systems! MotionLayout! Text editing problems and solutions! And... modal sheets that are actually modal?!?
- 2022-05-03: @aditlal and @JorgeCastilloPr on design systems! KMP + Compose + SwiftUI! Dropdowns! FABs! And, what does Google I|O 2022 have in store for Compose UI developers?