jetc.dev Newsletter Issue #225

Published: 2024-07-30

We got a couple of more Compose betas, without much in the way of changes. There also is a new alpha for Compose Multiplatform, and we peek at all of those!

In addition, we explore layout animations and accessibility, peek at composable API design and focus management, and examine Multiplatform libraries for paging and Yandex Maps.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose is up to 1.7.0-beta06 with some very minor bug fixes. Similarly, Compose Material 3 is up to 1.3.0-beta05, though the bug fixes seem perhaps a bit larger, but still not huge. I am a bit surprised there have been as many betas, though to me that’s perfectly fine if it helps 1.7.0 become more stable!

We got the following updates to Compose-adjacent artifacts:

• androidx.activity:activity-compose:1.9.1
• androidx.fragment:fragment-compose:1.8.2
• androidx.lifecycle:lifecycle-runtime-compose:2.8.4
• androidx.lifecycle:lifecycle-runtime-compose-android:2.8.4
• androidx.lifecycle:lifecycle-runtime-compose-desktop:2.8.4
• androidx.lifecycle:lifecycle-viewmodel-compose:2.8.4
• androidx.lifecycle:lifecycle-viewmodel-compose-android:2.8.4
• androidx.lifecycle:lifecycle-viewmodel-compose-desktop:2.8.4
• androidx.navigation:navigation-compose:2.8.0-beta06
• androidx.navigation:navigation-fragment-compose:2.8.0-beta06
• androidx.paging:paging-compose:3.3.1
• androidx.paging:paging-compose-android:3.3.1

Also, JetBrains released 1.7.0-alpha02 of Compose Multiplatform. This adds some keyboard improvements, moves LocalLifecycleOwner to another artifact, adds support for finding resources by a string identifier, and more!

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Where Is My Composable Data Going?

While Compose certainly feels like magic, not all problems with composables stem from Compose itself. Before running amok trying to fix the composables, “check your priors” and confirm that your data sources are working properly. For example, choosing the wrong Flow operator (merge() instead of combine()) can cause unexpected effects, as we see in this week’s highlighted Stack Overflow question.

Where is My Modifier Recomposition Going?

A modifier that takes 1+ parameters might get invoked on recomposition in cases where a zero-parameter modifier will not. The reason is less about Compose and more about Kotlin and how lambda parameter capture works, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

droidcon SF 2024

The droidcon SF 2024 videos are up, and there were several presentations involving Compose, including:

• Adaptive Layouts in Compose
• Boosting Compose UI from Sluggish to Snappy
• Deriving derived state: derivedStateOf explained
• Jetpack Compose is Swift (UI)
• Jetpack Compose Navigation: Beyond The Basics
• Jetpack Compose: Drawing without pain and recomposition
• Kobweb: Creating websites in Kotlin leveraging Compose HTML
• Lost in the Weeds: Exploring Navigation Libraries for Compose

Composable Commentary

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

Video: Advanced layout animations in Compose (Shared elements)

Google’s Rebecca Franks (@riggaroo@androiddev.social) and Doris Liu explore the “lookahead” layout system and how it can be used as part of shared element transitions and related animations.

Video: Pager | Compose Tips

Google’s Rebecca Franks (@riggaroo@androiddev.social) also delivers another installment of the Compose Tips video series, this time looking at HorizonalPager() and VerticalPager(), including the use of rememberPagerState(), beyondViewportPageCount, page sizing, and more.

Accessibility Considerations with Stacked Cards Custom Layout

Eevis Panula (@eevis@mas.to) previously posted about using stacked cards, which present some accessibility challenges. Eevis looks at adding semantics to help address things like screen readers and focus issues, as well as other accessibility concerns such as improving keyboard support.

Jetpack Compose accessibility

Continuing on the theme of accessibility, the Appt Foundation (@accessiblemobileapps@mastodon.green) has published a guide for Compose accessibility, including a series of code samples and a review of accessibility on Android.

Medium: Creating Scalable Composables in Jetpack Compose

Oğuzhan Aslan explores composable API design with concrete examples, including limiting composables to a single purpose, naming standards, always having a Modifier parameter, state hoisting, and much more.

