jetc.dev Newsletter Issue #120
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!
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.
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.
Posts, videos, and other new information related to 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
system, for things like bounces.
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.
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.
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!
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.
Ahmed Samir explores the
MotionLayout() composable and how it uses
Transitions to describe an animation of composables. Ahmed applies this
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
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
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
100% pure code!
…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
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.
- 2023-01-24: Locales! Relay! Effects! Paging! Foldables! Permissions! Date pickers! Bi-directional scrolling! And what your MaterialTheme means... for your SwiftUI code?!?
- 2023-01-17: New Compose patches and alphas! Dealing with Navigation for Compose! Scaffolds! QR codes! Server-defined UI! And @firstname.lastname@example.org has joined the BOM squad! 😁 💥
- 2023-01-10: onNewIntent() and composables! ContactsContract and composables! Balloons! QR codes! Pencils! And a focus on focus!