jetc.dev Newsletter Issue #100

Published: 2022-01-18

It’s the 💯 issue! 🎉

In it, we look at the first alpha for Compose 1.2.0. We look at button presses and flow operators, plus writing composable libraries and testing via robots. We take another glance at Glance, and we see what you think of Material You.

Alpha Analysis

Reviewing the release notes for the latest Jetpack Compose update!

1.1.0 is not yet stable, but we already have a 1.2.0-alpha01 release. This is how things went the last time around, where the 1.1.0 first alpha came out before 1.0.0 shipped a stable release.

This alpha does not have too much. Of note:

• They added userScrollEnabled as a parameter to the Lazy... family of composables (e.g., LazyColumn()). If this is false, users cannot scroll via gestures, though programmatic scrolling is still possible

• They added an onSizeChanged function type parameter to Modifier.magnifier()

• They added isSkipHalfExpanded to ModalBottomSheetState, to bypass the half-expanded state when collapsing a bottom sheet

Also, ConstraintLayout for Compose shipped a 1.0.0 release.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Detect Button Presses?

Button() has an onClick parameter to detect clicks, where the button is pressed and released. For more complex interactions, such as detecting a press independent of a click, you need to work with InteractionSource, as we see in this week’s highlighted Stack Overflow question.

Where Do Flow Operators Go?

If you try using a Flow operator, such as map(), in a composable where you eventually call collectAsState() on the Flow, you get a Flow operator functions should not be invoked within composition Lint error. Learn why that error shows up, and what to do about it, in this week’s highlighted Kotlinlang #compose Slack thread!

Composable Commentary

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

How We Expose Jetpack Compose APIs

William Barbosa of PSPDFKit walks us through API design, with an eye towards libraries for Compose UI. Creating a solid API is not merely a matter of just exposing composables — it requires thinking through how developers will consume that API and how you can simplify their lives. Those lessons hold true regardless of whether your composables will be used by the world or just by some team members.

Medium: Lessons learned on Jetpack Compose UI Testing: Robot Pattern

Fernando Prieto is exploring UI testing for Compose-based projects. His initial post looked at OkHttp’s MockWebServer for mocking HTTPS responses. This post looks at the robot pattern: creating an API for manipulating your UI under test, to make tests easier to write and more expressive.

Video: Optimizing Render Performance of Jetpack Compose

William Shelor delivered an Android Worldwide presentation looking at the speed of our composables and what we can do to improve upon it. Beyond looking at the impacts of tooling on our day-to-day apparent performance, William explores how the complexity of our composables impacts speed, using memoization to reduce computation within composables, and other steps to avoid recomposition.

Building design system with Jetpack Compose

Damien Petla offers up several approaches for implementing a design system, from simple extension functions for MaterialTheme, all the way through bypassing MaterialTheme and rolling a true custom theme.

Medium: Android Jetpack Glance for App Widgets

Enes Zor walks us through creating an app widget using Glance, the Jetpack composable framework for app widgets and Wear OS tiles. You might also be interested in Igor Escodro’s introduction to Glance as well.

Exploring Material You for Jetpack Compose

Jaewoong Eum gives us a quick tour of the Material You aspects of the Compose Material3 library. The feature most commonly associated with Material You is the dynamic color palette based on the user’s current wallpaper. If you are interested in Material3, you may also be interested in Hugo Visser’s gist showing how to use Material3 and “classic” editions of MaterialTheme() at the same time.

Jetpack Compose: Preview

Alex Zhukovich brings us a detailed look at the @Preview annotation and all of its many options and features.

Other Interesting Links

• RichText Editor in Jetpack Compose
• Adding AlertDialog with Jetpack Compose to Android apps
• Jetpack Compose Basics - How to use and create own CompositionLocal
• Medium: How Kotlin By Variable Delegate Helps Me Avoid Anti-Pattern
• Medium: Carousel Slider in Android Jetpack Compose with Auto Play
• Remember, Remember, Jetpack Compose
• Medium: Jetpack Compose Migration: Part 1. Get Started

Resource Roundup

100% pure code!

GitHub: sebaslogen / resaca

Sebas LG created a library that offers rememberScoped(), a form of remember() that lives a bit longer, including across configuration changes, for finer-grained scope control that you get with the Jetpack ViewModel and Navigation for Compose.

Gist: antonshilov / SwipeButton.kt

Anton Shilov brings us a small ConfirmationButton() composable. This renders like a button with a small thumb image on top of it, which the user needs to slide across the button face to perform an action.

GitHub: varabyte / kobweb

The Varabyte team created Kobweb, a extensive Web app framework built on top of Compose for Web. It offers integrated routing, shared content between client and server, Markdown formatting, and a rich set of widgets.

GitHub: raipankaj / JetCam

Pankaj Rai offers us integration between Compose UI and Jetpack CameraX, via a JetCam() composable.

Other Interesting Links

• GitHub: Anmol92verma / JetCalendarView
• GitHub: roudikk / compose-navigator
• GitHub: funyin / FormValidator

…And One More Thing

I’m going to be writing a bit about Compose for Wear, the Jetpack composable library for Wear OS apps. Most of that will be over in the CommonsBlog, as the material is going to be a bit long and code-heavy for this space.

This week, I start off by looking at using CurvedRow() and CurvedText(), for showing content on the screen edges, supporting following the curvature of round screens.