jetc.dev Newsletter Issue #153

Published: 2023-02-14

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 1.2.0-alpha04 release, 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 androidx.tv.material3.

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 highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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 Spacer(). 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 LaunchedEffect() through SideEffect() and 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 View 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 SecureFlagPolicy, which 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

Resource Roundup

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 SectionTitle(), DropDownMenuTitle(), and SupportInfoText().

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 (LazyRow()-based pager)