jetc.dev Newsletter Issue #144

Published: 2022-12-06

After a bout of COVID-19, I am back with the newsletter! Though this issue is a bit shorter than normal, as I work back to full strength.

But, in this issue, we spend a lot of time talking about derivedStateOf(), with three separate posts on the topic! We also look at borders, custom layouts, and a camera library. Plus, we learn how to make a jellyfish wiggle.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Put a Border Around Multiple Composables?

In a schedule-style calendar, an event might span several days. If you have one composable per day, you might need to add a border (or similar effect) to multiple per-day composables to represent the event. This can be accomplished using drawBehind() and some creativity, as we see in this week’s highlighted Stack Overflow question.

How Do Sealed Classes Influence Skippability?

We care a lot about “skippability” to help Compose detect real changes that should trigger recomposition. However, there are a lot of edge cases, and sealed classes appear to be one of those, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Making Jellyfish move in Compose: Animating ImageVectors and applying AGSL RenderEffects

Google’s Rebecca Franks examines what it takes to disassemble an SVG to turn it into ImageVector objects manually… in service of animating a jellyfish. This includes converting feTurbulence in a <filter> from the SVG into an AGSL-defined shader for Android 13 and above.

Medium: Jetpack Compose — When should I use derivedStateOf?

Google’s Ben Trengrove looks at a common point of Compose developer confusion: when is derivedStateOf() needed, or even wanted? TL;DR: “derivedStateOf {} should be used when your state or key is changing more than you want to update your UI”.

Slides: Composing an API with Kotlin vol. 2

Google’s Márton Braun delivered a presentation for Advanced Kotlin Dev Day 2022 about various aspects of the Compose API — these are the slides from that presentation.

Video: Create custom layouts with Jetpack Compose

The Code with the Italians team had Google’s Simona Stojanovic by to talk about the JetLagged Compose sample app and how its UI was constructed, particularly things like its screen for showing your historical sleep results.

Medium: Jetpack Compose: remember, mutableStateOf, derivedStateOf and rememberSaveable explained

Medium user Stefan M. brings us our second post regarding remember(), derivedStateOf(), and related functions. Stefan draws analogies between remember() and lazy(), explores achieving derivedStateOf() functionality using a dedicated separate remember() call, and more!

Medium: derivedStateOf{} vs remember{} with keys — The difference

Medium user The Android Developer continues our series of posts related to derivedStateOf() and remember(), in this case focusing on the remember() form that takes one or more keys as parameters. While both allow for updating a value based on state changes, derivedStateOf() can further reduce recompositions, even given proper use of remember() keys.

Other Interesting Links

• Medium: Designing Slot APIs in Jetpack Compose
• Slides: Adopting Jetpack Compose Safely
• Slides: Demystifying Molecule
• Video: The ever increasing convergence of native iOS and Android mobile development
• Medium: Deep Link with Jetpack Compose: in Three Steps.
• Medium: Navigating With Parcelable Arguments in Jetpack Compose
• Slides: Adopting Jetpack Compose in your Android app
• Slides: Composing an Octopus
• Medium: Loading images using coil in Jetpack Compose
• Creating Tinder like card feature with Android Compose
• Jetpack Compose TextField (with Examples)
• Medium: New Android UI Kit: Jetpack Compose

Resource Roundup

100% pure code!

Circuit

Slack has published a Kotlin/Multiplatform library in which the UI architecture itself is implemented using composables, in addition to its UI.

GitHub: ujizin / Camposer

Lucas Yuji Yoshimine brings us a library for using the camera from our composables. A CameraPreview() composable renders the preview, while a CameraState offers functions to take pictures and record videos. Learn more in this Medium post.

GitHub: svenjacobs / reveal

Sven Jacobs created a Reveal() composable that handles the “highlight and explain a UI element” pattern, sometimes referred to as a “showcase” or “coach mark”.

Gist: KlassenKonstantin / Tilt.kt

Konstantin Klassen created tilt() and tiltOnTouch() modifiers to give your composables a spring-based tilt effect. See this tweet for a video showing the results!