jetc.dev Newsletter Issue #107

Published: 2022-03-15

This week, we peek at 1.2.0-alpha05 and see how much optimization we need to worry about in our Canvas composables. We look at permissions, Glance, and animations. We see a seemingly infinite number of color pickers and a way to help detect overcomposing. And I hope for some “how do we do this in Compose UI?” love for the long tail of Android UI elements.

Alpha Analysis

Reviewing the release notes for the latest Jetpack Compose update!

1.2.0-alpha05 came out, with:

• Support for coroutines 1.6.0

• Documentation for some Gradle options for getting metrics and reports from the Compose compiler

• A change to have includeFontPadding be disabled by default

• Support for the “animator duration scale” value in Developer Options

• A refactoring of LazyVerticalGrid() and LazyHorizontalGrid() into a new androidx.compose.foundation.lazy.grid sub-package

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Change the Slider Range?

Slider() is an easy way to implement a SeekBar-style UI, but by default it returns a value between 0f and 1f. If you wish for a more convenient range of values, use the valueRange parameter, as we see in this week’s highlighted Stack Overflow question.

Is It Safe to Allocate?

We were told to worry about allocating objects in custom views, particularly in onDraw() and similar methods. Learn about whether that is a concern in Compose UI in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Play Time with Jetpack Compose

In this post, Google outlines some benefits and challenges of migrating the Play Store app to Compose UI.

Video: Behind the scenes with animations & Jetpack Compose

In this segment from #TheAndroidShow, Florina Muntenescu and Doris Liu spend a few minutes reviewing how animations work in Compose UI.

Handling Permission Appropriately in Jetpack Compose

Samantha Namenya walks us through requesting runtime permissions in a Compose UI app, using Accompanist’s rememberPermissionState() and rememberMultiplePermissionsState().

Medium: Demystifying Jetpack Glance for app widgets

Marcel Pintó wrote a FAQ for applying Glance to your app widgets, covering things like how Glance ties into the app widget XML metadata, what level of control you have over the look of the app widget, and how you publish updates to the app widget content.

Medium: Chaining Animations With Jetpack Compose

Stephen Vinouze returns, this time looking at having multiple animations tie together in time, including sequential and parallel animations. Stephen demonstrates using coroutines and delay() for controlling the timing and sequence of events.

Medium: Promise compose compiler and imply when you’ll change

Shreyas Patil looks at @Immutable and @Stable annotations, the differences between them, and how Compose leverages them to improve performance by avoiding unnecessary recompositions.

Medium: Have Fun With Jetpack Compose GraphicsLayer Modifier

Elye explores the graphicsLayer() modifier and how you can use it to rotate, scale, move, blur, or otherwise transform the UI rendered by a composable.

Using Tailwind CSS with Jetpack Compose for Web

The current Compose for Web is style-agnostic, insofar as it helps you generate HTML without necessarily imposing any particular style on that HTML. Amr Yousef walks through the setup for using Tailwind CSS in conjunction with Compose for Web and applying Tailwind styles to your composables.

Resource Roundup

100% pure code!

GitHub: RecomposeHighlighter.kt

Colton Idle and theapache64 highlighted a particular Compose UI snippet from Google. This defines a recomposeHighlighter() modifier “that draws a border around elements that are recomposing”. This can help you identify overcomposing, where elements are being recomposed more often than you might expect.

GitHub: getStream / sketchbook-compose

The Stream team has released a library containing a Sketchbook() composable, allowing users to paint on a canvas with a color picker, a few tools, and undo/redo capability.

GitHub: skydoves / colorpicker-compose

Jaewoong Eum brings us a suite of color-picking composables, including ones to “eyedropper” a color from an image, an HSV-space classic color picker, and sliders for alpha and brightness.

GitHub: SmartToolFactory / Compose-Color-Picker

The SmartToolFactory team offers another color picker, also using the HSV color space.

GitHub: suzdaleva / ComposeNumberPicker

Want a picker, but for a number or value from a list rather than a color? Koval Anastasiya has you covered!

…And One More Thing

A lot of stuff has been written about converting ordinary UI elements from the View-based system to composables, such as EditText and Button. A fair amount of material exists for converting various flavors of RecyclerView and ViewPager to composables. All that is essential and wonderful.

There is a lot more to classic UI construction than that, though, and we are going to need information about converting those to Compose UI as well.

A few weeks ago, we saw an article about “action modes” or contextual app bars. That same issue saw coverage of a Slack thread on using composables in an AutoCompleteTextView.

On a percentage basis, neither of those are common compared with EditText, RecyclerView, etc. However, that still means that tens of thousands of apps use them, and some of those are going to need to get converted to Compose UI. And for that, having existing instructions or recipes will help.

If you have converted this sort of legacy UI to Compose UI, please consider writing something about it!