jetc.dev Newsletter Issue #234

Published: 2024-10-01

This week, we look at lazy grids, focus management, autocomplete, and expandable ContextualFlowRow() implementations. Plus, we peek at a Compose Multiplatform camera library and learn about Compose Multiplatform accessibility.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

What Is `it`?

Making sense of Compose also sometimes requires you to make sense of Kotlin. This is particularly true when we use generic types with composables (e.g., fun <T> MyComposable(...)), then pair those with producer function types as parameters to that composable (e.g., color: (T) -> Unit). It is easy to lose track, see an { it.color } lambda being passed into a composable, and wondering what it is. See a concrete example in this week’s highlighted Stack Overflow question.

When Should We Use `@NonRestartableComposable`?

There are a lot of micro optimizations available to us in Compose. Adding @NonRestartableComposable to a composable can save a bit of generated code. However, where should we use it? In particular, does it make sense for root composables (e.g., screens)? Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Video: Lazy grids

Google’s Simona Milanovic demonstrates how grids can be a better choice for adaptive layouts than other types of containers, plus how to implement them in Compose.

Nailing Focus in Jetpack Compose: A Technology Expert‘s Guide

Google’s Shane Barker walks us through Compose’s focus APIs, such as FocusRequester and the focusOrder() modifier, using focusTarget() to help guide Compose as to which of your composable widgets should participate in focus, onFocusChanged(), and more!

Video: Unpacking Compose Multiplatform Accessibility

There has been a fair amount of material published on accessibility in Compose, but mostly it has been centered around classic Compose for Android. In this GDG Seattle presentation, Colin Marsch (@colinmarsch@androiddev.social) explores what accessibility options presently work for Compose Multiplatform, particularly how Compose accessibility structures get mapped to iOS’s accessibility APIs. Colin’s slides are available here.

Medium: Building a Custom AutoComplete Component with Jetpack Compose Using BasicTextField & LazyColumn

Ramadan Sayed walks us through building an autocomplete-style field using Compose Foundation widgets like BasicTextField() and LazyColumn().

Medium: Expandable FlowRow with Indicator

Stefano Natali returns, this time adding expand/collapse mechanics to a ContextualFlowRow(), so it can show more or fewer items based upon user interaction.

Medium: Optimized Image Loading for Compose and Kotlin Multiplatform

Jaewoong Eum (@skydoves@androiddev.social) is back, this time looking at Landscapist, a long-time image loading library for Compose, now with Compose Multiplatform support.

Custom Sliders in Jetpack Compose

sinasamaki (@sinasamaki@androiddev.social) explores the Compose Material3 Slider() composable, including its options for custom thumbs and tracks, animated effects on value changes, and more.

How to Ripple Outside of Compose Material

I wanted to use the Compose Material implementation of the ripple for touch feedback… in a non-Material design system. In this post, I show how to use material-ripple in other design systems, mostly by cloning and tweaking some Compose Material3 glue code.

Resource Roundup

100% pure code!

GitHub: Kashif-E / CameraK

Kashif Mehmood is working on adding camera support to Compose Multiplatform, starting with Android and iOS. The current implementation supports preview and image capture.

GitHub: eygraber / compose-permissionx

Eliezer Graber has a library that simplifies requesting runtime permissions, designed to address a few issues with Accompanist’s permission library.

GitHub: eygraber / vice

Eliezer Graber also has an MVI framework for Compose Multiplatform, including a Compose-centric API for providing source data for states.

Composables Core: Scroll Area

Alex Styl has added scrolling to Composables Core, including a ScrollArea() and VerticalScrollbar()/HorizontalScrollbar() composables. These are able to be styled to match your custom design system, from simple rendering to when and how the scrollbar thumb gets hidden.