jetc.dev Newsletter Issue #222

Published: 2024-07-09

We got the first alpha of Compose Multiplatform 1.7.0, so we take a peek! We also take a closer look at strong skipping, supporting panes, and nested type-safe navigation. And we see a library for collecting signatures on Compose Multiplatform.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

We got updates to Lifecycle for Compose:

• androidx.lifecycle:lifecycle-runtime-compose:2.8.3
• androidx.lifecycle:lifecycle-runtime-compose-android:2.8.3
• androidx.lifecycle:lifecycle-runtime-compose-desktop:2.8.3
• androidx.lifecycle:lifecycle-viewmodel-compose:2.8.3
• androidx.lifecycle:lifecycle-viewmodel-compose-android:2.8.3
• androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.8.3

Also, JetBrains released 1.7.0-alpha01 of Compose Multiplatform. This adds support for some of the Navigation for Compose improvements, such as safe args and shared element transitions. It also moves CMP resources into Android’s assets system, to help with compatibility.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Can’t Nav for Compose Find My Route?

If you are using the new type-safe Navigation for Compose API, it should be substantially easier to ensure that your routes are appropriately wired in. However, “substantially easier” is still not a guarantee. In particular, type-safe nav routes are based on types, not just type simple names, as we see in this week’s highlighted Stack Overflow question.

Why Can’t a Composable suspend?

@Composable and suspend are each great in isolation, but you cannot have a @Composable function also be a suspend fun. Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: New ways of optimizing stability in Jetpack Compose

Google’s Tomáš Mlynarič reviews strong skipping mode: what it is, what it solves, what it does not completely solve, how to help it by creating stability configuration files, and more!

Awesome Kotlin Multiplatform

GitHub user terrakok is maintaining a list of Kotlin Multiplatform resources. This includes many Compose Multiplatform libraries and tools.

Medium: Supporting Pane Layout in Jetpack Compose

Oğuzhan Aslan looks at supporting panes in Material 3, how they relate to list-detail panes, and how to add support for them using Navigation for Compose.

Improving Perceived Performance with Delayed Visibility

Donovan LaDuke wanted to show a loading indicator, but only after a short delay. That way, it never shows for fast-loading content, avoiding a flicker of a loading indicator before the real content shows up. Donovan shows us a delayedVisibility() modifier for implementing this pattern.

Medium: Type Safe Nested Navigation in Jetpack Compose

Medium user Poulastaadas reviews how to set up nested navigation graphs in Navigation for Compose, such as having a separate navigation graph for login/signup screens from the graph used for main app screens.

Medium: How to Create a Draggable Rating Bar in Jetpack Compose

Medium user Kappdev shows us how to create a rating bar composable, where the user can adjust the rating via a drag gesture in addition to tap events. This involves using the pointerInput() modifier and its detectHorizontalDragGestures() DSL function to update the rating based on the drag gesture.

Medium: Mastering Text in Jetpack Compose

Stefano Natali is back, this time looking at how to render styled text: bold, italics, colors, etc. Stefano points out the complexity of AnnotatedString and looks at ways to build one from HTML, including support for links.

Other Interesting Links

• Mastering Kotlin Compose: A Beginner’s Guide to Efficient UI Development
• Medium: Compose Material Design — Spacers, Margin, Padding
• Medium: Create a Widget with Jetpack Compose
• Medium: DataStore in a Compose Multiplatform for iOS/Android — Complete Guide
• Medium: Design System for Mobile App —Jetpack Compose Material 3
• Medium: How to Create a DNA Helix Animation in Jetpack Compose
• Medium: How to Hide BottomNavigation While Scrolling with Jetpack Compose
• Medium: Jetpack Compose Navigation: Your Guide to Seamless Screen Hopping!
• Medium: Leveraging BFF and Dynamic UI in Android Applications with Jetpack Compose
• Medium: Lines in Android Jetpack Compose
• Medium: More Libraries to Enhance Compose Multiplatform — Part 2
• Medium: OPT TextField in Android Jetpack Compose (No need of Library)
• Medium: Simplify Network Management with CMPConnectivityMonitor in Compose Multiplatform
• Single Gesture Interaction between Multiple Composables
• Slides: Drawing on GoogleMaps with Jetpack Compose

Resource Roundup

100% pure code!

Sain

Joel Kanyi has published a Compose Multiplatform library for collecting electronic signatures via a Sain() composable, giving you an ImageBitmap with the resulting image.

GitHub: darkokoa / compose-datetime-wheel-picker

I have mentioned WheelPickerCompose previously. GitHub user darkokoa is porting that to Compose Multiplatform, so we have a cross-platform wheel-style picker.

GitHub: open-tool / ultron

GitHub user open-tool has published a library that builds atop Espresso, UI Automator, and Compose’s testing frameworks to help simplify UI testing. No word of whether it will attempt to annihilate Earth.

Other Interesting Links

• GitHub: anaisbetts / commands-compose (means to monitor suspend calls from composable)
• GitHub: konecny-ondrej / compose-markdown-editor (WYSIWYG Markdown editor)
• GitHub: Tanish-Ranjan / jetpack_compose_components (loading indicators and bottom nav bars)
• GitHub: theGBguy / KomposeNepaliDatePicker (Nepali date picker)

Notable Releases

Maps for Compose is up to 6.0.0. This contains a breaking API change, to better help developers not screw up the use of State objects like MarkerState by failing to remember() them.

The Horologist team released 0.6.15, with a couple of bug fixes.