jetc.dev Newsletter Issue #138

Published: 2022-10-25

By the time you read this, the Android Dev Summit will have completed its first event, including a bunch of Compose content that I’ll link to in the next issue.

For now, we’ll look at long clicks on lazy items and the reason we remember() the output of derivedStateOf(). We’ll take another peek at Appyx and learn about atomic design. And we’ll see some more loading indicators, image croppers, and country code pickers.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Do We remember() Derived State?

In lightweight testing, it might seem like you can skip using remember() with derivedStateOf(). In reality… there is a good reason why there is a Lint warning for forgetting remember() for derivedStateOf(), as we see in this week’s highlighted Stack Overflow question.

How Can I Handle Long-Clicks in Lazy Items?

In theory, it is merely a matter of onLongClick. In practice, you also need to add keys to your lazy collection (in this case, a LazyVerticalGrid()), as we see in this week’s Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Modelling dating cards navigation with Appyx

Zsolt Kocsi continues a review of the capabilities of the Appyx navigation library, this time exploring how it not only handles screen-to-screen navigation, but “in-screen navigation”. In this case, Zsolt looks at the classic “swipe left/swipe right” card animation, showing how Appyx models the stack of cards and defines operations that transition that stack from state to state.

Medium: You might be creating your states wrong!

Chetan Gupta examines two different ways of consuming MutableState: destructuring it into a get/set accessors and delegation (by syntax). TL;DR: Chetan likes destructuring but thinks that delegation is a more reliable approach.

Medium: Android Jetpack Compose and Atomic Design

Adrian Burcin looks at atomic design: a way of describing UI elements from tiny reusable pieces up to entire screens. Adrian then explores how a Compose UI design system can embody atomic design and how a screen can be subdivided into the atoms and molecules that make up much of an atomic design.

Tweets: Calling Composables from onClick()

Google’s Zach Klippenstein wrote a series of tweets examining a common confusion with Compose UI: why event handlers do not directly emit compositions, but rather update state. In other words, why can’t we call composable functions from, say, the onClick lambda for a Button()? The answer is “you can, but you’re not going to like it much”.

Other Interesting Links

• Compose Basics: MAD Skills Wrap-Up
• Migrating to navigation with jetpack compose
• Medium: Deeplink friendly app with jetpack compose navigation
• Medium: Jetpack Compose — a quick dive into Recomposition
• Medium: Jetpack Compose basics + under-the-hood stuff
• Medium: Jetpack Compose State Hoisting
• Medium: Bounce Effect with Compose Backdrop Layer
• Medium: What does the PaddingValues parameter in a Compose Scaffold do?

Resource Roundup

100% pure code!

GitHub: commandiron / ComposeLoading

Emir Demirli published a library of loading indicator composables, from Circle() and Pulse() to ChasingDots() and WanderingCubes().

GitHub: TuleSimon / xMaterialccp

Tule Simon implemented a country code picker, based on one profiled here several months ago. MaterialCountryCodePicker() takes a dizzying array of parameters to customize the look.

GitHub: mr0xf00 / easycrop

GitHub user mr0xf00 created an ImageCropper() composable to allow the user to crop a bitmap (in memory or loaded from a Uri or File). The library also contains an ImageCropperDialog() for a popup version of the UI.

GitHub: NaingAungLuu / form-conductor

GitHub user NaingAungLuu created a library that lets you define business rules for form validation via annotations on a model class, such as @MaxLength and @IntegerRange. Those can then be applied to a UI via form() and field() composables.

Other Interesting Links

• GitHub: javierpe / ArtGallery (server-defined UI)
• GitHub: mr0xf00 / lazytreelist (lazy list of items and sub-items)
• GitHub: marosseleng / compose-material3-datetime-pickers (Material3 time picker)
• GitHub: GRizzi91 / bouquet (PDF renderer for simple PDFs)
• GitHub: ltttttttttttt / Buff (KSP to convert simple properties into MutableState)