jetc.dev Newsletter Issue #195
Published: 2023-12-26
This week, we look at atomic state changes, morph some shapes, and have our composables
play nice with Views
. We integrate Navigation for Compose and ExoPlayer, including
an equalizer UI. And we implement gauges and control some bars.
Reminder: this site offers full-text search to find topics mentioned in past issues!
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Compiler 1.5.7
was released with a few bug fixes around the use
of remember()
and return@
.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can We Change Atomic State Changes?
Some forms of state, such as a SnapshotStateList
created by mutableStateListOf()
,
have complex contents. Sometimes, we need to mutate that in ways that are not handled
by individual operations, such as replacing the contents of the list with another list.
See how to leverage prependStateRecord()
to accomplish this in this week’s highlighted
Stack Overflow question.
How Can We Test Key Combinations?
Desktop apps often support key combinations, and so we need to test those
in a Compose Desktop app. See how we can use withKeyDown()
to handle meta keys like Alt
in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Graphics Shapes API Update
Google’s Rebecca Franks announced that 1.0.0-alpha04
of the Graphic Shapes library
was released. This library helps you define and morph between different shapes, of
varying complexity. This library can be used in Compose UI code, and this alpha release
helps to make it cleaner for use with Kotlin Multiplatform and, eventually, Compose
Multiplatform.
Video: Compose-View Interop in Practice
István Juhos delivered a presentation for DevFest Venezia 2023, outlining how to
mix-and-match composables and classic View
-based UIs. István examines how we test
these hybrid UIs, the pros and cons of this interoperability layer, and more.
Medium: Implementing Navigation in Jetpack Compose
Michihiro Iwasaki walks us through the basics of using Navigation for Compose, including setting up transitions between screens.
Medium: Compose Navigation — A great choice for large Android apps
Navigation for Compose has garnered a fair number of complaints over the years. Marcin Piekielny argues that Navigation for Compose is fine, even for larger apps, if you abide by Google’s recommendations. Marcin shows how to do this, including using nested navigation graphs for coping with big code bases.
Medium: How to animate and improve performance for a smoother animation
Medium user Mnasrallah wanted to create an animation of a yin/yang symbol but ran into performance problems stemming from overcomposition (140+ recompositions instead of just one). After walking us through how to create the animated effect, Mnasrallah shows the different optimizations that can be applied, from switching to lambda versions of modifiers to deferring state reads by wrapping them in lambdas.
Medium: Highly customizable Fading Edge modifier in Jetpack Compose
Medium user Kappdev explains how to add a fading edge to a scrollable container, so the content seems to fade out as it reaches the edges of the container.
Medium: Live Streaming and Audio Equalizer with ExoPlayer in Jetpack Compose
Megh Lath demonstrates building an equalizer panel in Compose UI to control the audio playback of ExoPlayer, with support for preset equalizer values.
Other Interesting Links
- Compose walk-through part 2: Managing state
- Medium: An Overlay Blur with Android’s Jetpack Compose Is Harder Than It Should Be
- Medium: Android Compose: Easy animation progress
- Medium: Android SVG path to Jetpack Compose Shape
- Medium: AppBarLayout in Compose
- Medium: Building a Generic Searchable Table Dialog in Jetpack Compose
- Medium: Crafting the Instagram Home Feed UI with Jetpack Compose: A Step-by-Step Guide
- Medium: Creative Playground: Crafting a Digital Pop-it with Jetpack Compose
- Medium: How to handle single-event in Jetpack Compose
- Medium: Improving RoundCornerShape appearance in narrow widths
- Medium: Intro to Room using Jetpack Compose
- Medium: Kotlin — Compose: Observable flow with MutableSharedFlow
- Medium: Optimizing Jetpack Compose with
@Stable
: Smart Recomposition Strategies - Medium: Sharing UI Across Platforms with Compose Multiplatform
- Medium: State Management in Jetpack Compose
- Medium: Ultimate cheat sheet for Layouts in Jetpack Compose
- Preventing Recomposition of Screens in Jetpack Compose NavHost
- Pull up Refactor in Jetpack Compose
- The rules I am using to organize and document my Jetpack Compose code
- Unleashing The Power Of Jetpack Compose Tooling: A Comprehensive Guide
- Video: Setting Sail with Compose Multiplatform
Resource Roundup
100% pure code!
GitHub: osamasayed585 / Verify-Swift
Usama Sayed brings us a SwiftAuth()
composable that implements an OTP code entry widget,
complete with error states, customizable digit counts, text size and border shapes, and more.
GitHub: yamin8000 / Gauge
Yamin Siahmargooei offers a Gauge()
composable for analog gauges, with customizable
ranges, needles, colors, and more.
GitHub: kafri8889 / SystemBarsController.kt
Anaf Naufalian created a SystemBarsControllerState
that makes it easy for composables
to show or hide the system bar, status bar, and navigation bar.
Other Interesting Links
- Gist: thomashorta / FadingEdgesModifier.kt (fading edges for vertical/horizontal scrolling)
- GitHub: airalpha / flashbar (rich snackbar implementation)
- GitHub: ioki-mobility / ProgressButton (button with built-in progress indicator)
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?!?