jetc.dev Newsletter Issue #109

Published: 2022-03-29

This week, we start off by looking at the new 1.2.0-alpha06 release to see what changed. We look at problems with having model objects in non-Compose modules, and we see how to create angled linear gradients and tri-state toggles. We look at modal bottom sheets and multi-player drawing games. And I talk a bit about detecting Compose mistakes automatically, courtesy of Nacho López.

Alpha Analysis

Reviewing the release notes for the latest Jetpack Compose update!

1.2.0-alpha06 is out, with:

• Improvements to focus, such as folding FocusOrder into FocusProperties

• VectorPainter now supports flipping drawables for RTL environments

• Better support for resizing scrollable areas

• Fixes for keeping fields visible when the soft keyboard opens

• Performance improvements for having composables as items in a RecyclerView, perhaps as part of migrating an existing app to Compose UI

• Adds pluralStringResource()

Also, the 2.5.0-alpha05 release of the Lifecycle libraries apparently improves integration between the Jetpack ViewModel and rememberSaveable().

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

When Can I Use A Composable in the Scope of a LazyList or Column?

The LazyColumn()/LazyRow() DSL is nice, but it sometimes leads to confusion. In part, that is because it is not obvious that those functions have a DSL. See how setting up a LazyColumn()/LazyRow() differs from the corresponding Column()/Row() in this week’s highlighted Stack Overflow question.

How Do We Merge MutableStates?

On the surface, this seems easy. However, you need to take care and understand more fully why you are trying to do this sort of merger, as it may be that you are actually trying to do something else, like treat a state as an event. Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Cautions for using classes of other modules as arguments of Composable functions in Jetpack Compose

Multi-module projects are gaining popularity, but Medium user takahirom warns us of a particular problem: detecting model invariance. If the model is in a non-Compose module, Compose will not necessarily infer that the model is stable when consumed directly in a Compose module. takahirom’s post includes a few ways to address this issue.

Medium: How to implement Linear Gradient with any angle in jetpack compose

Gradient fills using drawable resources or code were annoying in the classic View system, but as Mukhtar Bimurat points out, they are substantially simpler to implement in Compose UI. Mukhtar shows us how, including how to have the gradient proceed along a particular angle.

Medium: TriState Toggle in Jetpack compose

Switch() in Compose Material supports two states: on and off. Kashif Masood looks at how to create a three-state composable (e.g., on, off, and ¯\_(ツ)_/¯), using a Surface().

Jetpack Compose: RadioButton

Alex Zhukovich takes a deep dive into the RadioButton() composable, including styling options and how to write tests that exercise the button.

Medium: Jetpack Compose: Google Map Camera Movement Listener

Erselan Khan continues an examination of the Maps for Compose library, this time seeing how we can react as the user pans and zooms the map, thereby changing the “camera” position. Erselan also shows how to move a marker based on that camera position.

Other Interesting Links

• Medium: SwiftUI vs Jetpack Compose by an Android Engineer
• Medium: How to Handle States in Jetpack Compose
• Medium: Fully customizable Jetpack Compose
• Video: Getting Started With Jetpack Compose : An Introduction

Resource Roundup

100% pure code!

Gist: mertceyhan / OverlayBottomSheetScaffold.kt

Cafer Mert Ceyhan posted a code snippet for adding an overlay behind the BottomSheetScaffold() content, to make it be more modal. See Cafer’s tweet to see what it looks like!

GitHub: GetStream / stream-draw-android

The Stream team has published a sample app, combining their communications SDK with their open source drawing library. The app is a multi-player drawing game: one person tries to draw an image associated with a word, and the other players try to guess the word.

Other Interesting Links

• Gist: XFY9326 / ComposeVerticalScrollBar.kt (lightweight vertical scrollbar)
• GitHub: K1rakishou / ComposeSubsamplingScaleImage (partial port of SubsamplingScaleImageView)

…And One More Thing

Nacho López posted a long-ish Twitter thread outlining various “footguns” in Compose and Compose UI development for which Nacho’s team at Twitter created ktlint rules. Those rules run as part of their normal CI process and yell if somebody did something inappropriate.

Most of these rules seem solid, and it would not surprise me in the least if a few of them wind up as official Lint rules in some future edition of Compose. Still others might try creating these as Detekt rules instead of ktlint.

With luck, somebody will publish granular libraries with these sorts of rules. I say “granular” so that we don’t wind up applying rules that are irrelevant to the code base and wasting time (e.g., lots of Compose Material rules will have little value in a project that is using a non-Material design system).

Many thanks to Nacho for posting this thread!