jetc.dev Newsletter Issue #185

Published: 2023-10-10

We have a new BOM and a bunch of new Compose alphas, so we check them out!

Also, we see what droidcon NYC 2023 had to offer. We look at LazyList problems, accessibility, and gestures. And we examine some wheel picker implementations along with a “scratch-off card” UI.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The Compose BOM is up to 2023.10.00, mapping to a new 1.5.3 patch release of Compose, with a few bug fixes.

We also got an update to 1.6.0-alpha07 of Compose. Of note here:

  • SnapshotStateList now implements RandomAccess
  • GraphicsSurface is now known as AndroidExternalSurface
  • dragAndDropSource() and dragAndDropTarget() modifiers were added
  • TextFieldState now has UndoState
  • We now have ColorList and ColorSet collections that avoid allocations

In other Compose design systems:

  • TV Compose was bumped up to 1.0.0-alpha10 with a couple of renames, a new NavigationDrawerItem, and baseline profiles in both the tv-foundation and tv-material libraries

  • Wear Compose has a 1.3.0-alpha07 release with improvements to PositionIndicator

Also, we got updates to some Compose-adjacent libraries:

  • androidx.activity:activity-compose:1.8.0
  • androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13
  • androidx.hilt:hilt-navigation-compose:1.1.0-beta01
  • androidx.navigation:navigation-compose:2.7.4

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Move at a Fixed Velocity?

tween() takes a duration, and it is easy to just hand it a constant duration. However, that means that animations of different distances use different velocities to meet the constant time. Instead, you can calculate your desired time based on a fixed velocity, as we see in this week’s highlighted Stack Overflow question.

How Can I Get State From Java?

If your source of truth is a legacy Java class, you might not be good position to have it use something like MutableState directly. You still need a MutableState, but you may need to have some additional bridge code to arrange to update that state when the Java object’s data changes, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

droidcon NYC 2023

droidcon NYC 2023 had quite a few presentations related to Compose, including:

Composable Commentary

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

Medium: Hacking LazyList in Android Jetpack Compose

Gergely Kőrössy points out a long-standing limitation with the Lazy*() family of composables: if you use keys, then the scroll position changes when you change which item is first in the list. Gergely demonstrates a reflection-based hack to avoid this behavior.

Medium: Gestures in Jetpack compose — All you need to know — Part 1

Radhika S brings us a deep dive into gesture detection with Compose UI (and this is only part 1!). Radhika looks at the pointerInput() modifier and detectors based upon it, higher-level modifiers like clickable() and draggable(), and different approaches for detecting click, drag, and scroll gestures.

Medium: Semantics and Accessibility in Jetpack Compose: Part-1

Kaushal Vasava explores semantic nodes in Compose and their relationship to accessibility. Part 1 looks at the semantics() and clearAndSetSemantics() modifiers, SemanticsProperties and SemanticsActions, and how to examine the merged and unmerged semantics trees. Part 2 looks at a wide range of accessibility concerns, from touch target sizing through providing adequate descriptions and custom accessibility actions.

Medium: Custom toggle buttons in Jetpack Compose

Medium user Renatojobal walks us through the individual elements of a toggle button and how to create one from scratch, leveraging the swipeable() modifier to find out about state change interactions. The result is a CustomSwitch() composable with configurable resources for the thumb and track backgrounds.

How to Request Location Permissions in Jetpack Compose

Requesting runtime permissions can be annoying, and requesting location permissions can be annoyingly complex. Tomer Ben Rachel walks us through what it takes to do this right in Compose UI, including handling a variety of edge cases.

Medium: Shimmer & Shadow Loading Effect Animation with Jetpack Compose

Caner Kaşeler teaches us how to create a shimmer effect in Compose UI for both light and dark modes. The result is a shimmerLoadingAnimation() modifier, configurable for the speed of the animation and the width and angle of the shimmer effect.

Medium: Square size in Jetpack Compose

It feels like having a square UI element in Compose is easy: just give it a size. That works, but it has limits, such as not necessarily adapting well to changing content sizes. Misha Malasai looks at what it takes to create a custom squareSize() modifier that overcomes these limitations.

Video: Take your shot of Vitamin!

Gerard Paligot delivered a Devoxx presentation on Vitamin Compose, a custom design system, where Decathlon overrode certain Material Design aspects to match their visual identity.

Resource Roundup

100% pure code!

GitHub: oOJohn6Oo / JWheelPicker

GitHub user oOJohn6Oo brings us a trio of iOS-style “wheel picker” composables: JWheelPicker() (single items), JMultiWheelPicker() (multiple columns), and JDateWheelPicker() (date selection).

GitHub: JaberAhamed / CardScratch

Jaber Ahamed created an ImageScratch() and a CardScratch() composable to implement the “scratch-off” UI pattern.

Notable Releases

Maps for Android released 3.0.0 and 3.1.0 in rapid succession.

Koin, a popular dependency inversion framework for Kotlin, is up to 1.5.0 with improved Compose support.