jetc.dev Newsletter Issue #142

Published: 2022-11-22

This week, we get a double-handful of videos from droidcon London 2022. We look at variable fonts, accessibility, and rotary input. We see libraries for text flowing around images and fingerpainting. And we learn about donut holes, a subject that may or may not make you hungry.

NOTE: This newsletter is now being delivered via Buttondown, rather than Revue. If you were a subscriber via Revue, I moved your subscription over to Buttondown. If you are not receiving the newsletter, check your spam folder!

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Dismiss a Dialog()?

The verb “dismiss” is the prose equivalent of a code smell. Dismissing something is an action; Compose is based primarily on states. With Compose’s declarative approach, you simply skip rendering the dialog when you no longer need it, as we see in this week’s highlighted Stack Overflow question.

How Do We Animate a Tab Selector?

A horizontal row of items, such as a row of tabs, might include some visual indicator of a selection. You might want to animate the transition as the selection moves to different items. Several solutions are identified in this week’s highlighted Kotlinlang #compose Slack thread.

droidcon London 2022

The droidcon London 2022 conference videos are up, including a bunch tied to Compose, such as:

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Medium: Just your type: Variable fonts in Compose

Google’s Alejandra Stamato writes about Compose UI’s variable fonts support, available on Android 8.0 and higher, via the FontVariation experimental API.

Medium: Faster Jetpack Compose <-> View interop with App Startup and baseline profile

Google’s Sagar Begale demonstrates the benefits of using Baseline Profiles with Compose apps, for reducing the time it takes to load your initial composable.

Video: Building accessibility support for Compose

Android Developer Summit 2022 Part Three was focused on the platform and as such did not have much in the way of Compose-centric content. However, Google’s Caren Chang did talk about accessibility in Compose UI, using things like the semantics() modifier and the contentDescription parameter to Image().

Rotary Input in Wear OS with Compose

Wear OS supports “rotary input”, whether that is supplied by a rotating crown, a rotating bezel, or a touch sensitive ring that simulates a rotating bezel. Vinícius Veríssimo teaches us the importance of supporting rotary input in our Wear OS apps and how to use the onRotaryScrollEvent() modifier to accept rotary input in a ScalingLazyColumn() or a Picker().

Medium: What is “donut-hole skipping” in Jetpack Compose?

The Compose team uses “donut holes” and “donut-hole skipping”. This is a limited metaphor — after all, jelly donuts do not usually have holes, and you certainly do not want to skip the jelly. Emad Shehadah researched what the Compose team means by “donut holes”, in the context of optimizing recompositions, and makes the connection between “donut holes” and composition scopes.

Medium: derivedStateOf() – A definitive guide on when to use it

An Android developer going by the Medium handle “The Android Developer” walks us through the role of derivedStateOf(), including comparisons to the distinctUntilChanged() operator on Flow and how proper use of derivedStateOf() can reduce unnecessary recompositions.

Video: Exploring Constraint Layouts in Jetpack Compose

Amanda Scheetz delivered a presentation for GDG Cincinnati about the use of ConstraintLayout() in Compose UI work, including creating reference IDs for rules and the constraints() modifier’s DSL for defining the constraints between UI elements.

Under the hood of Relay

Relay has definitely captured the attention of many Compose UI developers… including Kevin Schildhorn. While most material focuses on how to use Relay, Kevin dives into the generated code. As with a lot of generated code, Relay’s code is a bit messy compared to hand-written composables, and it relies on a library full of Figma-defined composables, but the code works!

Medium: Jetpack Compose Bottom Border

Ban Markovic is back, exploring an edgy topic: borders. While Compose UI offers a border() modifier, it draws the border around an entire shape. Ban wanted a border on just one side (the bottom) and demonstrates how to implement that using a drawBehind() Canvas.

Resource Roundup

100% pure code!