jetc.dev Newsletter Issue #111

Published: 2022-04-12

1.2.0-alpha07 is out, as well as Wear Compose’s 1.0.0-alpha20 — we look at what’s new in each of those!

Plus, we look at centered cursors, custom modifiers, Canvas() basics, and drag-and-drop. We look at some colorful sliders, and I put out a call for somebody to write the “go-to” rich text editor for Compose UI.

Alpha Analysis

Reviewing the release notes for the latest Jetpack Compose update!

1.2.0-alpha07 was released, and with it, we got:

• Snapshot.withoutReadObservation(), as a way to read a snapshot-managed value without subscribing to changes and triggering recomposition

• A consumeWindowInsets extension property on ComposeView, to control whether that view consumes WindowInsets or not

• A KeyboardType.Decimal to request an IME that has both numbers (like KeyboardType.Number) and a decimal key

• Nested scroll interoperability between views and composables

• A bunch of changes around font management, if you are using FontFamily, Font(), etc.

Also, we have 1.0.0-alpha20 of Wear Compose, including:

• A new edgeSwipeToDismiss modifier for SwipeToDismiss(), to allow swipe-to-dismiss to only be active on the left edge

• A new SwipeToDismissBox() variant with an onDismissed parameter, to get control after a swipe gesture has completed (e.g., for a navigation event)

• A new PageIndicator slot in the Wear-specific edition of Scaffold(), to help with round watches

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Center a Field’s Cursor?

On rare occasion, we might need to have a BasicTextField() where the cursor remains centered. The fix involves a custom textStyle, where we configure the textAlign property, as we see in this week’s highlighted Stack Overflow question.

How Do We Have Immutable State?

Suppose you have a condition where you want a State in one branch and an immutable value in another — how do you handle this? By “rethinking your priors”, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Composed modifiers in Jetpack Compose

Jorge Castillo compares and contrasts using then() and composed() for constructing custom modifiers. The primary difference is in state: then() is for the (preferred) stateless modifier, while composed() is for one that has state.

Medium: Jetpack compose navigation with custom NavType

Yves Kalume explores using Parcelable parameters in Navigation for Compose, including how we wrap them in a NavType to allow them to be passed both in a Bundle and in a stringified form.

Getting started with Canvas in Compose

James Shvarts is back, this time looking at the Canvas() composable, which underlies most of the Compose UI composables. James reviews basic drawing operations, how we can work with Canvas() implicitly via modifiers like drawBehind(), and how to wrap Canvas() in a custom composable.

How to Drag And Drop Views in Jetpack Compose

Radhika S examines what it takes to create drag-and-drop interfaces with Compose UI, using the detectDragGesturesAfterLongPress() modifier to trigger drag-and-drop from a long-press gesture on a composable.

Slides: Something old, something new

Maia Grotepass delivered a presentation at DevConf 2022, talking about interoperability between Compose UI and existing Android app code, particularly legacy UIs.

Medium: Jetpack Compose Test with WireMock

Swarnlata Kumari looks at how to use WireMock for mocking Web service responses, within the context of testing your composables.

Medium: From View to Composable: A Quick jump to Jetpack Compose from an Android View mindset

Alex Styl walks newcomers to Compose UI to how to map core View constructs to composables, complete with a “cheat sheet” for common View->composable conversions.

Other Interesting Links

• Podcast: Jetpack Compose UI Development with Thomas Künneth
• Slides: UI Testing Jetpack Compose apps
• Medium: 2-Way flow using Jetpack compose and Datastore
• Medium: 7 Annoying Things About Jetpack Compose According to Me
• Shader based render effects in Compose Desktop with Skia
• Medium: Build Modern UIs with Compose, PageUiState and FlowState
• OutlinedTextField - Jetpack Compose

Resource Roundup

100% pure code!

GitHub: SmartToolFactory / Compose-Colorful-Sliders

The team at SmartToolFactory has released a library containing a variety of slider composables, including ones with associated labels, custom thumbs, and more!

Gist: darvld / StaggeredVerticalGrid.kt

Dario Valdespino assembled a simple staggered grid implementation.

…And One More Thing

If you wanted to try to leave a lasting mark on Compose UI development, you could try to write a rich text editor.

Google has never offered a rich text editing component for Android, despite there seeming to be wide interest in one. We have a few options using classic Views, though some of those simply load JavaScript rich text editors into a WebView. While that works, it can be slow to initialize, is fairly heavyweight in terms of resource usage, and is at risk of any problems stemming from the Chrome implementation of WebView. Writing a rich text editor as a native custom View is possible — I took a stab at it a decade or so ago and the results were less than stellar.

But, it is 2022, and it is high time that we had a “go-to” rich text editor. I have seen some nascent Compose UI options, and it will be interesting to see if any of them become popular, if something new shows up that becomes dominant, or if we wind up in the same situation as we have been, with no popular options.