jetc.dev Newsletter Issue #129

Published: 2022-08-23

This week, we look at click durations and screen starts. We see why Accompanist exists, how Tinder “swiped right” on Compose UI, and multiple ways of creating custom containers. Plus we explore page curls, discrete sliders, and (in one of life’s little coincidences) Tinder-style swipeable composables.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Control the Duration of a Click?

Clicks and long clicks have framework-defined durations. Sometimes, though, you want to control the duration, only registering an event after the widget has been pressed for a certain duration. InteractionSource is the key to solving this, as we see in this week’s highlighted Stack Overflow question.

When Does a Screen Start?

The question seems simple: how do we do something once we enter a composition representing a screen? However, sometimes what you want is not really what you need. And, in this case, the underlying issue suggests that architecture is the real concern, 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: Jetpack Compose Accompanist — An FAQ

Google’s Ben Trengrove provides some background on the Accompanist family of libraries: where it came from, why it exists, and where it’s going.

Video: Building an Android App with Compose and Firebase

Google’s Marina da Silva Coelho reviews how to integrate Firebase authentication, Firestore, and other Firebase APIs in a Compose UI application.

Medium: Sparking Jetpack Compose at Tinder

Tasha Ramesh describes how Tinder adopted Compose UI, from initial samples and demos using pre-release versions up to adding the stable version to Tinder’s published app and defining their project’s design system.

Create custom layouts for Android apps with Jetpack Compose

Chizoba Ogbonna walks us through creating a custom container — specifically a ReverseFlowRow() — using Layout() to measure and place the composables in the row.

Custom Layouts, measuring policies, and BoxWithConstraints in Jetpack Compose

Similarly, Jorge Castillo takes a look at Layout(), comparing and contrasting it with BoxWithConstraints() for building custom containers.

Twitter: MVCC and Snapshots

Jorge Castillo also published a lengthy Twitter thread about multi-version concurrency control (MVCC), a core construct behind Compose’s snapshot system. This allows multiple threads to have isolated data without the performance impacts of common multi-threading patterns (e.g., block readers while there are active writers).

Medium: Input Selection Using Bottom Sheet in Jetpack Compose

Medium user Abhimanyu demonstrates how you can use a ModalBottomSheetLayout() as a container for a menu for the user to choose from.

Video: UI Testing of Jetpack Compose Apps

Alex Zhukovich delivered a presentation for Appdevcon reviewing the various options for testing composables, including screenshot tests, functional tests, and end-to-end tests.

Other Interesting Links

• Droidcon NYC iOS app with Compose
• Medium: ViewModel To View in Jetpack Compose
• Parallax Scrolling using LazyColumn
• Medium: Building DualProgressBar in Compose
• Medium: Jetpack Compose: No More XML Selector
• Medium: Jetpack Compose — Animation Notes: 2
• Medium: Implementing Video Playback on Android Jetpack Compose
• Medium: Custom UI Components using Jetpac Compose Canvas based on NeoPoP Design — Part 1 (Radio Button)
• Medium: Typewriter animation in Jetpack Compose
• Medium: Swipe Button using Jetpack Compose
• Medium: Page Indicator with Jetpack Compose using Canvas and animations

Resource Roundup

100% pure code!

GitHub: hi-manshu / Charty

Himanshu Singh published a charting library of composables, supporting a wide range of chart types: bar, circle, line, pie, and more! Mmmmmmmmmmmmmmmmmmm… pie! 🥧

GitHub: oleksandrbalan / pagecurl

Oleksandr Balan brings us a PageCurl() composable. This serves a bit like a pager, wrapping arbitrary composables and allowing you to swipe between them. However, this one applies a page curling animated effect.

GitHub: alexstyl / compose-tinder-card

Alex Styl created a swipableCard() modifier to apply to some container to allow its contents to be swiped off the screen, following the classic Tinder UI pattern.

GitHub: David-Zhubrev / compose-discrete-slider

David Zhubrev offers us a CollectionSlider() composable that implements a SeekBar-style horizontal slider. This one is designed for selecting specific values in a range or collection, with tick marks denoting the various possible choices.

Other Interesting Links

• GitHub: patrickgold / compose-tooltip (tooltips)
• GitHub: LennartEgb / vec2compose (CLI tool to create ImageVector)
• GitHub: warting / In-App-Update-Compose (alert users to available updates)