jetc.dev Newsletter Issue #149

Published: 2023-01-17

This week, we look at the latest Compose release to see what is in store for us. We spend a lot of time on Navigation for Compose, plus look at scaffolds and QR codes. And we explore server-defined UI and an alpha-grade BOM.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

While we did not get an update to the Compose Compiler, some Compose artifacts got a new stable patch release with minor bug fixes and a new alpha (1.4.0-appha04) with:

• PinnableContainer to “pin” lazy list items, so they are not disposed when they scroll out of bounds (e.g., for use by the focusable() modifier)

• Long-term, focus will get other improvements, via Modifier.Node APIs and IsContainer

• Better accessibility support for DropdownList

• A lot of stable APIs (i.e., experimental annotations dropped), for fonts, rotary scroll input, pluralStringResource(), and more

• FlowRow() and FlowColumn() containers

• A basicMarquee() modifier for a scrolling marquee effect

For the stable updates, use androidx.compose:compose-bom:2023.01.00 as the BOM.

Wear Compose also got a patch release (1.1.1) as well as a 1.2.0-alpha02 release, both mostly for bug fixes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Rotate an Image?

Applying the rotate() modifier seems easy enough, but you need to remember() that your angle is State, as we see in this week’s highlighted Stack Overflow question.

How Do We Keep Our Size Stable?

Sometimes, we have a UI element where we want its size to vary by its content… but only when its content meaningfully changes. Toggling between states — in this case, between text and a loading indicator — should keep the same size. There are several possible solutions, depending on your requirements, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Testing Android App 2023

The Coding with the Italians team had Google’s Jose Alcérreca and Alex Vanyo on the show to talk about Compose UI testing, to explore the new Accompanist TestHarness() composable for testing composables under different conditions (font scale, screen density, etc.)

Medium: Implementing Instagram-like story switch animation in Compose

Instagram has a 3D-spinning sort of carousel to page through images. Tornike kachkachishvili decided to reimplement that in Compose UI, using Accompanist Pager, the graphicsLayer() modifier, and some math.

What is the use of Scaffold in Jetpack Compose and is it necessary?

Alex Styl returns, exploring the omnipresent Scaffold() composable. Many Compose UI examples use Scaffold(). Here, Alex explores why that is, what we get from Scaffold(), and how to bypass it for cases where you feel that it is not needed.

Medium: All about navigation in the Jetpack Compose-based production code-base

Kaaveh Mohamedi takes a look at Navigation for Compose and the basics of setting up routes, nested navigation graphs, passing parameters, and more.

Medium: Navigating in Jetpack Compose

Francesc Vilarino Guell is back, continuing this week’s exploration of navigation within Compose UI. In this case, Francesc looks at the limitations of Navigation for Compose and discusses ways to put more of the navigation logic in viewmodels rather than in your composables.

Medium: Android Jetpack Compose and Nesting Navigation

Tomáš Repčík continues the tour of Navigation for Compose, this time with a deeper dive into nested navigation graphs. Having one massive navigation graph can be unwieldy, even impractical in multi-module apps. Tomáš discusses one approach for nested navigation: creating extension functions for NavGraphBuilder to define sub-graphs.

Pass the design baton with Relay

Kristen Halper is back, this time looking at Relay, Google’s toolset for exporting Figma designs and importing them as composable functions.

How to Render Text as a QR code in Jetpack Compose

Last week, I pointed out a gist by Addy Godwin Nii for rendering QR codes in Compose, using a combination of the legendary zxing library with a BitmapPainter. Addy wrote a post explaining more about how that code works.

Other Interesting Links

• Use SavedStateHandle with ViewModel Compose Android
• Add blur effect to Image in Jetpack Compose
• Medium: Update Variable State from Another Variable
• Medium: Migrating to Android Jetpack Compose
• Medium: Gestures in Jetpack Compose: The Basics
• Medium: Jetpack Compose Swipe To Dismiss Made Easy
• Medium: Made in Compose — Dynamic Island
• Medium: Data flow in Composable through CompositionLocal
• Jetpack Compose Basics - How to use Exoplayer library to play videos
• Medium: Recomposition problem with mutations
• Medium: Displaying HTML text in Jetpack Compose
• Jetpack Compose Tutorial: Replicating Dribbble Audio App Part 1
• Medium: Building a Language Learning App with Compose — Part 1
• Jetpack Compose Grid without Lazy
• Medium: Custom View using Jetpack Compose
• A Basic Guide : What is Flow Layout in Jetpack Compose?
• Jetpack Compose Switch Button (with Examples)
• Jetpack Compose for days
• Slides: Introduction to Jetpack Compose
• Medium: Lessons learnt from implementing Jetpack Compose

Resource Roundup

100% pure code!

GitHub: dokar3 / draggable-menu

GitHub user dokar3 has created a DraggableMenu(), where tap-and-drag moves a highlight bar up and down the list menu choices.

GitHub: Muratthekus / Compose-CurrencyText

Murat Kuş has published a CurrencyTextField() that handles currency formatting, including thousands and decimal separators.

GitHub: chrisbanes / compose-bom

The official Compose BOM includes the latest stable releases. Chris Banes has created a parallel BOM that covers the latest non-stable releases (alphas, etc.).

GitHub: ZupIT / nimbus-compose

Nimbus is a cross-platform server-defined UI (SDUI) framework, supporting SwiftUI and Compose UI.

Other Interesting Links

• GitHub: GetStream / webrtc-in-jetpack-compose (WebRTC in Compose demo)
• GitHub: mobanisto / pinpit-gradle-plugin (installer toolkit for Compose for Desktop)
• GitHub: Wavesonics / compose-multiplatform-file-picker (Compose for Android/Desktop file picker bridge)