jetc.dev Newsletter Issue #86
Published: 2021-10-12
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!
Remove LazyColumn Overscroll Effect in Jetpack Compose
Android 12 introduced a new overscroll effect, one that not everybody likes. See how you can make the pain stop for your composables in this week’s highlighted Stack Overflow question.
Are State Changes Transactional?
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 #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Medium: Creating Responsive Layouts with 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.
Accessibility in Jetpack Compose
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).
Jetpack Compose with Robot Testing Pattern
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.
List Animations in Compose: Drag to Reorder
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.
Add Thousand-Separators for Number Inputs in Jetpack Compose
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 VisualTransformation.
Medium: Back Press Handling in Android Jetpack Compose
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.
Medium: Jetpack Compose’s Rows and Column or ConstraintLayout?
Elye is back, taking a look at Compose UI’s ConstraintLayout() composable.
In the classic View system, ConstraintLayout became the “go-to” container class
because usually it was more efficient than nested rows and columns via LinearLayout.
Elye explores to what extent that is still true in Compose UI and what other rationale
there may be to invest in ConstraintLayout() there.
Folding Composables
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.
Video Playback in LazyColumn in Jetpack Compose
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 DisposableEffect()
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
Resource Roundup
100% pure code!
GitHub: JohannBlake / Jetmagic
This repository contains Johann Blake’s massive Compose UI framework described in his Medium post profiled earlier in this newsletter issue.
GitHub: ch4rl3x / HtmlText
Alexander Karkossa brings us a small library for taking string resources
with HTML markup and rendering them via an HtmlText() composable.
HtmlText() is a wrapper around Text() that converts the HTML into an
AnnotatedString.
GitHub: hyperdevs-team / morsa
GitHub user Hyperdevs created a library that is a wrapper around Espresso designed to simplify access to composables and create easier-to-read test functions.
GitHub: xmartlabs / TypedNavigation
GitHub user xmartlabs offers up yet another Navigation for Compose wrapper that aims for type safety, for routes and arguments.
Other Interesting Links
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-10: A Compose Multiplatform alpha! Hot reload! Presentation! Sprites! Calendars!
- 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?!?