jetc.dev Newsletter Issue #198

Published: 2024-01-16

This week, we explore a new Compose Compiler, our first RC of Compose 1.6.0, and other related updates.

We also look at lists of composables and the cost of derivedStateOf(). We peek at edge-to-edge UIs, glassmorphism, and navigation. And we look at an iOS-first Compose Multiplatform theme and widget set, resulting in cheers from all the teams whose designers conveniently forget that Android exists. 😞

Also, it’s worth pointing out that JPC Community is a Discord space dedicated solely to Jetpack Compose.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler now has a 1.5.8 release. Principally, this adds support for Kotlin 1.9.22. It also fixes a few bugs, including one for custom Java 21 builds of the compiler.

Compose is up to 1.6.0-rc01. The API should now be fairly stable, with changes mostly limited to optimizations (e.g., improvements in vector graphics) and bug fixes. Note that the DragAndDropTarget() constructor was eliminated — use object: DragAndDropTarget {} instead.

Compose Material3 is up to 1.2.0-beta02. This release introduces a bug in IconButtonColors, renames the various SwipeToDismiss APIs to SwipeToDismissBox, and fixes a few bugs.

Wear Compose now is out with 1.3.0-rc01. The big change is that the MaterialTheme large shape now uses a 26dp rounded corner, which might impact screenshot tests.

And in Compose-adjacent libraries, the Compose artifacts in androidx.lifecycle, such as androidx.lifecycle:lifecycle-viewmodel-compose, are up to 2.7.0

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Assemble a List of Composables?

It is possible to create List<@Composable () -> Unit>. While this works with listOf() in isolation to define the content, concatenation (listOf(...) + listOf(...)) fails with an error. Learn why, and a possible workaround, in this week’s highlighted Stack Overflow question.

Is derivedStateOf() Expensive?

Answer: yes. The details might interest you, including a comparison with MutableState performance, benchmarking, and more, in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Camouflage the Status Bar with Edge-to-Edge Jetpack Compose Screens and Dialogs

Katie Barnett explores edge-to-edge UI support in Compose, including unwinding any theme-level management of the status or navigation bars, dealing with both dark and light mode, adding a status bar scrim, dealing with dialogs, and more!

Medium: Understanding Lifecycles in Jetpack Compose: Best Practices and Strategies for Effective Memory Management

Rohit Neel takes a deep dive both into composition lifecycles (including recomposition) and the impact of Android activity lifecycles on composables. Rohit also examines memory leaks and how to avoid them.

Medium: Blurring the Lines: How to Achieve a Glassmorphic Design with Jetpack Compose

Zakir Sheikh looks at “glassmorphism”: blurring background content while leaving the foreground content untouched. While Compose UI offers a blur() modifier, it only works on Android 12 and higher and cannot readily be used for background blurs. Zakir demonstrates a legacyBackgroundBlur() modifier that overcomes these limitations.

Medium: M2 to M3 journey: Swipe Refresh

Javad Jafari explains what it takes to move pull-to-refresh UI patterns from Compose Material’s PullRefresh() to Compose Material3’s under-documented PullToRefresh().

Medium: Compose and Conquer: A Tale of Effortless Android Navigation

James Cullimore reviews Jetpack’s Navigation capabilities, not only for Compose but for fragments as well.

Medium: How to share data in Navigation Graph using navArguments in Jetpack Compose

Mun Bonecci walks us through the use of navigation arguments in Navigation for Compose, including the navArgument() DSL function and obtaining the arguments as part of navigation.

Medium: Handle Navigation Args in Directly ViewModel by Hilt, Jetpack Compose

Bekir Yavuz Koc explores using Hilt to unpack navigation arguments from a SavedStateHandle using a @ViewModelScoped module. This allows the viewmodel constructor to take ordinary values rather than a SavedStateHandle directly.

Medium: Using Custom Fonts in KMP (Compose Multiplatform)

Bharat Kumar explores what it takes to use a custom font with iOS and desktop, along with Android, in a Compose Multiplatform project.

Other Interesting Links

• Composing Navigation in multi-module apps
• Effortless Custom Navigation Implementation with Jetpack Compose: A Beginner’s Guide
• Medium: Android Compose Tutorial – Bank Card UI
• Medium: Creating a Modern Carousel in Jetpack Compose Using Material Design 3
• Medium: How to create a horizontally scrolling marquee text with faded edges component in Jetpack Compose
• Medium: How to display an image loaded from the gallery using Pick Visual Media in Jetpack Compose
• Medium: How to display videos using ExoPlayer on android with Jetpack Compose
• Medium: How to mock and test ActivityResult APIs with Jetpack Compose
• Medium: Jetpack Compose : Conditionally Display ‘Read More’ Button Based on Text Lines
• Medium: Mastering Android Jetpack Compose Textfield and Validation
• Medium: Optimizing Jetpack Compose with @Stable: Smart Recomposition Strategies
• Medium: Testing rememberSaveable when an apps configuration changes
• Medium: Unleashing Android UI Power: A Practical Guide to Jetpack Compose with MVI
• Medium: What is Scaffold in Jetpack Compose and How to Use It?
• Running UI tests in Jetpack Compose using Firebase Test Lab
• Video: Android Jetpack Compose #1 and Video: Android Basics with Jetpack Compose #2

Resource Roundup

100% pure code!

GitHub: alexzhirkevich / compose-cupertino

Alexander Zhirkevich has released cupertino, a set of Compose Multiplatform widgets that resemble their iOS counterparts. Alexander also released cupertino-native (UIKit native composable wrappers) and additional libraries for having iOS-centric Compose Multiplatform design systems.

GitHub: canopas / compose-animated-navigationbar

The team from Canopas released another library, this with a bottom navigation bar implementation offering a variety of animated effects as the user switches between tabs.

GitHub: lighttigerXIV / layout-scaffold

GitHub user lighttigerXIV created a lightweight framework to detect landscape postures and tablet screen sizes, for you to be able to adapt your UI to handle those scenarios.

GitHub: mahdiasd / ComposeBottomDialogFilePicker

GitHub user mahdiasd created a bottom sheet media selector UI, offering multi-select, support for varying media types, and more.

Notable Releases

Compose Action Menu is up to 2.0.0, adding support for Compose Multiplatform.