jetc.dev Newsletter Issue #233

Published: 2024-09-24

We got a Compose security fix and three BOMs, so let’s take a look!

Beyond that, we look at clipToBounds() and offset() modifiers, along with localization and server-driven UI. And we look at a couple of new image loading libraries.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

We now have three BOMs: the regular production BOM, plus androidx.compose:compose-bom-alpha and androidx.compose:compose-bom-beta. Those will contain pointers to some alpha and beta versions. The BOMs themselves right now have the same version number (2024.09.02); we will see if that changes. Also, the BOM to library mapping page seems to only cover the production BOM.

Speaking of the production BOM, 2024.09.02 points to a new 1.7.2 patch release for the core Compose artifacts. These patches fix a variety of bugs.

There are also 1.8.0-alpha02 releases for the core Compose artifacts. Of note:

• We will eventually get pausable compositions, once compiler support is ready — you will be able to create a subcomposition that can be applied to the composition asynchronously

• We now have StartEllipsis and MiddleEllipsis versions of TextOverflow

Compose Material3 has a 1.4.0-alpha01 release, but it is undocumented. 😞

We got three new Compose Material3 artifacts:

• androidx.compose.material3.adaptive:adaptive-render-strategy
• androidx.compose.material3.adaptive:adaptive-render-strategy-android
• androidx.compose.material3.adaptive:adaptive-render-strategy-jvmstubs

In Compose-adjacent libraries, we have:

• androidx.lifecycle:lifecycle-runtime-compose:2.8.6
• androidx.lifecycle:lifecycle-runtime-compose:2.9.0-alpha03
• androidx.lifecycle:lifecycle-runtime-compose-android:2.8.6
• androidx.lifecycle:lifecycle-runtime-compose-android:2.9.0-alpha03
• androidx.lifecycle:lifecycle-runtime-compose-desktop:2.8.6
• androidx.lifecycle:lifecycle-runtime-compose-jvmstubs:2.9.0-alpha03
• androidx.lifecycle:lifecycle-runtime-compose-linuxx64stubs:2.9.0-alpha03
• androidx.lifecycle:lifecycle-viewmodel-compose:2.8.6
• androidx.lifecycle:lifecycle-viewmodel-compose:2.9.0-alpha03
• androidx.lifecycle:lifecycle-viewmodel-compose-android:2.8.6
• androidx.lifecycle:lifecycle-viewmodel-compose-android:2.9.0-alpha03
• androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.8.6
• androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.9.0-alpha03
• androidx.navigation:navigation-compose:2.8.1
• androidx.navigation:navigation-fragment-compose:2.8.1

The Navigation for Compose patches are important, as they address a vulnerability that was discussed previously in this newsletter.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Have Both a Height and a Weight?

Inside a Column(), a weight() can override a supplied height(), when there is insufficient space for the column content’s declared heights. See how BoxWithConstraints() as a wrapper for the Column() can help us use the height() and only leverage weight() when desired, in this week’s highlighted Stack Overflow question?

How Can I Have clipToBounds() Only Apply to Some Children?

The clipToBounds() modifier directs all children to only render within the bounds of their parents. However, it is not something that a child can opt out of, so it is difficult to apply in some edge cases where most but not all children need clipToBounds() behavior. In this specific case, the challenge came from shared element transitions, and an OverlayClip was the solution, as you will see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: How to properly handle Android localization

Joost Klitsie explores resolving string resources, specifically looking at a Translatable wrapper that helps to hide things like resource IDs and Context-based lookups to minimize the exposure of platform dependencies.

Medium: ImageVector vs painterResources — Under the hood

Sahil Thakar peeks at the implementation of ImageVector, painterResource(), and the respective flavors of Image(), to see how efficient they are with respect to recomposition.

Medium: CMP for Mobile Native Developers: Dependency Injection

