jetc.dev Newsletter Issue #129
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
#compose Slack thread!
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
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
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
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
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
- GitHub: warting / In-App-Update-Compose (alert users to available updates)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @firstname.lastname@example.org is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!