jetc.dev Newsletter Issue #253

Published: 2025-02-11

This week, we wonder what androidx.media3:media3-ui-compose is and whether ModalBottomSheet() has issues. We design good composable APIs and get our shimmer on. Plus, we look at updates to Circuit and Coil.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Google released a new androidx.media3:media3-ui-compose library, which presumably contains stuff to make it easier to consume Media3 (neé ExoPlayer) inside of Compose. Alas, it seems to be undocumented at present.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Is My ModalBottomSheet() High?

ModalBottomSheet(), like most composables, can be sized using modifiers. However, setting the sheet size that way has problems. You may have fewer glitches if you control the size indirectly, by setting the size on the content in the sheet, as we see in this week’s highlighted Stack Overflow question.

Is Short-Circuiting OK?

It is possible to use the short-circuit pattern with composables, where you return early from the function rather than execute some or all of the UI logic. In particular, you might have a composable that accepts a nullable parameter, then short-circuits if the supplied value is null. Explore whether this is reasonable in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Designing Effective UI Components in Jetpack Compose

Jaewoong Eum (Mastodon, Bluesky) wrote a lengthy post outlining tips for the API surface of your composables. Recommendations range from the proper use of Modifier parameters to crafting custom themes to using slot parameters.

Medium: Integrating MapKit in Compose Multiplatform — Part 2: Refining implementation

Attila Polacsek has been exploring how to use MapKit in a Compose Multiplatform project, by way of UIKitView. The previous post covered the basics of integration, while this post works on cleaning up the API and making the result more maintainable.

Medium: OutlinedUrlTextField in Jetpack Compose

Javier Arroyo shows us an OutlinedUrlTextField() implementation. While editing, it highlights URLs. In read-only mode, the URL can be clicked, triggering a callback so you can take appropriate action.

Medium: Safeguarding Critical Operations: Block Accidental Navigation in Jetpack Compose

Ioannis Anifantakis demonstrates how we can set up a “critical loading indicator” during sensitive periods (e.g., while processing a purchase). The objective is to prevent most forms of navigation, in case those might get triggered by accident.

Medium: Seamless shimmer integration with existing Compose code

Shimmer effects are a popular form of loading indicator when the graphical shape and size of the data is known, just not the specific values to render. While there are a bunch of shimmer libraries available to implement shimmers, Igor Escodro (Mastodon, Bluesky) shows that it is not very difficult to have a shimmerable() modifier of your own.

Medium: Focus Management In Android TV

Televisions are not touchscreens, except in the presence of small children and large pets. Navigation is handled via a D-pad, which requires focus management as the user highlights UI elements of interest. Sahar Asadian shows us several facets of TV Compose focus management, including how to highlight focused composables, set the focus traversal order, and more.

Other Interesting Links

• Medium: Compose LazyRow Space Management
• Medium: Creating a Modern Bottom Navigation Bar with a Curved Cut-Out for a Docked/Floating Action Button in Jetpack Compose
• Medium: Design FUT-Style Cards in Jetpack Compose: Clip or Cut or Mask a Composable with a Custom Shape
• Medium: Draw sleep timeline graph in Compose
• Medium: How to Create Custom Component in Jetpack Compose: Best Practices with Number Spinner
• Medium: ImagePickerAndroid - My Android Image Picker Library
• Medium: Implementing “Slide to Unlock” in Jetpack Compose
• Medium: Integrating WebView in Jetpack Compose: Managing Web Content in Modern Android
• Medium: Jetpack Compose Dark Mode: A Step-by-Step Guide for Beginners
• Medium: Jetpack Compose Layouts: Build adaptive UIs for all screen sizes
• Medium: MVI Architecture for Android with Jetpack Compose and Kotlin Flow
• Medium: Reading PDF in Compose Multiplatform
• Medium: Removing Default Transitions in Android Compose Navigation
• Mesh Gradients in Jetpack Compose
• Shine Text Effect in Jetpack Compose

Resource Roundup

100% pure code!

GitHub: suwasto / KMP-Capturable-Compose

Anang Suwasto is working on composable-to-bitmap capture for Compose Multiplatform, initially supporting Android and iOS. Wrap your compose to capture in Capturable() and tie it to a CaptureController, which you use to trigger the capture.

Notable Releases

Circuit is up to 0.26.0, adding support for shared elements, adds a RetainedStateHolder, and tweaks the behavior of rememberRetained() and RetainedStateRegistry. Technically, it tweaks the behaviour of those things, but I am suffering from a shortage of U’s. 😁

Coil released 3.1.0. This boosts the performance of AsyncImage, expands data: URI support, eliminates the use of Dispatchers.main.immediate in Compose code, and lots more.