jetc.dev Newsletter Issue #174
Published: 2023-07-25
This week, we look at Compose Compiler 1.5.0 and what it adds… and what it deprecates.
We also look at debouncing and droidcon San Francisco. We hear about Google’s take on composable APIs and performance. We peek more closely at a molecule, build ourselves a timeline, and consider swiping right on a fragment-friendly Compose navigation library.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Compiler is up to 1.5.0
, with support for Kotlin 1.9.0 and experimental support
for the K2 compiler. However, support for named arguments to a lambda expression
has been deprecated, apparently due to K2 limitations.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can We Properly Use PivotOffsets?
TvLazyRow()
supports PivotOffsets
, a way to fix the focus position on the screen
and have the content scroll as the user navigates via their D-pad. However, by default,
that fixed position is no longer fixed once we reach the end of the focusable content,
such as reaching the end of a row of cards. See how to use a non-focusable trailing
element to address this in this week’s highlighted Stack Overflow question.
Where Should You Debounce?
Should we put debounce logic in the composable or the viewmodel? See a few different
approaches for placing it in the viewmodel, and arguments for not placing it in the composable,
in this week’s highlighted Kotlinlang #compose
Slack thread.
Droidcon San Francisco 2023
The droidcon team published conference videos from their 2023 San Francisco event. Compose-related presentations include:
- Awaiting Content Changes with Jetpack Compose
- Building a Component Library in Compose for a Large-Scale Banking Application
- Compose-View Interop in Practice
- Creative Coding with Compose the Next Chapter
- Developing Apps Optimized for WearOS with Jetpack Compose
- Find Your Way with GoogleMap() {}
- Opening the Shutter on Snapshots
- Panel Discussion Adopting Jetpack Compose @ Scale
- Practical Compose Navigation with a Red Siren
- Reimagining Text Fields in Compose
- Unlocking the Power of Shaders in Android with AGSL and Jetpack Compose
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
API Guidelines for @Composable components in Jetpack Compose
Google moved their naming and style rules for composables to GitHub and updated them. While these rules may not completely match your environment, it may be worthwhile to still review them and understand the rationale behind those choices.
Podcast: Compose Performance
The Android Developers Backstage podcast brought in Chuck Jazdzewski, George Mount, and Leland Richardson to talk about Compose performance and the performance of apps built atop of Compose.
A stable, multiplatform Molecule 1.0
Molecule is CashApp’s library for using composables
for emitting states on a StateFlow
. Jake Wharton announced the 1.0 stable release,
including Kotlin/Multiplatform support and an Immediate
recomposition mode.
Medium: Rich UI Models in Android using MVVM and Jetpack Compose
Mahmoud Afarideh examines merging a “view model” (the data to be rendered into a view)
with the composable for doing that rendering, leveraging a interface
that wraps
all of that. The result is that you leverage a @Composable
-annotated invoke()
, which
renders its content based on the data inside its data class
properties.
Medium: A Step-by-Step Guide to Building a Timeline Component with Jetpack Compose
Vita Sokolova walks us through everything that is needed for a “timeline” component:
a list of items that are visually connected via a vertical line. The implementation
leveraged the drawBehind()
modifier for the timeline itself (dots connected by lines),
modifying the core elements that made up the list.
Medium: Threads Invitation Card with Jetpack Compose
Caner Kaşeler used Compose UI to reproduce the invitation card UI used in Meta’s Threads app. This UI is a ticket-shaped card that uses a flip animation to show content on each side. Caner’s post focuses on the animation part, showing how to rotate the card based on drag gestures.
Jetpack Compose for Maps
Darryl Bayliss takes a deep dive into Google Maps for Compose, from simply rendering a map to showing markers and customizing info windows, animating the map, and integrating Street View.
Other Interesting Links
- Building High Quality Android UI: Embracing Test Driven Development with Jetpack Compose
- How to Inject Navigation Argument Directly into View Model with Jetpack Compose and Hilt
- InputChip in Jetpack Compose (with Examples)
- Jetpack Compose Effect Handlers
- Jetpack Compose Modifiers
- Jetpack Compose UI Architecture
- Lazy Columns And Rows for Android TV with Jetpack Compose
- Medium: Adapting UI with Jetpack Compose: Phones, Tablets, Folding Devices
- Medium: How To Implement Paging3 With The Jetpack Compose Lazy Column And Android Room
- Medium: Jetpack Compose rememberSaveable: Simplifying State Persistence for Seamless User Experience
- Medium: Jetpack Compose Trick— The hidden secret of the weight modifier
- Medium: Jetpack Compose — HorizontalPager
- Medium: Jetpack Compose — The order of modifiers does matter
- Relay And Jetpack Compose : Simplifying Android UI
- Screen Transition Animations with Jetpack Navigation
- Screenshot Testing on the JVM. Thanks to Paparazzi.
Resource Roundup
100% pure code!
GitHub: Aghajari / LazySwipeCards
GitHub user Aghajari implemented a Tinder-style stack of cards, where the top card can be swiped off to the left or right. There are many configuration options, from the content and count to the animation spec and swipe threshold.
GitHub: GRizzi91 / bouquet
GitHub user GRizzi91 brings us a PDF viewer, based on the platform PdfRenderer
. You
get separate composables and states for horizontal or vertical viewing, along with a
range of sources for getting the PDF content.
GitHub: open-turo / nibel
The Turo Open Source team created another navigation system for Compose UI. This time, though, fragments are first-class participants, for seamless navigation between fragments and composables. It also support multi-module navigation. See this Medium post for more!
GitHub: nabla-run / Compose-gallery-picker
GitHub user nabla-run created a composable image cropper, connected to your choice
of a platform gallery app or a supplied GalleryPicker()
.
Other Interesting Links
- Composable Color Converter
- Gist: LennyLizowzskiy / Bitmappable.kt (render composable to bitmap)
- Gist: OTP Viewer for Jetpack compose
- GitHub: hamooo90 / jalali-datepicker-compose (Jalali/Persian calendar date picker)
- GitHub: JoelKanyi / KomposeCountryCodePicker (country code picker)
- GitHub: mahozad / wavy-slider (
SeekBar
, but wiggly)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?