jetc.dev Newsletter Issue #176

Published: 2023-08-08

This week, we look again at Live Edit and Paparazzi. We explore slot APIs, chips, and recompositions. Plus, we peek at placeholders and calendars that reportedly are epic.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Combine onClick and combinedClickable()?

Button() has an onClick parameter for a click listener. We can also use the combinedClickable() modifier to register listeners for click and long-click events. These do not work well together, because Compose UI gestures are usually only consumed by one modifier, as we see in this week’s highlighted Stack Overflow question.

How Do We Flow Only One Row?

FlowRow() is a great way to wrap a collection of composables when you hit your window width. However, what if you want just one “row”: render as many children as you can, but then stop without wrapping. There are a few possibilities, including forking FlowRow() itself. Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Video: Live Edit for Jetpack Compose

Google’s Juan Sebastian Oviedo covers the Live Edit feature added to Android Studio Giraffe, following up on the blog post covered in last week’s newsletter.

Help Us Improve the Performance of Your Compose Multiplatform Apps

JetBrains wants you to file issues about performance problems you are experiencing with Compose Multiplatform!

An Introduction to Paparazzi for Snapshot Testing

Paul Hameteman explores snapshot testing, where you take screenshots representing what a visual component looks like and use those for test comparisons to confirm that code changes do not change the UI unexpectedly. Paul specifically looks at using Paparazzi for this, so snapshot tests can be unit tests instead of instrumented tests.

Video: Jetpack Compose Slots - How to Write Deeply Customizable UI Components

Filip Babić delivered an AppDevCon presentation exploring writing composables with “slot” parameters: parameters that are @Composable lambdas representing some content that the composable will wrap or decorate.

Medium: Creating Self-Adjusting TextFields with Jetpack Compose

Ali Rezaiyan looks at what it takes to create text content (in this case, a TextField()) that autosizes its font so the content fits the available space. Ali uses ParagraphIntrinsics and BoxWithConstraints() at the core of the ResizableInputField() implementation.

Medium: Compose Multiplatform : Windows & Mac Desktop Applications(KMP)

Ayushi Agarwal follows up on an earlier post on sharing Android and iOS Compose code. This time Ayushi looks at setting up a Compose Multiplatform app app supporting macOS and Windows desktops. Alas, Linux is not covered, despite it being a fantastic platform for Android app development and writing newsletters. 😉

All Types of Chips in Material 3 Jetpack Compose

The SemicolonSpace team reviews the various forms of “chip” composable offered by Compose Material3, including AssistChip(), FilterChip(), SuggestionChip(), and InputChip(). Unfortunately, PotatoChip() and ChocolateChip() are not part of the Material 3 specification.

Medium: How does Compose determine which block of code to recompose? — Recomposition Scope in Jetpack Compose

Rizki Maulana takes a deep dive into the concept of composition scopes, including the impact of inline functions, composables being “skippable”, and more!

Medium: Debugging the recomposition in Jetpack Compose

Phat Nguyen continues the exploration of recomposition and composition scopes, including using Layout Inspector in Android Studio to determine composition counts.

Other Interesting Links

• Animation Component with Compose
• Jetpack Compose Permissions: A Quick and Easy Guide
• Medium: Android 13 Runtime Notification Permission: XML & Jetpack Compose Guide
• Medium: Build a Product Management Android App with Supabase and Jetpack Compose
• Medium: Jetpack Compose Material3 Basic Scaffold with FAB and SnackBar
• Medium: Jetpack Compose Sticky Headers
• Medium: Jetpack Compose UI Architecture
• Medium: Unlocking the Magic of Dynamic Composable Animations in Jetpack Compose
• More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction
• Tooltips in Material 3 Jetpack Compose (with Examples)
• Write Once, Run Everywhere: Building with Kotlin and Compose Multiplatform

Resource Roundup

100% pure code!

Placeholder for Jetpack Compose

Sungyong An offers us a trio of libraries for implementing placeholders: what to display while your data is loading. The placeholders support various animated effects, such as shimmers and color changes. Versions exist for Material and Material3, as well as one for your own design system (Foundation).

GitHub: epicarchitect / epic-calendar

Alexander Kolmachikhin brings us calendar composables, with optional paging and date-range selection, that work on the main Kotlin/Multiplatform targets, including Android, the desktop, iOS, and the Web.

GitHub: fracassi-marco / JetChart

Marco Fracassi has released a library with composables for bar charts, line charts, pie charts, and donut (or ring) charts. 🍩