jetc.dev Newsletter Issue #145

Published: 2022-12-13

The December 2022 BOM contains some patches, and we also got a new alpha besides!

Beyond that, this week we look at ribbons, new project templates, and cross-platform Compose UI. We look at a grid container and speech bubbles. Plus, we spend time talking about editing live electric eels and flamingos. Or something like that.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The Compose BOM is up to androidx.compose:compose-bom:2022.12.00, to pull in the latest patch releases. This includes some security fixes, so it’s a good idea to update.

We also have 1.4.0-alpha03, which brings us a bunch of bug fixes, plus:

Better Perfetto support, including PerfettoTraceRule
EmojiCompat support
HorizontalPager() and VerticalPager() composables, presumably adapted from Accompanist
New canScrollForward() and canScrollBackward() functions on ScrollableState

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Render a Diagonal Ribbon?

A diagonal ribbon in the corner of some UI element is a common form of badge or banner, adding some note (“New!”, “Updated!”, “Free!” etc.) without disturbing the core of the UI element. See how to create a modifier to add such a ribbon in this week’s highlighted Stack Overflow question!

The general rule is to pass identifiers that can be resolved into model objects via some sort of repository layer. Some developers push back on this, arguing that they do not have identifiers to use. That indicates a data structure problem, not a Navigation for Compose problem, 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: Introducing the Architecture Templates

Google’s Jose Alcérreca announced the inaugural release of Google’s Android Architecture Starter Templates. Compared to Android Studio templates, these will be updated more frequently and will be more extensive, albeit somewhat more difficult to use.

Video: Live Edit Jetpack Compose

The Code with the Italians team had Google’s Alan Leung and Leland Richardson over to explore Live Edit capability in the Electric Eel and Flamingo editions of Android Studio. Electric Eel lets you update literals without redeploying your debug build of the app, while Flamingo extends that to more aspects of composables.

Medium: UI tests with Jetpack Compose and Appium x UIAutomator

Julien Salvi returns, this time looking at using Appium and UIAutomator to verify that a composable edition of a screen works the same as the previous View-based implementation. This involves ensuring that the composables expose the same identifiers as the views used, so the test can be adapted to test composables with minimal changes.

Compose TwoPaneLayout updates

Kristen Halper reviews some recent changes to Microsoft’s TwoPaneLayout() composable, which helps developers deal with larger screen sizes, including foldables. In particular, TwoPaneLayout() now offers independent back stacks per pane, leveraging Jetpack Navigation for Compose.

Medium: AutoSizing TextField in Jetpack compose

Radhika S is back, this time looking at applying auto-sizing of fonts in a text field to ensure that three lines of text are always visible, at the cost of ever-shrinking font sizes.

Using Compose Across Platforms

Júlia Jakubcová examines the state of cross-platform Compose UI: Android, iOS, desktop, and Web. Júlia provides brief overviews of setting up projects to support those platforms, how stable Compose UI is for the platforms, and more.

Resource Roundup

100% pure code!

GitHub: MathRoda / Snackie

GitHub user MathRoda brings us a series of snackbar composables that are not as tightly tied to structures like Scaffold() and offer solid customizability.

GitHub: touchlane / gridpad-android

The Touchlane team created a GridPad() composable, implementing a non-lazy grid layout. You provide the row and column count, plus the content, and GridPad() takes over.

GitHub: jayasuryat / mendable

Jaya Surya Thotapalli created a tool to convert Compose compiler metrics into HTML reports, focusing on those that need your attention, using color-coding to help point out the reported problems. Mendable also works will multi-module projects, combining the results from all the modules where your composables reside.

GitHub: SmartToolFactory / Compose-Speech-Bubble

The Smart Tool Factory team is back, this time with a drawBubble() and drawBubbleWithShape() modifiers to convert a Column(), Row(), or Box() into a speech bubble.