jetc.dev Newsletter Issue #153
This week, we look at the latest updates to Compose, including the rarely-mentioned TV project.
We also explore modifier order and coding styles. We cope with wonky touch events, work with effects, and secure our dialogs against screenshots. And we capture signatures, perhaps as part of an overall form.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Compiler is up to
1.4.2, with support for Kotlin 1.8.10.
Compose Runtime Tracing is up to
1.0.0-alpha02, though it is unclear if any
tooling exists to use it.
In terms of Compose itself, we are up to
1.4.0-beta01, which suggests that
we will get a
1.4.0 stable release well before the traditional Google I|O timeframe.
We now have access to a
ComposeNodeLifecycleCallback to find out the lifecycle
of composition nodes. However, beyond that, the changes were mostly some minor
renames of things and a few new experimental test APIs.
Wear Compose got a
1.4.2 patch release to fix an optimization issue with
ScalingLazyListState.centerItemIndex. We also got a
with a new
PickerGroup() to, um, group pickers.
Also, the slowly-simmering TV project is up to
1.0.0-alpha04. It appears as
though this library is focused on Material3, as
androidx.tv.material was renamed to
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
A general rule in Compose UI work: if you aren’t getting what you want, try shuffling the order of modifiers around. In this case, the order of applying a border and applying padding matters a great deal, as we see in this week’s highlighted Stack Overflow question.
Coding styles are not just a product of a programming language — sometimes,
frameworks have their own styles that differ from the language norm. In Compose’s
case, that is best illustrated with the role of the trailing lambda. See why Compose’s
“this is where the child composables go” style differs from the
“this is my primary event listener” style you might use elsewhere in this week’s
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
Google’s Jolanda Verhoef looks at the three phases of Compose UI rendering: composition, layout, and drawing. Jolanda explains the role of each phase, what goes on in that phase, and how your composables and modifiers fit in. This is also covered in the associated Medium post
Vinay Gaba is back, gazing into the depths of space… er, sorry, make that
Vinay compares and contrasts
Spacer() with using the
padding() modifier, showing
the differences between them. Vinay also describes his approach of “space hoisting”,
moving decisions of the space between screen components to the screen itself, rather
than having components be aware of inter-component spacing.
While the title is rather clickbait-y, The Android Developer has written an interesting post. The pitfall in question is the impact of overlapping composables on touch events. Creating a screen that overlays another screen is easy enough… until you realize that your touch events are passing through gaps in the top screen to the bottom one.
Tristan Elliott looks at applying Twitter’s ktlint rules to your Compose project, and what sorts of coding mistakes they catch.
Alex Styl returns, looking at effects, from
DisposableEffect(). Alex also points out how you might be able to avoid the need
for an effect, plus how to get your hands on a suitable
CoroutineScope for use
in your composables.
Skyler De Francesca looks at leveraging
AndroidView() to turn a legacy
into a composable. While the samples explore wrapping
TextView(), the same
techniques can be applied to more likely candidates, such as video players (e.g., ExoPlayer).
Kamran Shahid covers a topic near and dear to me: how to secure composables against
screenshots. Compose windows and dialogs can employ a
maps to the venerable
FLAG_SECURE approach in Compose for Android.
Other Interesting Links
- Video: Re-Compose your UI: building an atomic design library
- Medium: Writing Instrumented Tests Using Hilt And Jetpack Compose
- Medium: Splash Screen with Jetpack Compose: Side-Effects & How to Use Them
- Jetpack Compose: A use case for view interop migration strategy
- Medium: Jetpack Compose: What’s a Scaffold?
- Animated Counter in Jetpack Compose
- Medium: Creating testable UI using Jetpack Compose
- Medium: Do-It-Yourself Compose Multiplatform Navigation with Decompose
- Medium: Tab Row made easy in Jetpack Compose
- Medium: Generic collapsing layout with Jetpack Compose
- Medium: Clustering With Maps Compose For Android
- Medium: Compose Destinations — An effortless way to navigate in Jetpack Compose
- Medium: Jetpack Compose: How to implement Fade Out scroll effect in Horizontal Pager
- Video: Android app performance with Perfetto
- Medium: Guia — Jetpack Compose Navigation
- Medium: Hacking the Compose Bottom sheet
- About Window size class libraries
- Medium: Fun with State in Jetpack Compose
- Medium: Speed Up Your Jetpack Compose Development With the Compose Helper IDE plugin
- Medium: Jetpack Compose Tutorial: Replicating Dribbble Audio App Part 3
- Background Color Transition Animation in Android Jetpack Compose
- Medium: [Part 2] Jetpack Compose — Preparing to Migrate Existing Layout to Compose
- Jetpack Compose vs XML: Android UI Development Compared
- Medium: Converting XML UI to Jetpack Compose
- Getting started with jetpack compose from XML
- Medium: Building a Personalized To-Do List App with Kotlin and Jetpack Compose
- Medium: Building a Stopwatch App with Jetpack Compose and Kotlin: A Step-by-Step Guide
- Slides: Adaptive Layout for Any Screen with Jetpack Compose
100% pure code!
Alessio Cameroni is assembling a library to fill in Material3 components that
are missing from Compose Material3 or are limited in some way. Right now, the library
includes things like
Benjamin Lüscher created a library to simplify the creation of typical vertically-oriented forms, complete with form validation. See this Medium post for more!
Other Interesting Links
- 2023-11-21: Compose/Material3/Wear Compose updates! remember()! Adaptive layouts! Compose Multiplatform in 2024! @firstname.lastname@example.org on BasicTextField2()! Compose Multiplatform charts! And... is TV Compose in trouble?!?
- 2023-11-14: Compose Compiler! BasicTextField2()! @email@example.com and animations! Optimization! @firstname.lastname@example.org, JetBrains, and Fleet! JetBrains and plotting! And... we collapse?!?
- 2023-11-07: Compose Multiplatform! Chips in fields! Diffing! Custom fonts in Glance app widgets! Heatmaps! PIN input! And @email@example.com is in a bit of a haze?!?