jetc.dev Newsletter Issue #241

Published: 2024-11-19

We got a new BOM, new Compose alphas, and a new Compose Multiplatform patch release!

This week, we also look at PaddingValues, graphics layers, and swipe-to-* implementations. And we peek at a heatmap library and yet another navigation system.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Our trio of Compose BOMs are up to 2024.11.00. The BOM library mapping page has not been updated for this version yet, and it is not quite clear how the production one differs from 2024.10.01. My guess is that they will release all three BOMs in unison even if one only one changes.

In this case, the alpha BOM will get 1.8.0-alpha06 versions of the main artifacts, plus various alpha updates for the Compose Material3 artifacts. These updates add a variety of changes including:

  • Add new overscroll configuration options

  • Add new focus management options

  • Add a new Material3 VerticalDragHandle()

We also got a bunch of new Lint-related Compose libraries:

  • androidx.compose.animation:animation-core-lint
  • androidx.compose.animation:animation-lint
  • androidx.compose.material3:material3-lint
  • androidx.compose.foundation:foundation-lint
  • androidx.compose.runtime:runtime-lint
  • androidx.compose.runtime:runtime-saveable-lint
  • androidx.compose.ui:ui-graphics-lint
  • androidx.compose.ui:ui-lint
  • androidx.compose.ui:ui-test-manifest-lint
  • androidx.compose.ui:ui-text-lint

New Compose-related library versions include:

  • androidx.activity:activity-compose:1.10.0-beta01
  • androidx.lifecycle:lifecycle-runtime-compose:2.9.0-alpha07
  • androidx.lifecycle:lifecycle-runtime-compose-android:2.9.0-alpha07
  • androidx.lifecycle:lifecycle-runtime-compose-jvmstubs:2.9.0-alpha07
  • androidx.lifecycle:lifecycle-runtime-compose-linuxx64stubs:2.9.0-alpha07
  • androidx.lifecycle:lifecycle-viewmodel-compose:2.9.0-alpha07
  • androidx.lifecycle:lifecycle-viewmodel-compose-android:2.9.0-alpha07
  • androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.9.0-alpha07
  • androidx.navigation:navigation-compose:2.8.4
  • androidx.navigation:navigation-compose:2.9.0-alpha03
  • androidx.navigation:navigation-fragment-compose:2.8.4
  • androidx.navigation:navigation-fragment-compose:2.9.0-alpha03
  • androidx.paging:paging-compose:3.3.4
  • androidx.paging:paging-compose-android:3.3.4

Also, JetBrains released Compose Multiplatform 1.7.1. Mostly, this fixes a variety of bugs.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Can I Nest Vertically-Scrolling Composables?

The answer is “yes”, but you need to use a fixed height for the nested composable, as we see in this week’s highlighted Stack Overflow question.

How Can I Get a PaddingValues That Respects Consumed Padding?

What starts off as a question about a different approach for WindowInsets.asPaddingValues() turns into an exploration of ModifierLocal, how to improve composables to avoid “first frame” misses, and more.

Composable Commentary

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

Video: Graphics layers

Google’s Rebecca Franks (Mastodon, Bluesky) gives us a brief walkthrough of graphics layers in Compose, including applying render effects and transformations to layers.

Skipping the invocation of intermediate composables

Shreyas Patil (Mastodon, Bluesky) dives into the “use a lambda producer, not a simple value” advice in Compose development, explaining how it helps Compose skip recompositions more readily.

Medium: SwipeTo explore different implementations in Jetpack Compose

The swipe-to-dismiss or swipe-to-reveal patterns are fairly popular. Stefano Natali (Bluesky) explores several implementations of those patterns in Compose, from high-level options like SwipeToDismissBox() to low-level solutions like detectHorizontalDragGestures().

Medium: How to Avoid Recomposition Loops in Jetpack Compose

Pavel Bo explains how our code can get into a recomposition loop, where the act of recomposing triggers another recomposition. Pavel walks through one example of this and explains how to clean up the implementation to avoid the loop.

Medium: Make Restricted Scope Components with compose

Medium user Quokkaman (possibly a future Marvel Comics superhero) wanted to create a product design system, where slot APIs could be restricted to only certain composables. The proposed solution borrows ideas from RowScope and ColumnScope, which limit the availability of certain modifiers to children of Row() or Column(), respectively.

Curved Bottom Bar in Jetpack Compose

One UI pattern sometimes seen with bottom bars is to have the bar be curved, to support having a FAB nestle into the curved area. Victor Brandalise walks us through an implementation of this pattern.

Medium: Getting Started with Animations in Jetpack Compose

Kadir Kuruca gives us a tour of various animation APIs, from animateDpAsState() and animateFloatAsState() to updateTransition() and rememberInfiniteTransition().

Animating the Airbnb Logo in Jetpack Compose

Scott Pierce looks at a much more elaborate animation scenario: animating the drawing of a complex shape, in this case the Airbnb logo. This involves getting a roster of points out of the logo’s SVG representation, writing the code to render those points, and animating that rendering operation.

Resource Roundup

100% pure code!

GitHub: iFleey / Compose-HeatMap

GitHub user iFleey offers us a Compose Multiplatform (for Android and desktop currently) library with a HeatMap() composable for generating GitHub-style grid heatmaps.

GitHub: NeoUtils / Highlight

GitHub user NeoUtils brings us a simple Highlight class that uses a roster of Regex objects to convert a string into an AnnotatedString, with each Regex associated with a TextColorScheme describing how to format matches.

GitHub: mahmoudafarideh / ComPilot

Mahmoud Afarideh published a KSP-based navigation router for Compose, with type-safe routes, backstack management, and more. See this Medium post for more information about the library.

Notable Releases

Horologist is up to v0.7.5-alpha, mostly for dependency updates.

Coil is up to 3.0.3, fixing another smattering of bugs.