Newsletter Issue #35

Published: 2020-10-13

This week, we look at staggered grids, screenshot testing, tooltips, and split-pane UIs. Plus, we see how Compose UI is getting a bit more secure in an upcoming release.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Staggered Grid Implementations

Staggered grids are a popular UI pattern. With the classic View system, we used things like StaggeredGridLayoutManager with RecyclerView. In Compose UI, we can create a custom Layout() for our staggered grid, as we see in this week’s highlighted Stack Overflow question.

I Heard You Like Columns…

Compose UI has both Column() and LazyColumnFor(). One developer asked “why?”. We explore the answer in this week’s highlighted Slack thread.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Jetpack Compose Screenshot Testing with Shot

Shot is a Gradle plugin for assisting with screenshot testing. In this article, Pedro Gómez describes how Shot now supports Compose, allowing you to create screenshot diffs to see where your test results differ visually from those in prior runs.

Video: Jetpack Compose Basics for Beginners

Kilo Loco recorded a presentation on getting started with Compose UI, leading up to a composable implementing a simple form.

Android Jetpack Compose — Navigation

Long-term, the Jetpack Navigation component will be a popular solution for navigating between screens in Compose-based apps. António Valente shows us how we can use it in the short term, with simple fragment wrappers around composables representing screens, as an interim solution until native Compose support is available for Navigation.

Setup first Jetpack Compose App from scratch

Elye published a Medium post with the basic steps for starting a new project using Compose UI. This appears to be the first in a planned series of posts on starting out with Compose.

What is Jetpack Compose in Android?

Vanshika Singolia wrote a post providing an overview of Compose and its role in Android app development.

What is Declarative UI?

Hafiz Rahman brings us a short piece exploring the definition of a “declarative UI”, the paradigm on which Compose (and Swift UI and React and Flutter and…) are all based.

Resource Roundup

100% pure code!

GitHub: skydoves / Orchestra

Jaewoong Eum returns with a library of composables, including tooltip-style balloons, a Spinner-style drop-down list, and a color picker.

GitHub: alexjlockwood / android-2048-compose

Alex Lockwood is back, this time with a Compose UI implementation of the game 2048. The whole set of composables requires fewer than 500 lines of code!

GitHub: davideC00 / CardStack

GitHub user davideC00 brings us an app with a Compose UI demo of Tinder-style swipeable cards, with an eye towards perhaps making it a library in the future.

Gist: noe / splitview.kt

Noe Casas offers up a short SplitView() composable, dividing the screen into upper and lower portions, with a draggable divider to re-allocate the space between those two panes.

…And One More Thing

Sometimes, prayers are answered.

One important element of Android app security is FLAG_SECURE. You can add it to a window to block screenshots being taken of the window, to protect sensitive user content (passwords, account numbers, etc.). But FLAG_SECURE is per window, and some things in our View-based UIs are child windows: dialogs, menus, toasts, and so on. Unfortunately, the code creating those child windows failed to pass along FLAG_SECURE.

Early versions of Compose UI suffered from the same problem.

FLAG_SECURE is one of those flags that should get propagated to child windows. After all, if we want to protect a window, UI elements that happen to require child windows should be protected by default. But, Compose UI was not doing that, just as the View counterparts did not do that.

So, I filed tickets to get FLAG_SECURE to be passed along to child windows for two Compose UI scenarios: PopupWindow() and Dialog(). At the time, those were the only two places that I saw child windows being created.

I filed them nearly a year ago and had assumed they were lost in the shuffle.

Much to my surprise and great relief, they were addressed in early October.

After the change ships (alpha05?), I will run some tests to confirm that it works, plus I will check to see if there are other child windows added since last November that need similar treatment.

I am elated that these were fixed, and I am very grateful to the Compose team for taking the time to fix them!