jetc.dev Newsletter Issue #221

Published: 2024-07-02

New betas for Compose and Compose Material3 dropped, and there is not much in them! 🎉

We also look at many options for user selection input, see how to adapt to larger screen sizes, implement screenshot testing, and write conference presentation slides in Compose itself. And, we peek at a KMP Lottie rendering engine, a calendar, and another option for screenshot test generation!

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose 1.7.0-beta04 and Compose Material3 1.3.0-beta04 were released, with a smattering of bug fixes. With luck, stable releases will be ready in a couple of months!

In Compose-adjacent libraries, we got these updates:

• androidx.activity:activity-compose:1.10.0-alpha01
• androidx.fragment:fragment-compose:1.8.1
• androidx.navigation:navigation-compose:2.8.0-beta04
• androidx.navigation:navigation-fragment-compose:2.8.0-beta04

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Does My Composable Not React to Flow Changes?

Having multiple sources of truth is an easy way to get into trouble with Compose UI development. Having a local copy of data that you get from a viewmodel’s Flow is one way to subtly introduce a second source of truth, as we see in this week’s highlighted Stack Overflow question.

How Far Can My Lazy Container Scroll?

This comes up from time to time with all recycling-style containers: developers want to know the total size of the content (e.g., the total scrollable height of a LazyColumn()). Often, this means that using a recycling-style container was perhaps not the best choice, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Choices of Choices: Exploring User Selection Components in Jetpack Compose with Material 3

There are a seemingly infinite number of Material 3 components for users to make a selection of something. Kerry Bisset walks us through eight different composables, from SegmentedButton() to FilterChip(), outlining the configuration options and use cases, plus offering up alternatives.

Medium: Get your android app ready for larger screen sizes using window-size classes on android

Mubarak Native explores the offerings from the androidx.compose.material3:material3-adaptive-navigation-suite library, including the use of NavigationSuiteScaffold() for employing different navigation patterns based on screen size.

Medium: List detail layout and panes in Compose

Oğuzhan Aslan explores the same topic area, focusing on the alpha version of ListDetailPaneScaffold() to manage list and detail panes, showing one or both depending on available screen space.

Screenshot testing with jetpack compose

Ashutosh Bhandari walks us through the newly-released Compose Preview Screenshot Testing tool, for developing screenshot tests based on @Preview annotations. This includes setting up the screenshotTest source set, writing @Preview functions for testing, generating the reference screenshots, and seeing the results when code changes introduce regressions.

Medium: Exploring the Viability of Cross-Platform UI Development with Compose Multiplatform

Kwabena Bio Berko published an extensive analysis of Compose Multiplatform and whether it was suitable for production use. TL;DR: yes, it is, but string translations may be a challenge. Read the post for details!

Our Journey Implementing Session Replay in Android for Jetpack Compose

Miguel Juárez López writes about Layout Inspector, Radiography, and other tools retrieve information about a rendered composable for diagnostic purposes. The story has its twists and turns as Compose UI evolved from its earliest versions, with the end result being the use of the Semantics APIs.

Medium: Introducing Compose-ur-Pres

Salomon BRYS gives us a tour of Compose-ur-Pres, a Compose Multiplatform way to develop slide-based presentations using composables, with a framework handling slide transitions, speaker panes, and more.

Medium: Custom TopAppBar using Android Jetpack Compose

Shiva Thapa points out some limitations of TopAppBar(), then walks us through Oya Canlı’s replacement implementation that overcomes some of those limitations.

Other Interesting Links

• Exploring New Worlds of UI sharing possibilities in PeopleInSpace using Compose Multiplatform
• Headless Composable Capture
• How to create LazyColumn with drag and drop elements in Jetpack Compose. Part 1.
• Medium: Accessibility Testing in Android Jetpack Compose
• Medium: Creating Custom Paging for Infinite Scrolling in Jetpack Compose
• Medium: Custom Material-3 Expandable Floating Action Button in Jetpack Compose
• Medium: Golden Testing Your Compose Library with Paparazzi
• Medium: Handling Multiple Links in Text Using AnnotatedString in Jetpack Compose
• Medium: How to Create a Countdown Snackbar in Android with Jetpack Compose
• Medium: How to Use Room Database with Hilt in Jetpack Compose?
• Medium: List-Detail Layout using Jetpack Compose
• Medium: Modern Crossplatform Desktop Applications with Kotlin Multiplatform and Compose UI
• Medium: PivotOffset without TvLazyList
• Medium: Reducing GPU Overdraw in Android Jetpack Compose
• Medium: Type-Safety in Jetpack Compose Navigation
• Video: Animations with Jetpack Compose

Resource Roundup

100% pure code!

GitHub: alexzhirkevich / compottie

Alexander Zhirkevich is working on a KMP Lottie animation engine! Right now, it is in its first beta release.

GitHub: uuranus / animated-dialog-compose

GitHub user uuranus has a library with a variety of dialogs with animated entrances/exits, along with support for custom shapes and background colors.

GitHub: uuranus / schedule-calendar-compose

GitHub user uuranus also published a ScheduleCalendar() composable for showing an event calendar, with customizable colors and labeling.

GitHub: sergio-sastre / ComposablePreviewScanner

Sergio Sastre Flórez brings us a library to help generate screenshot tests from @Preview composables, for use with JVM-based or Android instrumentation-based testing libraries.

Other Interesting Links

• Gist: akexorcist / BeakShape.kt (triangle shape with one rounded corner)
• Gist: emenjivar / AnimatedTypingIndicator.kt (dots indicator for loading or typing)
• GitHub: ComposeGears / Valkyrie (IDEA/Studio plugin to generate ImageVector from SVG)
• GitHub: GuilhE / KMP-ComposeUIViewController (“KSP library for generating ComposeUIViewController and UIViewControllerRepresentable implementations when using Compose Multiplatform for iOS”)
• GitHub: Khokhlinvladimir / android-pin-authentication (PIN management)
• GitHub: mikepenz / AboutLibraries (auto-generated about screens)