jetc.dev Newsletter Issue #194

Published: 2023-12-19

We got another round of updates to Compose, which are probably the last of the year.

Beyond that, we wonder why we’re missing clicks in Glance and explore composable performance. We continue exploring accessibility and less-common modifiers. And we convert all those <vector> drawables into ImageVector() composables via a new online tool.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler 1.5.6 was released, with support for Kotlin 1.9.21 and a few bug fixes.

Compose 1.6.0-beta03 is out, mostly with bug fixes. My guess is that we will see the first RC for 1.6.0 in early 2024. Note, though, that scaleIntoFitContainer and scaleOutToFitContainer were removed from AnimatedContentTransitionScope, though it feels like they will be added back in some future release.

Compose Material3 is up to 1.2.0-beta01. There were API changes in SwipeToDismiss() and some new TabRow() overloads now avoid subcompositions.

Wear Compose now has a 1.3.0-beta02 release, with just a bug fix in swipe-to-dismiss logic.

And, in Compose-adjacent libraries, we have:

androidx.activity:activity-compose:1.8.2
androidx.navigation:navigation-compose:2.7.6

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Glance’s API is inspired by the corresponding foundation composables, but it has some quirks. One means that your clickable() modifier might not work the way that you expect, as we see in this week’s highlighted Stack Overflow question.

How Can I Have An Image Inline with Text?

In the classic View system, you might use an ImageSpan to have an image appear in the middle of some text. In Compose UI, you can pass a Map of InlineTextContent objects to BasicText() in the inlineContent parameter to achieve a similar aim, as we see in this week’s highlighted Kotlinlang #compose Slack thread (and the InlineTextContent documentation.

Composable Commentary

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

Video: Enhancing Jetpack Compose app performance

Google’s Tomáš Mlynarič explores the use of Macrobenchmarks and tracing for measuring composable performance, in addition to describing a few approaches towards addressing any performance issues that you encounter.

Medium: What can Advanced / Lesser Known Modifiers do for your UI? — A Comprehensive Exploration in Jetpack Compose

Nirbhay Pherwani tours a wide range of modifiers — from drawWithCache() and onSizeChanged() to zIndex() and onKeyEvent() — explaining and demonstrating the roles of each.

Medium: Understanding performance of states and using inlining & lambdas in Jetpack Compose

Furkan Yurdakul examines the tactic of using a lambda expression, rather than a simple value, to pass state updates into a composable, to minimize unnecessary recomposition. Furkan explains some of the benefits and limitations of that technique.

More Accessible Graphs with Jetpack Compose Part 4: On-Screen Control Buttons

Eevis Panula continues an exploration of improving accessibility in the context of graphs and charts. This time, Eevis explore improving the accessibility of buttons in the graph UI, such as controlling the focus order.

Medium: Free hand draw polygon in Google Maps Compose. Part 1

Rasul Aghakishiyev wrote a two-post series on drawing on a map. The first post covers capturing a freehand drawing on a Canvas(). The second post converts the freehand points into geographic coordinates and selects them in a map.

Medium: Expandable Card with Animation in Jetpack Compose

Anand Gaur demonstrates a composable implementation of a common UI pattern: a card with an expand/collapse button.

Medium: Creating a Seven-Segment View in Jetpack Compose

Medium user Kappdev takes a look at a retro UI pattern: the seven-segment LED. Kappdev implements a SevenSegmentView() composable to render each digit of a number as a seven-segment element.

Resource Roundup

100% pure code!

Android Vector Drawable to Compose Image Vector converter

Alex Styl has another Web-based tool for us, this time converting a <vector> drawable to an ImageVector() composable. This works a bit like his Material Symbols collection, but for arbitrary vector drawables.

GitHub: zhanghai / ComposePreference

Hai Zhang released a collection of composables that mimic a Material3 set of preference UI elements and associated data storage logic. Preference UI elements include checkboxes, switches, sliders, radio buttons, text fields, and more.

GitHub: ltttttttttttt / ComposeViews

GitHub user ltttttttttttt has a Compose Multiplatform library with a collection of UI elements, from pager indicators to floating action menus to pull-to-refresh implementations.

GitHub: TEAM-PREAT / peekaboo

GitHub user TEAM-PREAT offers us a Compose Multiplatform library wrapper around platform-native image picker logic for iOS and Android. It supports single-image and multi-image selection, along with capturing images from the camera.

Notable Releases

FlexibleBottomSheet is up to 0.1.1, with support for Compose Multiplatform.

KoalaPlot is up to 0.5.1, but the big changes were in 0.5.0, with an update to the 1.6.0-alpha01 edition of Compose, a lot of refactors, and more.

Featured here? Please add this badge to your article or repo!

Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.

Recent Issues:

All Issues

Spread the Word!

Suggestions?

If you have ideas for items for future newsletter editions, reach out via email or contact Mark Murphy on kotlinlang Slack!