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)