jetc.dev Newsletter Issue #223

Published: 2024-07-16

A new Compose beta is out, as we slowly move towards a stable 1.7.0!

In addition, we look at clipped popups and adaptive layouts. We explore restartable functions and custom overscroll effects. And we peek at a bunch of Compose Multiplatform libraries, including subsampling image views and Palette ports.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose 1.7.0-beta05 is available, with some bug fixes. Note that Compose Material3 did not get a new version and remains on 1.3.0-beta04.

TV Compose is in a strange state, where androidx.tv:tv-foundation is at 1.0.0-alpha11 but androidx.tv:tv-material is at 1.0.0-rc01. 🤨

Also, Navigation for Compose got a new beta:

  • androidx.navigation:navigation-compose:2.8.0-beta05
  • androidx.navigation:navigation-fragment-compose:2.8.0-beta05

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Is My Popup() Being Clipped?

Popup() really does not like it if you draw outside its boundaries for much beyond a drop shadow. This causes problems if you try to add decorations to the popup, such as a callout-style caret, as we see in this week’s highlighted Stack Overflow question.

How Do We Conditionally Use a Default Parameter Value?

Some composables have overloads taking varying parameter lists. Sometimes, you want to either pass a specific value in one condition or go with whatever the default value is. In that case, your best solution is to look at the source to see what the default value is and pass that manually, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Video: Exploring Material3 Adaptive Layout with Google’s Alex Vanyo & Ian Clifton!

The Code with the Italians crew is back, this time with Google’s Ian Clifton and Alex Vanyo in tow! They focus on Material3 Adaptive Layouts, supporting UX patterns like list-detail and toggling between bottom nav bars and navigation rails. The objective is to make it easier for you to support large screens effectively.

Restartable functions from first principles

Zach Klippenstein returns, continuing his exploration of the innards of Compose. Here, Zach takes a deep dive into the concept of “restartable” functions: what the term means, which functions restart, how this ties into Snapshot-based state management, and how you could build your own similar functionality from scratch.

Medium: Material3 BottomSheet Navigation

Stefano Natali wanted to use bottom sheet navigation with Compose Material3 bottom sheets. However, the official Material Navigation for Compose is for Compose Material, not Compose Material3. So Stefano wrote a custom library to fill the gap, and this post explains how to use it.

Overscroll animations in Jetpack Compose

sinasamaki wanted to have a custom overscroll animation: a bounce effect on a hero element. However, the built-in OverscrollEffect only works for simple scrollable() lists, not lazy lists, so sinasamaki created a customOverscroll() modifier that offers greater flexibility.

Working With Time Picker in Jetpack Compose

Andrew Phiri gives us an in-depth tour of the TimePicker() composable, including all the forms: inline and dialog, plus clock face and text input

Medium: Jetpack Compose Theme with Composition Local: Spacing, Shaping, and Status Colors

Kerry Bisset explores extending a theme to handle things like padding/spacing/elevation values or status colors, using compositionLocalOf() and CompositionLocalProvider to make them available to nested composables.

Medium: Playing with Compose Screenshot testing and Github Action

Alexandre Bruneau walks us through using GitHub Actions to trigger the execution of tests powered by Compose Preview Screenshot Testing, by means of the validateDebugScreenshotTest Gradle task.

Medium: Effortless Navigation with Voyager — Compose Multiplatform Development

Ahmed Elkhami gives us a good look at using Voyager for nav in a Compose Multiplatform app, including bottom bar navigation, transitions, and nested navigation.

Resource Roundup

100% pure code!

GitHub: panpf / zoomimage

GitHub user panpf has a subsampling image viewer composable for Compose Multiplatform, supporting zoom, rotate, scrollbars, integration with popular image loading libraries, and more!

GitHub: jordond / kmpalette

Jordon de Hoog ported androidx.paeltte to Compose Multiplatform, with support for most of the platforms. So, you can now identify a dominant color or generate a color palette based on the examination of some image, across platforms.

GitHub: tclement0922 / compose-font-icons

T. Clément has some code for Android, JVM and Web/JS to allow you to use icons from a font.

GitHub: mahozad / comshot

Mahdi Hosseinzadeh has an early-stage implementation of capturing composables to bitmaps for Compose Multiplatform. Right now, it works on Android and Windows.

Notable Releases

Maps for Compose is up to 6.1.0, with a performance improvement for maps in lazy containers.