jetc.dev Newsletter Issue #169

Published: 2023-06-20

I’m back! 👋

We got updates to Compose, TV Compose, Wear Compose, and more!

Beyond that, we poke at derivedStateOf() and see what a bunch of makers were talking about with respect to Compose. We examine implementations of a multi-select photo grid, pull-to-refresh, and a custom Arrangement. And we explore a dependency-free source of symbol Icon() implementations.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose 1.5.0-beta02 is available, and it includes:

• Replacing toComposePaint() with asComposePaint()

• An optimization to DerivedState (which underlies derivedStateOf())

• …and not much more, suggesting that we may move to RCs soon!

TV Compose is up to 1.0.0-alpha07 and offers:

• New RadioButton(), Switch(), and Checkbox() composables

• Long-click support for cards, buttons, and Surface()

Wear Compose is now out in a 1.2.0-beta02 release, mostly for bug fixes.

In the world of Compose-adjacent libraries:

• Navigation for Compose has a new 2.6.0 stable release in addition to 2.7.0-beta01

• Paging for Compose is up to 3.2.0-beta01

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Have Derived State Without derivedStateOf()?

“When all you have is a hammer, every problem looks like a nail.” Similarly, once you see derivedStateOf(), you may be tempted to try considering having everything in your composable that depends on state to apply derivedStateOf(). While derivedStateOf() is useful, it is not always necessary, as Google’s Chuck Jazdzewski points out in this week’s highlighted Stack Overflow question.

No, Really, Do I Need to remember() My derivedStateOf()?

derivedStateOf() does not have to be wrapped with remember(), but it is probably a good idea. Google’s Andrei Shikov points out why in this week’s highlighted Kotlinlang #compose Slack thread.

Android Makers 2023

There were several presentations at Android Makers 2023 regarding Jetpack Compose, in English and French, including:

• 90s Website … in 2023 on mobile in Compose … for science
• Animations avec Compose : rendez vos apps chat-oyantes
• Collapsing toolbar avec effet parallaxe et animation en courbe avec Jetpack Compose
• Confetti: building a Kotlin conference app in 40min
• SwiftUI vs Jetpack Compose par un Ingénieur Android
• Take a look at Jetpack Glance
• Un Design System, ça se Compose !
• Using Compose Runtime to create a client library

Composable Commentary

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

Create a photo grid with multiselect behavior using Jetpack Compose

A popular UI pattern for apps that let users work with images is to have an image grid where users can check off one or more of those images. Google’s Jolanda Verhoef explores an implementation of that UI pattern, from the basics of setting up a LazyVerticalGrid() to supporting drag gestures to select (or unselect) many images at once.

Get your Compose callbacks under control using scopes

Scopes in Compose are used to supply an API to certain slot parameter implementations — this is how Row() and Column() can provide dedicated modifiers to their content lambdas. Anders Ullnæss explores using this to help clean up navigation: having the viewmodel implement the scope interface and passing in a custom NavigationController to perform the actual navigation.

Medium: The Art of Small Animations in Android with Jetpack Compose

Wiggles, pulses, and similar “small animations” can help to highlight UI elements of relevance. Rodrigo Dominguez walks us through implementing five of these: pulsing a card elevation, ringing a bell icon, pulsing a badge indicator, rotating a border gradient, and dragging UI elements.

Jetpack Compose: Pull to Refresh

Alex Zhukovich is back, this time examining the PullRefreshIndicator() composable for implementing the popular pull-to-refresh UI pattern, including how to customize its look and behavior and how to implement tests for it.

Medium: Not only modifiers can be easily modified in Jetpack Compose

Piotr Prus describes how to implement a custom Arrangement, for placing UI elements in a Row() using an approach that differs from any pre-packaged Arrangement like SpaceEvenly.

How to Request Android Runtime Permissions using Jetpack Compose?

Vincent Tsen reviews the Accompanist Permissions library. Vincent explains how to work around limitations like dismissable permission dialogs and how to leverage shouldShowRationale.

Other Interesting Links

• Using Compose on the Web without Wasm
• Medium: Jetpack Compose Custom Layout Made Easy
• Accessibility in Android Jetpack Compose
• Accessibility & Testing in Jetpack Compose
• Medium: How to make your app accessible
• Medium: Jetpack Compose — Making Composable lifecycle-aware
• Medium: ViewPager on a bigger scale — Jetpack Compose
• Medium: WhatsApp’s Circular Reveal with Jetpack Compose
• Creating a quick sticky footer for LazyColumn in Jetpack Compose
• Medium: Exploring Mapbox: Create Engaging Apps with Mapbox and Jetpack Compose
• Improved navigation support in TwoPaneLayout
• Slides: Compose-View Interop in Practice
• Medium: A Composable Journey: Creating a Unique UI using Jetpack Compose
• Medium: Creating a Split Flap Display in Compose
• Medium: Increase the Performance in Jetpack Compose Part 4
• Medium: Drawing on Jetpack Compose Canvas — Android
• Medium: Build a custom Staggered Flow Layout with Jetpack Compose
• Medium: How To Use CameraX With Android Jetpack Compose
• Medium: Lottie-Animations in Jetpack Compose
• Medium: Jetpack Compose Tutorial: Replicating the Water Level Widget
• Slides: Navigation in Jetpack Compose
• Medium: Jetpack Compose Navigation: autogenerate sealed classes for your destinations
• Medium: Testing in Jetpack Compose
• Podcast: Voyager with Adriel Café
• Medium: Navigate back with result with Jetpack Compose
• Medium: Using Android’s New Custom Pixel Shader AGSL in Compose: Part 3
• Medium: Simplifying UI with Jetpack Compose Part III

Resource Roundup

100% pure code!

Material Symbols for Jetpack Compose

Alex Styl built a site where symbols from Material Icons turn into simple composables you can copy and paste into your code base, without requiring external dependencies.

Gist: rock3r / EqualWidthComponentsRow.kt

Sebastiano Poggi illustrates an EqualWidthComponentsRow() implementation, where each element in the row is a wide as the widest element. See this Mastodon post for the inspiration.

GitHub: stevdza-san / OneTapCompose

Stefan Jovanovic brings us a OneTapSignInWithGoogle() composable that “does what it says on the tin”: making it easy to add One-Tap Sign-In with Google to your app.

Other Interesting Links

• Compose Hammer
• GitHub: Composables-co / materialcolors
• GitHub: jigarpandya-dev / MonthPickerComposeLibrary
• GitHub: ogzkesk / EasyPaging