jetc.dev Newsletter Issue #127

Published: 2022-08-09

This week, we look at minimum heights and snapshot problems. We revel in all the presentations from droidcon Berlin 2022. We learn about shimmering text and shimmering… other stuff. And, we play around with charting and cameras.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Request a Minimum Height?

A common UI pattern is to have a minimum height for some UI element, where it can be taller if the content calls for it. There are a couple of different options for implementing this, as we see in this week’s highlighted Stack Overflow question.

When Should We Load Data?

One common runtime error in Compose development is: “Reading a state that was created after the snapshot was taken or in a snapshot that has not yet been applied”. One cause is trying to trigger work from a ViewModel constructor, even though that might be a natural approach to implement. So, should we use something else, like triggering that work from a LaunchedEffect instead? Learn more in this week’s highlighted Kotlinlang #compose Slack thread!

Droidcon Berlin 2022

droidcon Berlin had a lot of Compose-related presentations!

Composable Commentary

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

Medium: Animating brush Text coloring in Compose

Google’s Alejandra Stamato continues an exploration of the new Brush API for text in Compose UI 1.2.0. This time, Alejandra looks at adding a shimmer effect, involving animating a color gradient, to text.

Medium: Jetpack Compose Shimmer Animation

If you like shimmer effects, but not necessarily for text, Erselan Khan has you covered! While there are a few libraries available to help with such shimmer effects, Erselan shows you how to add one just using the standard Compose UI SDK, based on rememberInfiniteTransition() and a tween() animation of a gradient.

Medium: How to reuse data for previews in Jetpack Compose

Many Compose UI developers rely heavily on @Preview and the IDE for rapid iteration on composable implementations. Juan Guillermo Gómez Torres walks us through the use of PreviewParameterProvider and @PreviewParameter to make it easy to set up several previews with varying custom data, so you can see how your composable reacts across a bunch of scenarios.

Composing margins and paddings

Thomas Künneth is back, this time looking at whitespace. In the classic View system, we had padding and margins. Compose UI only offers padding, and Thomas walks us through how we can use padding to have the same visual effect as margins.

Gotchas in Jetpack Compose Recomposition

Justin Brietfeller explores recomposition, something every Compose developer experiences but few fully control. Justin looks at how Compose can optimize away recompositions and explains how some common programming techniques, like lambda expressions, can cause more recompositions than you might expect. Justin also looks at various ways to revise our approaches to help Compose skip recompositions and improve overall UI performance.

Medium: Infinite Auto-Scroll with Jetpack compose

Hardik P looks at lazy rows/columns that automatically scroll through their contents, looping back around to the beginning of the list for an “infinite” presentation. Hardik builds up a AutoScrollingLazyRow() composable from parts, with a tween() animation for controlling the actual scroll amount.

Velocity Based Animation with Compose

James Morrissey asks “Do you have a keen eye for fine details when it comes to UX?” In my case, the answer is “oh, heck no”. But, James is good at this sort of thing! So, in this post, James explores having fling animations be configured in part by the initial velocity of the fling, such as having the range of an alpha animation depend on how strongly the user performed the fling.

Medium: Implementing a circular carousel in Jetpack Compose

Francesc Vilarino Guell returns with another form of animation: a circular 3D-style carousel of cards. Francesc demonstrates how to build up a CircularCarousel() to implement this effect. Content Warning: this post contains trigonometry.

Resource Roundup

100% pure code!

GitHub: KoalaPlot / koalaplot-core

The Koala Plot team released their eponymous Kotlin/Multiplatform charting and plotting library. In addition to supporting Android, desktop, and Web targets, it offers several different types of charts (pie, line, bar, etc.) with a fair bit of customizability.

GitHub: nilsjr / Snappy

Nils Druyen released a library that provides an activity for taking photos using CameraX. The activity is implemented in Compose UI, and it can be accessed from composables using the Activity Result API.