jetc.dev Newsletter Issue #35
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
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
LazyColumnFor(). One developer asked “why?”.
We explore the answer in this week’s highlighted Slack thread.
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.
100% pure code!
GitHub: skydoves / Orchestra
Jaewoong Eum returns with a library of composables, including tooltip-style balloons,
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
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
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:
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!
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @email@example.com is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!