Medium: (Android TV) Advanced — Focus Requester Manipulation

Oleksii Tymoshchenko looks at an area of significant complexity in Compose: focus management. Many developers ignore this, relying on Compose’s default handling. However, for platforms that rely on key events more — such as Android TV or Compose for Desktop — focus management is important for usability. Oleksii looks at how we can guide focus as the user attempts to navigate a TV app using a D-pad.

Medium: Jetpack Compose AppBars: From Basics to Advanced Scroll Behaviors

Muhamed Riyas M takes a deep dive into TopAppBar(), BottomAppBar(), and related composables, including adding scroll behaviors to the TopAppBar() variants.

Medium: Morphing Magic: Visually Transforming TextFields in Compose

Medium user Jesseosile looks at VisualTransformation and OffsetMapping in the context adding dash separators between pairs of digits in an OutlinedTextField().

Other Interesting Links

• Apollo GraphQL Integration in Jetpack Compose
• Hassle-free Snackbar in Jetpack Compose
• How to make cutouts or transparent sections in Jetpack Compose
• Medium: Access Camera and Gallery in a Jetpack Compose Android App
• Medium: AdMob Integration in Compose Multiplatform
• Medium: Build Android and iOS apps with Compose Multiplatform (CMP)
• Medium: CameraX with Jetpack compose
• Medium: Command Your User Inputs with Jetpack Compose— Text Field Features Hidden in Plain Sight
• Medium: Compose Material 3 Tutorial : Card
• Medium: How to apply accessibility best practices in your Compose Component?
• Medium: How to build a markdown-like text editor with Jetpack Compose
• Medium: How to Create an Animated Gender Selector in Jetpack Compose
• Medium: How to Make Custom Snackbars in Android: Jetpack Compose Snackbars— A Simple Guide
• Medium: How to Reliably Detect BottomSheet State Changes in Jetpack Compose
• Medium: It’s Not Always Sunny In Jetpack Compose: Exploring the Limitations of an Out-of-the-Box Experimental Parallax Toolbar
• Medium: Jetpack Compose AutoComplete SelectBar
• Medium: Jetpack Compose Simplified: Mastering Kotlin Scopes with Effect Handlers and Side Effects
• Medium: Jetpack Compose Simplified: Understanding Stateful and Stateless Components
• Medium: Jetpack Compose vs SwiftUI
• Medium: Managing In-App Overlay States (Alerts, Dialogs, Bottom Sheets) in Android Composables
• Medium: New Smart Item Composition for Better Performance — ContextualFlowRow/Column
• Medium: Replacing XML layouts with JetPack Compose in android
• Medium: Side-effects in jetpack compose
• Medium: The Right Way to Listen Jetpack Compose State Changes
• Medium: Type-Safe Bottom Navigation in Jetpack Compose
• Medium: Type-safe navigation with Jetpack Compose Navigation in multi modular projects
• Setting up Kotlin Multiplatform (+Compose)
• Using kotlin-inject in a Kotlin/Compose Multiplatform project

Resource Roundup

100% pure code!

GitHub: Kotlin / Storytale

JetBrains is working on a Compose Multiplatform library for composables. It is in a very early state, but considering it is from JetBrains, it is worth tracking.

GitHub: Ahmad-Hamwi / lazy-pagination-compose

Ahmad Hamwi is writing a Compose Multiplatform paging solution based on LazyColumn(). It offers a rememberPaginationState() function that can power a PaginatedLazyColumn().

GitHub: SuLG-ik / yandex-mapkit-kmp

GitHub user SuLG-ik is building a Compose Multiplatform wrapper around Yandex MapKit, presently supporting base map features for Android and iOS targets.

GitHub: yozyyyqls / CircleMusicWaveform

GitHub user yozyyyqls has a waveform renderer that wraps the waveform around a circle, where the circle is designed to hold album art of the music generating the waveform.

Notable Releases

Maps for Android has a 6.1.1 release that fixes a minor dependency issue.

Horologist is up to 0.6.17, with a tweak to rememberResponsiveColumnState().

And CashApp’s Redwood is now out with 0.13.0 with support for Compose for Web/Wasm, among other changes.