jetc.dev Newsletter Issue #158

Published: 2023-03-28

This week, we got a stable 1.4.0 release of Compose! 🎉 But, don’t worry, we also got a new alpha for Compose, along with new alphas for Compose for TV and Wear Compose.

Beyond that, we look at lazy layouts and text hyphenation. We explore how to improve performance and how to outline text. We see some code for synchronizing lists and tabs, plus reading sensors as State. And we drown in a flood of date and time pickers.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The big thing is that Compose itself is now out in a 1.4.0 stable release. The BOM is up to androidx.compose:compose-bom:2023.03.00 to include the 1.4.0 releases.

Compose Compiler is up to 1.4.4, with a few bug fixes.

Compose also has a 1.5.0-alpha01 release, so the version march continues. Of note, AnimatedContent APIs are now stable.

Compose for TV is up to 1.0.0-alpha05, with new side navigation drawer, icon, and surface composables. Note that CarouselItem is now called CarouselSlide.

Finally, Wear Compose is up to 1.2.0-alpha07. The expandable item components moved out of material into foundation, since they do not depend on MaterialTheme.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Create a Progress Button?

A common UI pattern is to have a button that automatically displays a CircularProgressIndicator() or something similar. However, if you are not careful, that indicator might change the size of the button itself, which you may not want. See how to keep the indicator size constrained in this week’s highlighted Stack Overflow question.

Why Does My BasicTextField() Cursor Jump?

Setting the value of a BasicTextField() using a String instead of a TextFieldValue means you are losing control over how the cursor gets positioned when you change that value. This can lead to unexpected effects, such as the cursor jumping back to the beginning of the text when you wanted it to stay at the end. Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

What’s new in the Jetpack Compose March ’23 release

Google’s Jolanda Verhoef gives us a tour of all the new stuff that showed up in Compose UI 1.4.0 and the March 2023 Compose BOM.

Compose Layouts and Modifiers: MAD Skills Wrap-Up

Google’s Simona Stojanovic provides a final summary of the MAD Skills sessions on Compose UI, focusing on custom layouts and the role of modifiers.

Video: Fun design with Lazy layouts: Community tip

Manuel Perera explores how the Bumble app implemented a scrolling grid of interlocked hexagons, using LazyColumn() and a verticalArrangement with negative spacing.

Video: Jetpack Compose Text Hyphenation and more

The Code with the Italians team hosted a livestream with Google’s Alejandra Stamato and Halil Ozercan, exploring hyphenation APIs (including how Android 13 improved them), font padding, the new marquee text effect, Halil’s compose-richtext library, and more!

Medium: Improving Performance and Reducing Recomposition in Jetpack Compose: A Case Study

Here, Mahmoud Afarideh walks through a few implementations of a progress text composable (showing percent-completion as a bar behind some text). Along the way, Mahmoud examines where earlier implementations had performance issues, due to excessive recompositions, and settles on a State-based solution in the end.

Medium: How to Apply Stroke Effects to Text in Jetpack Compose

Radhika S looks at the DrawStyle API to see how we can wrap text in outlines and control the way those outlines get rendered.

Marcin Hanas adds to the pile of complaints regarding Navigation for Compose’s approach to stringified nav arguments. However, Marcin then explores the implementation of Navigation for Compose and points out a way of bypassing that approach and working with Bundle directly, based on the underlying Jetpack Navigation implementation.

How to build a time picker with Jetpack Compose

Victor Brandalise explores creating a circular TimerPicker() composable, based on Layout(), drawBehind(), and some math to determine where to place hour and minute indicators.

Resource Roundup

100% pure code!

GitHub: Ahmad-Hamwi / TabSync

Ahmad Hamwi created a library that syncs tabs with a sectioned list, supporting both RecyclerView/TabLayout for classic Views and Compose equivalents (e.g., LazyColumn() and ScrollableTabRow()). See this Medium post for more!

GitHub: mutualmobile / ComposeSensors

The Mutual Mobile team brings us a work-in-progress library for wrapping the Android Sensor API in a State-based API, so we have functions like rememberGyroscopeState() to easily consume sensors directly from composables.