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.
Other Interesting Links
- Building Wave Progress Bar with Jetpack Compose
- Medium: Advanced ViewModel injection with DaggerHilt in Jetpack Compose
- Medium: Building Dynamic UI Components in Android with Jetpack Compose
- Medium: Enable Composable Views Sharing Across Modules Without Dependency Constraint
- Medium: Level Up Your Jetpack Compose Skills With Method References!
- Medium: State Management in Jetpack Compose
- Medium: Understanding remember in Jetpack Compose: A Complete Guide
- Medium: Understanding State in Jetpack Compose: Remember and State Hoisting
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.
Other Interesting Links
- GitHub: adamglin0 / compose-phosphor-icon (Kotlin Multiplatform wrapper for Phosphor Icons)
- GitHub: eygraber / compose-material3-navigation (ties bottom sheet destinations into Navigation for Compose)
- GitHub: ioki-mobility / ProgressButton (button with progress-based fill)
- GitHub: masooddalman / OTPMan (automatic OTP processing)
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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?