Santiago Mattiauda continues a series of posts exploring the edges of Compose Multiplatform to help guide those used to native mobile development. This time, Santiago looks at dependency inversion frameworks, notably Koin and Kodein, explaining their value in CMP projects and how the two differ.

Medium: Understanding Offset Positioning for Animations in Jetpack Compose: A Detailed Guide

Ramadan Sayed reviews the offset() modifier for adjusting the position of a composable, including how you can use it in conjunction with animateDpAsState() for animating the position of things like drawers, FABs, and more.

Design Server-Driven UI with Jetpack Compose and Firebase

Jaewoong Eum (@skydoves@androiddev.social) takes a deep dive into server-driven UI, where UI rules for things like sizes, colors, and fonts are driven by server responses, in addition to the server providing the content to be rendered.

Bottom Sheets that… just work

Alex Styl walks us through one of Alex’s open source Composable Core components, a Compose Multiplatform BottomSheet() that is independent of Compose Material/Material3.

Bridging Worlds: Mixing Compose and Views in Your Android App

The Wawandco crew looks at interoperability between classic Views and composables: how you can embed a composable in a View and how you can embed a View in a composable.

Beyond the Basics: Mastering Buttons in Jetpack Compose

Shane Barker looks at all of the interesting features of the humble Button() composable from Compose Material, including leveraging ButtonStyle for implementing your design system, accessibility options, and more.

Medium: How to Create a Shimmering Text Animation in Jetpack Compose

Medium user Kappdev shows us how to create a ShimmeringText() composable that implements a start-to-end shimmer animation effect for our supplied text.

Other Interesting Links

• A Comprehensive Guide to Implementing a Design System in Jetpack Compose
• Efficiently Handling API Calls in Jetpack Compose: Avoiding LaunchedEffect on Configuration Changes
• Element Lists: The Basics
• Medium: A full guide to use Paging-3 Library along with Jetpack compose’s LazyRow, LazyColumn and LazyGrid
• Medium: All about Themes in Jetpack Compose
• Medium: ExoPlayer in Jetpack Compose: Ditch the XML, Play with Compose!
• Medium: Getting Started with Compose UI Testing using Dagger Hilt
• Medium: Handling State Efficiently with Jetpack Compose
• Medium: How to Create a Signature Draw View in Jetpack Compose and Save It as a Drawable
• Medium: How to Integrate Bottom Navigation Bar for compact screens and a Navigation Rail for larger screens in a Compose Multiplatform
• Medium: Loading Initial Data: LaunchedEffect vs. ViewModel with Flow in Jetpack Compose
• Medium: Navigation Compose Type-Safe APIs
• Medium: Optimizing Recomposition in Jetpack Compose: How to Prevent Unnecessary UI Updates
• Medium: Pass data in the Modifier tree and beyond
• Medium: SwiftUI to Jetpack Compose (and vice vera): Reference Guide
• Medium: Type Safe Navigation for Compose: The Game-Changing Feature You’re Not Using (Yet)
• Slides: Foldables on Android - What’s new?
• Slides: Unpacking Compose Multiplatform Accessibility
• Spacing Concepts in Jetpack Compose - An Overview

Resource Roundup

100% pure code!

GitHub: AndroidPoet / CountryPicker

Ranbir Singh brings us a CountryPicker() composable for Compose Multiplatform, complete with customizable layouts for the countries in the drop-down, to better match your requested designs.

GitHub: Tanexc / ImageTool

Arthur Yusupov has an image-loading and caching library for Compose Multiplatform, competing with the likes of Coil.

GitHub: quadLogixs / loadify

The QUAD LOGIXS team also has an image loader competing with Coil. Theirs includes support for Lottie animations.

Notable Releases

Horologist has a 0.6.20 release, mostly to fix a test. It also has a 0.7.2-alpha release, with a couple of bug fixes.

Circuit is up to 0.24.0 with a lot of dependency updates, some tweaks to testing, added support for kotlin-inject, and more.