jetc.dev Newsletter Issue #179

Published: 2023-08-29

A new wave of alphas are out for Compose and Wear Compose, plus a new patch release for Compose Compiler!

Beyond that, we look at the state of Accompanist and how to render a composable to a bitmap. We write more concise tests and identify a source of recomposition woe. And we examine Calf, a library to add more cross-platform composables to Compose Multiplatform.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler is up to 1.5.2, mostly with bug fixes.

The rest of Compose is up to 1.6.0-alpha04. Beyond bug fixes, this release contains:

• A new ReusableComposition construct for subcompositions

• A new overload of BasicTextField2() that takes a value and mutator callback, to better match BasicTextField()

• A bunch of newly-declared stable APIs, including Modifier.focusGroup() and Modifier.consumeWindowInsets()

Wear Compose is up to 1.3.0-alpha04. There is a new wear-tooling-preview library for previews, and the secondary action on SwipeToReveal() now supports undo.

Also, activity-compose is up to 1.8.0-alpha07 and navigation-compose is up to 2.7.1.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Stop My Composable From Being Called Too Frequently?

Some composables, like a progress indicator, need to be called a lot as part of their normal operation. However, there is a line between “called a lot” and “called too much”, where you might wind up with jank. See how debouncing can help in this week’s highlighted Stack Overflow question.

How Can I Control When AnimatedContent() Animates?

A popular UI pattern is loading/content/error, with separate view-state objects representing each of them. You might want to animate the transitions between those states, and AnimatedContent() seems like a nice solution. However, you may also get recomposed for the same state, such as when the content updates. How can you limit AnimatedContent() to animate only between the three view-state types, and not for changes within a single type? Learn how recent changes to Compose UI simplify this, in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: An update on Jetpack Compose Accompanist libraries — August 2023

Google’s Ben Trengrove writes about how a set of Accompanist packages are going to be deprecated, for Material/AppCompat theme adapters, pager indicators, placeholders, system UI controller, and the WebView wrapper. These will not be moved into Compose itself and instead will be removed in the coming months. If you need them, fork them!

Write Content of a Composable to a Bitmap

I do not normally link to ordinary documentation updates, but since this question comes up a lot… Google now has official instructions for rendering a composable to a Picture and from there to a Bitmap.

Medium: Building a widget using Jetpack Glance

Victor Brandalise walks us through creating an app widget using Glance, from setting up the project all the way through rendering a random quote’s text onto that app widget.

Medium: Jetpack Compose Android Testing - Beyond the Basics

Gary Chang explains how to set up instrumented tests of our composables and includes many test helper functions to try to keep our test functions as simple and as readable as possible.

Solving the mystery of recompositions in Compose’s LazyList

Shreyas Patil looks at a fairly ordinary-looking composable that wraps a LazyColumn() and shows how its recomposition counts are much higher than expected. Shreyas then looks at one solution (changing where the clickable() modifier is applied), then dives into the clickable() implementation to find out why it is a problem (hint: it is composed()). While the specific problem here is fixed in the August 2023 release, the general approach towards examining recomposition problems remains useful.

Medium: Elevate Your UI: Exploring Jetpack Compose with Constraint Layout

ConstraintLayout is the go-to container for Android development using the classic View system, but its Compose equivalent is less well-known. Abhishek Pathak explores ConstraintLayout(), including the use of guidelines, barriers, and chains.

Medium: Top App Bar in jetpack compose

Bharadwaj Rns looks at the Material3 approach to a top app bar, showing off LargeTopAppBar() inside of a Scaffold().

Canvas in Jetpack Compose

Maria Luiza tours the basics of the Canvas() composable API, such as drawRect() and drawCircle().

Other Interesting Links

• Compose Theme Preview
• How to Provide Accessibility in Your Native Android App with Jetpack Compose | Part 2: Scaling • Text Size • Focus Order • Labeling
• Mastering Rows and Columns in Jetpack Compose Boost Your UI Design Skills
• Medium: Android Development: Adding New Activity, Explicit Intent and Top App Bar with Jetpack Compose
• Medium: Creating a Shared UI with Compose Multiplatform
• Medium: Dynamic Progress Bar in Jetpack Compose
• Medium: Enhance Navigation with Android Jetpack Compose Material-3 BottomBar
• Medium: FloatingActionButton with Sub Floating Items in Jetpack Compose
• Medium: Jetpack Compose Bottom Navigation With Scaffold (Material3)
• Medium: Jetpack Compose Preview: Tips and Tricks
• Medium: Jetpack Compose: Multiple FloatingActionButton
• Medium: Navigation in Jetpack Compose : A Simple Guide
• Medium: Simplifying Dependency Injection with Dagger Hilt in Android Using Jetpack Compose
• Medium: Streamline permission handling in Android Jetpack Compose applications with Compose Permissions
• Medium: Using Compose Modifier.animateContentSize() properly
• Medium: Using Superscript and Subscript Text in Jetpack Compose
• Medium: Why Build a Pattern Library in Jetpack Compose? — Elevating User Experiences in Large-Scale Applications
• Navigation Bar APIs in Material 3 Jetpack Compose
• Swipeable Image Slider in Jetpack Compose

Resource Roundup

100% pure code!

GitHub: MohamedRejeb / Calf

Mohamed Rejeb is building up a library of Compose Multiplatform composables to help provide native looks with a common composable wrapper. calf-ui gives us date and time pickers, alert dialogs, progress indicators, bottom sheets, and a Web renderer. calf-file-picker gives us a file picker.

GitHub: DawinderGill / CustomShapes-JetpackCompose

Dawinder Singh Gill brings us Shape implementations for diamond, heart, hexagon, star, and ticket shapes.

GitHub: PratikFagadiya / FancyJetpackComposeDialog

Pratik Fagadiya created a SuccessFancyDialog() composable (and equivalents for errors, warnings, and informative messages), with a fair bit of customization available.