jetc.dev Newsletter Issue #212
Published: 2024-04-30
It’s a bit of a short issue this week, in part because I’m on vacation! 🏞️ ⛰️ So, no Stack or Slack this week!
But, we spend a fair bit of time on shared element transitions and container transforms. We get buzzed by haptics and see an intriguing approach to tooltips. And, we get our hands dirty with Soil.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Multiplatform now has a 1.6.10-beta02
release,
with bug fixes plus improved lifecycle support for more targets.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Write contents of a composable to a bitmap
Google’s Rebecca Franks pointed out further updates to Compose UI’s built-in support
for capturing composables to bitmaps. A new rememberGraphicsLayer()
function
is in the current 1.7.0 alpha, and it plus a toImageBitmap()
extension function
on GraphicsLayer
simplify this process even further.
5 Haptic Feedback Implementations To Enhance Your App
Haptics provide an important form of feedback to users, especially for cases where
they might not be looking at the screen. Compose developer sinsamaki outlines a few
implementations of haptics for Compose UI, powered by the LocalHapticFeedback
and
LocalView
implementations of performHapticFeedback()
.
Medium: Shared Element Transition In Jetpack Compose: Provide Enriched User Experiences
Shared element transitions and container transforms are two related techniques that
cause one screen to morph into another, highlighting a common UI element (or set of
elements) in that transition. Jaewoong Eum explores Compose UI’s built-in support
for these in the latest 1.7.0 alpha, including SharedTransitionLayout
and the
sharedElement()
modifier. The post also looks at the connections between these
transitions and Navigation for Compose.
Medium: Shared Element Transitions in Jetpack Compose
Francesc Vilarino Guell gives us another view of shared element transitions and how
they tie into Navigation for Compose. The SharedTransitionLayout
wraps the
NavHost
to have the entire screen (or whatever the NavHost
is handling) be
the “stage” for the transitions. NavHost
then supplies the SharedTransitionScope
and AnimatedVisibilityScope
necessary for using the sharedElement()
modifier.
Declarative APIs for Declarative UIs: Pagination as state
TJ Dahunsi wrote the Tiler library as an alternative to Paging for Compose. TJ wanted a paging API that was a better match for how Compose works, and Tiler is the result. In this post, TJ explains more about the rationale behind Tiler’s design and API.
Jetpack Compose for iOS: Interoping with native Components
With Compose for Android, we can have composables use views (via AndroidView()
)
and have views use composables (via ComposeView
). Gustavo Fão Valvassori explores the
equivalent UI toolkit interoperability on the iOS side: having composables inside
UIKit or SwiftUI user interfaces, and having UIKit or SwiftUI elements be used
inside of composables.
Toggle Labels With Icons - Personalizing Accessibility
Eevis Panula likes icons that have associated text labels. Not everybody likes that, though. Eevis explores having that accessibility option be controlled by the user via a settings screen, backed by Preferences DataStore.
Medium: Designing Intuitive Interfaces: A Take on Modifier-based Tooltips in Jetpack Compose
Michell Bak’s team uses tooltips. Lots of tooltips. Enough tooltips that having to use a
custom wrapper container was going to be a problem. Michell explains how the team
created a tooltip()
modifier for any composable, backed by a Popup()
that floats
over the current activity.
Other Interesting Links
- Customizing Focused State and Ripple Effects in Jetpack Compose
- Jetpack Compose in myroute Android App
- Medium: 2048 with Compose: Part 2
- Medium: A Step-by-Step Guide to Creating a Custom AutoCompleteTextView for Search Suggestions in Compose
- Medium: Animations in Jetpack Compose: Crossfade
- Medium: Blur Images In Jetpack Compose
- Medium: Compose Chronicles: Don’t Forget Your State! rememberUpdatedState To The Rescue
- Medium: Container Transform in Jetpack Compose
- Medium: Craft a Captivating Animated Countdown Timer with Jetpack Compose
- Medium: Custom Scroll Behavior in Jetpack Compose
- Medium: DerivedStateOf pitfall — Jetpack Compose
- Medium: Jetpack Compose: How do we preview composables that use WindowsSizeClass?
- Medium: Material 3 calculateWindowSizeClass(): Implementing responsive Android and Kotlin Multiplatform Apps at ease
- Medium: Minimum lines of code you need for showing List using MVVM with Jetpack Compose, Ktor, StateFlow and Coroutines
- Slides: Compose Multiplatform: iOS, Android & Desktop Apps in 100% Kotlin
- Slides: Compose View Interop in Practice
Resource Roundup
100% pure code!
Soil
The Soil team has relased their eponymous set of Compose Multiplatform libraries, supporting Android, iOS, desktop, and Web/Wasm. This includes a scoped state management library, a validating form framework, and a querying/caching module.
Gist: kaaneneskpc / AnimatedBorderComponent.kt
Kaan Enes KAPICI demonstrates a Card()
with an animated gradient border.
Notable Releases
Maps for Compose has a 4.4.1
release with a bug fix.
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?!?