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
StartEllipsisandMiddleEllipsisversions ofTextOverflow
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-strategyandroidx.compose.material3.adaptive:adaptive-render-strategy-androidandroidx.compose.material3.adaptive:adaptive-render-strategy-jvmstubs
In Compose-adjacent libraries, we have:
androidx.lifecycle:lifecycle-runtime-compose:2.8.6androidx.lifecycle:lifecycle-runtime-compose:2.9.0-alpha03androidx.lifecycle:lifecycle-runtime-compose-android:2.8.6androidx.lifecycle:lifecycle-runtime-compose-android:2.9.0-alpha03androidx.lifecycle:lifecycle-runtime-compose-desktop:2.8.6androidx.lifecycle:lifecycle-runtime-compose-jvmstubs:2.9.0-alpha03androidx.lifecycle:lifecycle-runtime-compose-linuxx64stubs:2.9.0-alpha03androidx.lifecycle:lifecycle-viewmodel-compose:2.8.6androidx.lifecycle:lifecycle-viewmodel-compose:2.9.0-alpha03androidx.lifecycle:lifecycle-viewmodel-compose-android:2.8.6androidx.lifecycle:lifecycle-viewmodel-compose-android:2.9.0-alpha03androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.8.6androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.9.0-alpha03androidx.navigation:navigation-compose:2.8.1androidx.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:
LaunchedEffectvs.ViewModelwith 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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-10: A Compose Multiplatform alpha! Hot reload! Presentation! Sprites! Calendars!
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?