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

• Gist: dovahkiin98/AutoSizeText.kt
• Gist: takahirom / DumpSlotTable.kt
• Gist: denis-ismailaj / SwipeToDelete.kt
• GitHub: chrisbanes / snapper