jetc.dev Newsletter Issue #236

Published: 2024-10-15

This week, we look at Compose Multiplatform UI testing and passing data between screens in Navigation for Compose. We explore Compose Multiplatform camera apps and implementing pull-to-refresh in Compose Material3. And we render some JSON in an interactive tree.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

We got new alpha and beta Compose BOMs:

• androidx.compose:compose-bom-alpha:2024.09.03
• androidx.compose:compose-bom-beta:2024.09.03

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Can I Have a verticalAlignment With a Percentage?

The typical values we use for verticalAlignment on a Row() or LazyRow() are for specific spots, such as Alignment.CenterVertically. However, those are just pre-defined Alignment objects, and you can create others. BiasAlignment.Vertical lets you create an Alignment where you specify relative positioning via a bias fraction, as we see in this week’s highlighted Stack Overflow question. See also this Slack thread, where the question was cross-posted.

Can We Change fontScale in a Density?

The question involves an app feature for custom font scales, which are tracked via fontScale in Density, published by LocalDensity. Since Density is an interface, not a data class, we cannot readily just copy the current value and replace fontScale. But, because Density is an interface, we can achieve a similar result via interface delegation, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: CMP for Mobile Native Developers: UI Testing

Santiago Mattiauda continues walking native developers through the world of Compose Multiplatform, this time looking at writing UI tests using composeTestRule() and runComposeUiTest() and how to run those tests on Android and iOS.

Medium: Passing Data Between Screens in Jetpack Compose: A Comprehensive Guide

Muhamed Riyas M reviews a few options in Navigation for Compose to exchange data between screens, including sharing a viewmodel, accessing the SavedStateHandle in back stack entries, and passing nav arguments in routes.

Medium: Pass data between screens with Jetpack Compose Navigation + Hilt

Continuing that theme, Deniz Nessa explores nav arguments, SavedStateHandle, and shared viewmodels, this time this time focusing on viewmodels set up with @HiltViewModel as part of an overall Hilt enviroment.

Medium: Nanit’s Journey to Compose Multiplatform Adoption (Part 1)

Andrii Afanasenko walks us through how Nanit migrated from separate native iOS and Android apps, first to ones that shared business logic through Kotlin Multiplatform, then continuing on to share UI via Compose Multiplatform. They are saving quite a bit of development time, though some headaches remain (such as per-platform modals).

Medium: Building a Cross-Platform Camera App with CameraK and Compose Multiplatform

Kashif Mehmood created CameraK for cross-platform camera use with Compose Multiplatform. In this post, Kashif explains how to create a simple camera app for iOS and Android using that library.

Kotlin Multiplatform Developer Roadmap

Jaewoong Eum published a detailed diagram showing different things to learn as part of your adoption of Kotlin Multiplatform, including Compose Multiplatform.

Drawing Custom Alerts on Top of Bottom Sheets in Jetpack Compose

Showing stacked modals can be tricky. As a result, showing a modal on top of a ModalBottomSheet() can be tricky. Sanskar Agrawal demonstrates how to implement it, using Dialog().

Medium: Pull to Refresh with Compose Material 3

Domen Lanišnik gives us an up-to-date set of instructions for using PullToRefreshBox() or the pullToRefresh() modifier to implement the pull-to-refresh or swipe-to-refresh UI pattern.

Other Interesting Links

• How to create Video View with Android Compose & ExoPlayer?
• Medium: Bottom Sheets in Jetpack Compose: ModalBottomSheet vs. BottomSheetScaffold
• Medium: Custom Sliders in Jetpack Compose
• Medium: Dynamic Lazy Grids in Jetpack Compose: Vertical, Horizontal, and Staggered Grids
• Medium: How to Implement Google Maps(or any library) with Cocoapods in KMP
• Medium: Jetpack Compose Made Easy: A Beginner’s to Mastery : Part- 3(State Management in Jetpack Compose)
• Medium: Jetpack Compose:Optimizing UI Code for Performance and Maintainability
• Medium: Make your code readable with Higher Order Components in Jetpack Compose
• Medium: News API using Paging3 and Jetpack Compose
• Medium: Place Scope Handling on Auto-Pilot with Koin & Compose Navigation
• Medium: Tooltips In Jetpack Compose
• Medium: UI Test with Jetpack Compose
• Medium: Understanding Recomposition in Jetpack Compose: What It Is and What Causes It
• Medium: Understanding Scaffold in Jetpack Compose: A Comprehensive Guide
• Medium: Unified UI with CMP: Getting Started with Compose Multiplatform ‘Hello World’
• Why You Should Build Mobile Apps With Compose

Resource Roundup

100% pure code!

GitHub: snappdevelopment / JsonTree

Sebastian Neubauer has released a library to show JSON output with syntax highlighting and expand/collapse support for nested objects.

Notable Releases

Horologist has a 0.7.3-alpha release, containing bug fixes.

Voyager’s 1.1.0-beta03 release supports Koin 4.0.0 and adds some z-index improvements.

Coil is up to 3.0.0-rc01. Cache-control header support is now in a new artifact, SVGs can be scaled to density, and addLastModifiedToFileCacheKey is now disabled by default.

Compose Unstyled is out with a 1.15.0 release. Modal bottom sheets and dialogs are now rendered edge-to-edge.

Compose Destinations’ 1.11.7 release is mostly there for dependency updates.