jetc.dev Newsletter Issue #120

Published: 2022-06-14

This week, we spend time trying to understand compositions: when do things enter, when do things leave, and how can figure out why they are recomposed?

In addition, we ease our way through some animations, understand why our composables are slow in development, and go another couple of rounds on the “what to use for navigation?” cycle. We examine a PIN/OTP widget and how to render a dashed line. And, now that we have Maps Compose, I wonder where the rest of the Google Play composables are.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can a Composable React to an Image?

Rendering an image in Compose UI is fairly easy, particularly with the use of libraries like Coil. However, what happens if you want to do something based on the image that is loaded, such as render a border around the image based on a color derived from the image itself? That is a matter of reacting to the state change of the image loader, as we see in this week’s highlighted Stack Overflow question.

When Do We Enter, and When Do We Leave?

We talk about “entering” and “leaving” a composition a lot, such as when we work with effects. However, what do those terms really mean in the context of Compose? Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Easing in to Easing Curves in Jetpack Compose

Google’s Rebecca Franks gives us a peaceful easing feeling by showing us the basics of easing functions. Easing functions take an input (typically a fraction of animation time) and give us an output (typically a fraction of animation effect). These implement the same sorts of patterns as the interpolators from the classic View system, for things like bounces.

Medium: Why should you always test Compose performance in release?

If you are worried about composable performance, be sure to test the behavior in a release build with R8 enabled. Why? Google’s Ben Trengrove explores the reasons, ranging from interpreted vs. ahead-of-time compiled code, the impacts of baseline profiles, and what exactly R8 is doing that helps.

Podcast: ADB on Live Edit

Alan Leung and Esteban de la Canal joined the Android Developers Backstage podcast crew to talk about Live Edit in Android Studio Electric Eel. As demonstrated at Google I|O 2022, this lets you modify composables in the IDE and see updated previews in near real time.

Medium: Implementing a fully-custom Design Language System with Jetpack Compose — Part 2/2: Components

Ehsan Mehranvari returns for the second post in a two-part series, looking at Compose design systems. The first post looked at creating the design system, with custom colors and typography. This post looks at applying that design system to an app, including when to wrap Compose Material composables versus writing widgets from scratch.

Video: What Does Recomposition Mean to Your App?

Aida Issayeva delivered a presentation for Women Who Code, looking at the mysteries behind recomposition. Aida explains how the snapshot system works, the rules for stable types (and how they let the engine skip some recompositions), tools to help debug recompositions, and more!

Medium: The State of Navigation in Jetpack Compose

Kaustubh Patange examines Navigation for Compose and how it stacks up against a set of criteria. Kaustubh then looks at one add-on library for Navigation for Compose and four other replacements, to see how they compare.

Podcast: Learning Jetpack Compose with Vinay Gaba

The Fragmented podcast hosted Vinay Gaba about Vinay’s composable catalog site, AirBnb’s Showkase library, and more!

Medium: Collapsible App Bar With MotionLayout in Jetpack Compose

Ahmed Samir explores the MotionLayout() composable and how it uses ConstraintSets and Transitions to describe an animation of composables. Ahmed applies this to a Column() that serves as a collapsing app bar, including animating an avatar image from bottom-center of the expanded app bar to the start position in the collapsed app bar.

Medium: How To Accomplish Dynamic Absolute Positioning In Android’s Jetpack Compose

From time to time, you might need to position a composable relative to another, but not in a way that can readily be expressed in terms of simple containers — think of tooltips, “showcase” spotlights, etc. Yanneck Reiß demonstrates how to implement those sorts of interfaces in Compose UI, using the onGloballyPositioned() modifier to determine the coordinates of one composable so you can position another one relative to it.

Other Interesting Links

• Motion Layout Button in Android Jetpack Compose
• Medium: Mirror Effect with Jetpack Compose
• Jetpack Compose: Navigation tutorial
• Medium: UI Component by Jetpack Compose
• Medium: PhotoPicker-Compose-Android 13
• Medium: Navigation in Jetpack Compose is Easier Than You Think

Resource Roundup

100% pure code!

GitHub: yogeshpaliyal / Speld

Yogesh Choudhary Paliyal brings us a PinInput() composable, which displays a typical one-character-per-cell OTP or PIN input UI.

Gist: kafri8889 / DashedDivider.kt

Anaf Naufalian provides a quick demonstration of using a Canvas() to create a dashed line of desired thickness and pattern.

…And One More Thing

We are nearing the one-year anniversary of the first stable release of Compose. I had expected that once Compose was stable that Google would put a lot of pressure on developers to use Compose UI, akin to how Google started pressuring developers to use Kotlin. In particular, I had expected that other Google teams would start offering composables, or at least composable wrappers. That has not happened nearly to the level that I anticipated.

IOW, where are all the Google Play composable SDKs?

Maps Compose is a fine example of what I was expecting. It offers a Google-supplied first-class composable API for embedding Google Maps. While you can use AndroidView to wrap a MapView, having a solution developed and maintained by the Maps developers helps ensure that we are doing a good job in using Maps in Compose.

But, where are the rest?

Google Cast, AdMob, Google Identity, and others all have UI elements that could benefit from a supported composable wrapper. None seem to have one, though perhaps I am just not finding them (which would be its own problem).

Perhaps Google focused on Maps because of the sheer complexity of the Maps API. That is fine, but some of the others have their own challenges. For example, Google Cast places an emphasis on an ActionProvider for use in an action bar, and it is unclear how that can be used in a Compose environment.

With luck, these teams will start offering first-class Compose support in the coming months. If another year goes by and we are still asking “where are all the Google SDKs?”, that would seem to be a bad sign.