jetc.dev Newsletter Issue #72

Published: 2021-07-06

RC01 is out! And there are changes! 😞

Beyond that, we look at continued attempts to figure out how to use Navigation for Compose in complex apps, how to play with multiple screen sizes, and how to render a stack of cards.

RC Reflections

Reviewing the release notes for the latest Jetpack Compose update!

We have our first RC of the Compose artifacts! And… there are more changes than really seems like a good idea for an RC.

From the standpoint of most developers, the biggest issue is that previews are broken until Arctic Fox RC1 ships, which may not be soon. This seems to stem from the split of ui-tooling into ui-tooling and ui-tooling-preview, which apparently broke some assumptions in the IDE. The workaround, until the IDE update is available, is to stick to beta09 for ui-tooling.

But, beyond that, there were a remarkable number of changes, including:

• Canvas now supports contentDescription

• Dialogs can use the full screen width

• We have new composition locals: LocalActivityResultRegistryOwner and LocalOnBackPressedDispatcherOwner, mostly to allow for more composables to be previewed (once previews work again…)

• AnimatedImageVector is temporarily removed

• Disabled composables (e.g., Button()) via Modifier.clickable(enabled=false) will block those click events from rippling up to the parent

• BadgeBox() and RangeSlider() composables were added

• “To align with Material Design specs OutlinedTextField with invalid input stopped using error color for label when label is being used as a placeholder”

I will talk more about this in the “…And One More Thing” section at the end of this issue.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Maintaining an Aspect Ratio

Often, we need to keep some UI element in a particular aspect ratio, even if the size itself might vary based upon available screen space. The simple aspectRatio() modifier handles that nicely, as we see in this week’s highlighted Stack Overflow question.

Dealing with Dialog Damage

Dialogs, including AlertDialog(), changed in RC01, where they are now full-width by default, and you have to opt out of that behavior. There are several problems with this, as we see in this week’s Kotlinlang #compose Slack thread.

Composable Commentary

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

Podcast: AD/BC on Material Composition

Clara Bayarri and Matvei Malkov joined Android Developers Backstage to talk about Compose Material: what it brings now, what it will bring in the future, and what you get to bring to style your apps the way that you need.

Medium: Scalable Jetpack Compose Navigation

I commented in an earlier newsletter how it seems like everybody is cranky about Navigation for Compose. Lachlan McKee is one of many developers trying to do something about it. Lachlan blended Dagger/Hilt with route factories to make it easier to federate route assembly across multiple modules, keeping each implementation internal for less coupling.

Navigation in Multi Module Android Compose UI Project + Hilt

Have I mentioned that it seems like everybody is cranky about Navigation for Compose? FunkyMuse also went the Hilt + Compose approach for addressing navigation, in this case using a dedicated navigation module and some dedicated wrappers around Navigation for Compose constructs.

Video: Supporting Multiple Screen Sizes In Jetpack Compose

Adam McNeilly returns, this time with a 2-plus-hour screencast walking through supporting phones and tablets from the same Compose UI foundation, including various strategies for making use of the available space on tablets. Adam also explores how to set up your tests to exercise your code for both form factors.

Medium: Part 2, UI Widgets From Scratch in Jetpack Compose

Sergey Nes is exploring setting up some common UI patterns using composables. In this post, Sergey looks at how to set up a deck of cards, reminiscent of a StackView in the classic View system, with a top card visible and additional cards peeking out from behind it.

Blink Like It’s 1999

Maia Grotepass is playing around with Compose UI, with an eye towards reproducing retro Web site UI patterns. This time around, Maia implements a composable that blinks its contents, using an infinite tween transition, akin to the <blink> tag from a byegone era of the Web.

Medium: Jetpack Compose: How to Play with Canvas?

Gérard Paligot is back, this time with a nice look at rendering a circular progress indicator with tick marks, for use as a countdown timer visual. Not only does it use the Canvas() API, but it uses trigonometry. Consider yourself warned!

Browsing Jetpack Compose Samples

Anton Shilov offers some quick tips for finding relevant Compose UI examples in the Compose code base, either using the Android Code Search site or an IDE plugin.

Other Interesting Links

• Medium: Providing AssistedInject Supported ViewModel for Composable Using Hilt
• Video: Migrating to Compose: AbstractComposeView
• Medium: Infinite List / Paged List in Jetpack Compose
• Compose: Strikethru Animation
• Markdown Rendering and Recursive Composition
• Creating a Retro-Style Game with Jetpack Compose: Movement
• Getting Started With Jetpack Compose
• Video: Making UI Development Easier with Jetpack Compose
• Video: Build Better Apps Faster with Compose
• Video: Jetpack Compose in Practice

Resource Roundup

100% pure code!

GitHub: igorescodro / alkaa

Igor Escodro has been working on Alkaa, an Android to-do app, for the past few years. Igor recently completed a rewrite to use Compose UI for the user interface, to go along with Koin, Room, coroutines, etc.

GitHub: simonsickle / ComposedBarcodes

Simon Sickle created composable wrappers around ZXing’s barcode-rendering logic, to make it easy for your app to display QR codes and other types of barcodes.

Gist: msomu / DateVisualTransformation.kt

In Compose UI, a VisualTransformation is responsible for formatting the entered text into what is rendered on the screen in a TextField(). GitHub user msomu created a DateVisualTransformation to format an entered date as DD-MM-YYYY.

GitHub: wiryadev / bootstrap-icons-compose

Abrar Wiryawan has used svg-to-compose to convert the Bootstrap icon set into composables for use in your app.

GitHub: JetBrains/JWM

“JWM is a cross-platform Java window management and OS integration library”. It seems likely that this will wind up being used in Compose for Desktop at some point.

…And One More Thing

The RC01 changes, such as the AlertDialog() width change, are disconcerting. Changing how Compose works is a natural course of development, but labels like “alpha”, “beta”, and “RC” are supposed to have meaning. Changing the API surface and changing fundamentals like dialog widths should not be happening at this point. Similarly, the package changes that broke previews in the current Arctic Fox betas feel like something that should have happened early this year, not on the cusp of a stable release.

Two months ago, when the Compose team announced a July release date, I was nervous. July seemed like a perfectly reasonable objective, but Compose is huge, and it’s important to get a solid first release out. Yet, the announcement was short on wiggle room, making it seem like July was a done deal. However, adhering to that sort of public deadline leads to strange decisions, such as the ones leading to these RC01 alterations.

In the end, I hope that this is not a harbinger of things to come.