jetc.dev Newsletter Issue #204

Published: 2024-02-27

A ton of alphas and patches were released this week for Compose and affiliated technology, so we take a look!

We also explore the state of Compose, debate the role of test tags, and animate the strikethrough effect. Plus, we peek at a flexible implementation of the shimmer effect.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

We got a lot this week!

Compose Compiler is up to 1.5.10, with a couple of bug fixes.

The Compose BOM is up to 2024.02.01. This contains the 1.6.2 patches for the main libraries and 1.2.0 of Material3. This contains a handful of bug fixes.

We also got Compose 1.7.0-alpha03, which has many bug fixes, plus:

• Several performance improvements

• A couple of options on DelegatebleNode, such as currentLayoutCoordinates, to get a Modifier.Node’s current LayoutCoordinates more conveniently

• Several additions to FlowRow()/FlowColumn(), along with a new ContextualFlowRow()

• New APIs on Path, such as contains() and APIs to query the direction of the Path

• A new maxTextLength semantics property for length-limited text fields

• Newly promoted-to-stable composables, such as BottomDrawer() and BackdropScaffold()

Compose Material3 also has a 1.3.0-alpha01 release. ModalBottomSheet() and SearchBar() support predictive BACK navigation among other improvements. Compose Material3 also has a bunch of new adaptive libraries in a new androidx.compose.material3.adaptive group:

• androidx.compose.material3.adaptive:adaptive
• androidx.compose.material3.adaptive:adaptive-android
• androidx.compose.material3.adaptive:adaptive-desktop
• androidx.compose.material3.adaptive:adaptive-layout
• androidx.compose.material3.adaptive:adaptive-layout-android
• androidx.compose.material3.adaptive:adaptive-layout-desktop
• androidx.compose.material3.adaptive:adaptive-navigation
• androidx.compose.material3.adaptive:adaptive-navigation-android
• androidx.compose.material3.adaptive:adaptive-navigation-desktop

Wear Compose released 1.4.0-alpha03 with a documentation bug fix and a deprecation warning for the inspectable() Modifier.

Compose-adjacent library releases include:

• androidx.hilt:hilt-navigation-compose:1.2.0
• androidx.lifecycle:lifecycle-runtime-compose:2.8.0-alpha02
• androidx.lifecycle:lifecycle-viewmodel-compose:2.8.0-alpha02
• androidx.navigation:navigation-compose:2.8.0-alpha03

Finally, JetBrains released Compose Multiplatform 1.6.0-rc03, with support for Kotlin 2.0.0-Beta4 along with a variety of bug fixes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Address Overdraw in This Canvas()?

By default, drawWithCache()/onDrawBehind() will draw in same graphics layer as the rest of the composition. Normally, this is fine, but if you need to split them up, you can use the graphicsLayer() modifier. Learn more in this week’s highlighted Stack Overflow question.

Why Is My Font Borked?

Setting includeFontPadding to false has been a staple of getting maximum design fidelity, to the point where it is false by default with modern Compose versions. But… what if you still see font padding? In the end, Compose is limited by the underlying font, and if it has its own padding, you have problems. Learn how to identify this issue in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

State of Compose

The results of Alex Styl’s survey of the Compose ecosystem are in! In completely unsurprising news, we use a lot of different navigation libraries. Learn more about what we do for state management, testing, image loading, and more!

Medium: Refining Compose API for design systems

Medium user Yury writes about how to strike a balance between flexibility and verbosity with composable API designs, with an eye towards composables that implement a specific design system. How much should we use slot APIs, given their expressive power (which, in a design system, can be both a benefit and a problem)?

Medium: Stop Using Test Tags in the Jetpack Compose Production Code

Tomáš Repčík argues that we should focus on real semantics, rather than test tags, so we add value to users as well as enable our testing. Tomáš also argues that test tags should not be in production code, as they are focused on testing. My counter-arguments: we should be testing our production apps too (e.g., via Appium), and be careful about writing tests that are dependent upon locale. That said, I’ll agree that using semantics first and test tags second is a reasonable approach.

Medium: Container transform animation with Jetpack Compose

Ruslan Myhal explores implementing container transform animations, such as having a shared element expand from a grid cell to be the hero element of a detail screen. While this is not yet a part of Compose UI as a first-class concept, it is in the works, and in the meantime we can implement our own workaround powered by AnimatedContent().

Medium: Animated Strikethrough Text in Jetpack Compose

Medium user Kappdev wanted to apply and remove a strikethrough effect from text one character at a time in an animated flow. The solution is driven by an Animatable that controls how many characters of the text should have the strikethrough applied.

Medium: How can I implement a HorizontalPager with endless scrolling using Jetpack Compose?

Abhishek Dharmik demonstrates the implementation of a popular UI pattern: an endless carousel, where continuous scrolling in one direction eventually causes the content to loop back around to the beginning. As with most of these implementations, the reality is that the carousel is not truly endless, but has Int.MAX_VALUE pages (in a HorizontalPager() in this case), and we trust that users will not actually try scrolling quite that far.

Video: Mastering Jetpack Compose Previews - Test your UI before it tests you!

Priya Sindkar examines the power of the @Preview annotation, along with related annotations like @PreviewFontScale and @PreviewScreenSizes. Priya also explores various @Preview attributes, from the basics like name to esoteric options such as wallpaper.

Other Interesting Links

• Android Presentation Patterns: MVVM
• Creating Custom Shapes with Jetpack Compose: Adding Shadows
• Creating Custom VectorAsset Icons in Jetpack Compose
• Medium: Animation In Compose Series (Part 1) — Animated Visiblity and Animated Content
• Medium: Basics in Jetpack Compose Layouts: A Guide to Vertical and Horizontal Centering
• Medium: Compose Basics: Stability Configuration File for Multi Module
• Medium: Jetpack Compose Best& Bad Practices with Common Usages Part I
• Medium: Keyboard GIFs and Stickers in Jetpack Compose
• Medium: Overlapping Lists — Custom Composable Vs RecyclerView
• Medium: Recommended guidelines for @Composable in Jetpack Compose
• Medium: Toolbar replacement in Compose
• Medium: Type Stability in Compose
• Medium: Wobbly Coin Animation in Jetpack Compose
• PDF: Jetpack Compose for Android Automotive
• Video: 🎨 KOTLIN 📦 COMPOSE ⚓️ FLEET: Nightly Tools, Multiplatform, Adventures Galore!

Resource Roundup

100% pure code!

GitHub: Hussein-Al-Zuhile / Shimmery

Hussein Al-Zuhile offers us a ShimmerContainer() and a shimmerInContainer() modifier for adding shimmer effects to a collection of composables, such as to serve as a loading indicator. There is also a simpler shimmer() modifier to apply to a single composable.

GitHub: abi9567 / simpleCountryPicker

GitHub user abi9567 brings us a library offering both dialog and bottom sheet versions of a country code picker, designed for phone dialing codes.

Notable Releases

Voyager is up to a 1.1.0-alpha03 release, adding support for Compose Web (WASM).

Charts now has a 1.2.0 release, adding a multiline chart and improved animations, among other changes.

Capturable is out with a v2.1.0 release, containing a couple of bug fixes.