jetc.dev Newsletter Issue #245

Published: 2024-12-17

We got one last(?) round of updates for 2024, including new alphas of Compose and Wear Compose, so let’s check them out!

We also explore adding collapsible headers and injecting composables into LazyColumn() widgets. We look at composition patterns and multiplatform adaptive layouts. We peek at multiplatform code for barcode scanning and mapping. And we wonder what the “X” is in “XR”. 🧐

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

We have a 2024.12.01 version of the three Compose BOMs (stable, alpha, beta). The stable BOM picks up 1.7.6 versions of the main Compose artifacts, containing bug fixes.

We also got 1.8.0-alpha07 of the main Compose artifacts. This too mostly consists of bug fixes.

Compose Material3 is up to 1.4.0-alpha05, adding a tooltip API with an onDismissRequest parameter, some tweaks to WideNavigationRail, and bug fixes.

Wear Compose was updated to 1.5.0-alpha07, with a few improvements to TransformingLazyColumn(), plus bug fixes.

A new set of artifacts related to Compose saved state were released:

androidx.savedstate:savedstate-compose
androidx.savedstate:savedstate-compose-android
androidx.savedstate:savedstate-compose-jvmstubs
androidx.savedstate:savedstate-compose-linuxx64stubs

And, in Compose-adjacent libraries, we got:

androidx.activity:activity-compose:1.10.0-rc01
androidx.camera:camera-compose:1.5.0-alpha04
androidx.camera.viewfinder:viewfinder-compose:1.4.0-alpha11
androidx.lifecycle:lifecycle-runtime-compose:2.9.0-alpha08
androidx.lifecycle:lifecycle-runtime-compose-android:2.9.0-alpha08
androidx.lifecycle:lifecycle-runtime-compose-jvmstubs:2.9.0-alpha08
androidx.lifecycle:lifecycle-runtime-compose-linuxx64stubs:2.9.0-alpha08
androidx.lifecycle:lifecycle-viewmodel-compose:2.9.0-alpha08
androidx.lifecycle:lifecycle-viewmodel-compose-android:2.9.0-alpha08
androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.9.0-alpha08
androidx.navigation:navigation-compose:2.8.5
androidx.navigation:navigation-compose:2.9.0-alpha04
androidx.navigation:navigation-fragment-compose:2.8.5
androidx.navigation:navigation-fragment-compose:2.9.0-alpha04
androidx.paging:paging-compose:3.3.5
androidx.paging:paging-compose-android:3.3.5

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Create a Collapsible `LazyColumn()` Header?

Using nestedScroll() and NestedScrollConnection, we can get information about the scroll position of a LazyColumn() and use that to affect a header. However, there are still a lot of steps to be followed to implement a collapsible header, as we see in this week’s highlighted Stack Overflow question.

How Can We Automatically Inject Composables Into `LazyColumn()` Contents?

As a workaround to a SelectionContainer() bug, we need to add zero-height composables between each Text() composable in a LazyColumn(). Doing that manually works but can be tedious and error prone. Explore this bug and ways to implement this workaround in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Introducing Android XR

Google announced that Android will be powering “XR” headsets in the future, and that you can build apps for it using Compose and Material Design.

(Apparently, “XR” is “extended reality”. Part of me wants it to hearken back to the ‘90’s and have it be “eXtreme Reality”. The rest of me realizes that real reality already seems fairly extreme nowadays, and I’m uncertain that I want that part to be extended.)

Best Practices for Composition Patterns in Jetpack Compose

Without inheritance at our disposal, our main pattern of reuse in Compose is via composition. However, there are multiple forms of composition. Suhyeon Kim reviews two of them: the slot API that we are used to, and the React-style compound component pattern that we see with APIs like LazyColumn().

Medium: Let’s build an Android camera app! CameraX + Compose

Tom Colvin (Mastodon, Bluesky) wrote an extensive post showing how to use CameraX inside of an Android Compose app, including front/rear camera selection, preview with zoom, and actually taking a photo.

Adaptive Layouts in Compose Multiplatform

Kevin Schildhorn (Bluesky) explores Compose Multiplatform’s support for window size classes and adaptive layouts like ListDetailPaneScaffold() and SupportingPaneScaffold().

Medium: CMP for Mobile Native Developers: Using Native Components

Santiago Mattiauda continues a tour of Compose Multiplatform with an eye towards assisting both Android and iOS developers new to CMP. This time, Santiago explains how an existing code base can progressively adopt CMP, leveraging Compose’s interoperability with classic Android views and SwiftUI.

Medium: From Figma to Kotlin: Automating Your Design System for Jetpack Compose

Erik Arzumanyan demonstrates how to take design tokens exported from Figma in JSON format and generate Compose code to implement them in your custom theme.

Google Maps in Jetpack Compose: Polygons

Joe Birch (Mastodon) continues a tour of Maps for Compose features, this time looking at rendering polygons on top of the map. You get to define the corners of the polygon, along with customizations like fill and stroke colors, via the Polygon() composable.

Custom Markers & Dynamic Info Windows in Jetpack Compose Google Maps

Continuing on the subject of Maps for Compose, the Wawandco team walks us through implementing an info window, tied to a marker with custom positioning via setInfoWindowAnchor().

Resource Roundup

100% pure code!

Gist: riggaroo / AnimateBounds.kt

Google’s Rebecca Franks (Mastodon, Bluesky) posted a quick demo of using the animateBounds() modifier and SharedTransitionLayout to quickly animate the change between two composition trees.

GitHub: ismai117 / KScan

GitHub user ismai117 released a Compose Multiplatform library for barcode scanning, wrapping MLKit on Android 🙄 and AVFoundation on iOS.

KMaP

Rafael Mendonça published a Compose Multiplatform mapping implementation for your custom map tilesets. It offers panning/zooming, markers with clustering, popups and layers, and more!

GitHub: SimformSolutionsPvtLtd / SSComposeExpandableListView

The Simform Solutions team brings us an implementation of the expandable-list pattern, implemented both as a first-class composable and as an item that can go into a LazyColumn().

Notable Releases

Accompanist is up to 0.37.0, mostly retiring a lot of libraries that were moved into the Jetpack or otherwise retired.

Horologist has a 0.6.22 release backporting some ambient and padding fixes from the 0.7.7-alpha release. Speaking of alphas, Horologist also has a 0.7.8-alpha… making some follow-on ambient and padding fixes from the 0.7.7-alpha release.

Maps for Compose published a tiny 6.4.0 update, just enough to update the compileSdk version.

Featured here? Please add this badge to your article or repo!

Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.

Recent Issues:

All Issues

Spread the Word!

Suggestions?

If you have ideas for items for future newsletter editions, reach out via email or contact Mark Murphy on kotlinlang Slack!