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!
How Can I Have Both a Border and Padding?
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.
Why Do Compose Coding Styles Differ from Kotlin’s?
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!
Video: From data to UI: Compose phases - MAD Skills
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
Hundreds of thousands of developers are learning Jetpack Compose
This is a promotional piece put out by the Android team, describing the Compose Camp series and how it helped developers get up to speed on Compose UI.
Space Hoisting: Should I use the padding Modifier or the Spacer composable?
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.
Medium: Beware of this pitfall in Jetpack Compose!
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.
Writing cleaner Jetpack Compose code with the Twitter Compose Ruleset
Tristan Elliott looks at applying Twitter’s ktlint rules to your Compose project, and what sorts of coding mistakes they catch.
Everything you need to know about Side Effects in Jetpack Compose with examples
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.
Jetpack Compose: Converting Traditional Android Views into Reusable 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).
Medium: Securing Sensitive Information on Jetpack Compose’s AlertDialog: Preventing Screenshots
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!
GitHub: JoelKanyi / ComposeSignature
Joel Kanyi is back, this time with a library to help you collect written signatures
in a drawing area, then capturing the result as an
ImageBitmap for later use.
GitHub: alessiocameroni / pixely-components
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
GitHub: benjamin-luescher / compose-form
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!
GitHub: ningyuv / CircularSeekBar
GitHub user ningyuv created a circular seek bar, with control over colors, start/end angles, line weight, dot size, and more!
Other Interesting Links
- GitHub: mataku / MiddleEllipsisText (
Text()replacement with middle ellipsis)
- GitHub: sjthn / ComposeNavigations (navigation library)
- GitHub: tim06 / Ratingbar (rating bar)
- GitHub: owaistnt / ComposeViewPager (
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-03-14: Compose RC! Wear Compose alpha! Grayscale composables! Updating our Compose dependencies! MVVM! Bottom sheets! And... another Figma-to-composable plugin?!?
- 2023-02-28: Updates to the Compose family of artifacts! Layout()! UiAutomator! Pull-to-refresh! @email@example.com on adding animation sizzle! ExoPlayer! PIN entry! And... @firstname.lastname@example.org is on TV?!?
- 2023-02-21: Modifiers! Drawing! Errors! Paging (and testing paging)! QR codes! KMM templates! And a correction from @email@example.com!