jetc.dev Newsletter Issue #95
This week, we look at detecting touch events in a composable and removing jank from an animation. We poke at slot tables and the slot-based API, and we learn more about semantics. We visit another Navigation for Compose replacement library and a gist to turn us all into blockheads. And I ponder converting XML drawable resources into composables.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Many composables support the
clickable() modifier to detect simple click events.
However, what if you have a larger area and need to know the coordinates of touch
events within there? The
pointerInput() modifier and
detectTapGestures() are here
to help, as we see in this week’s highlighted Stack Overflow question.
As we have seen a lot in this newsletter, excess recompositions is a major source
of jank and general poor performance. See how a very slight tweak is a composable
can dramatically improve the performance of an animation, in this week’s highlighted
#compose Slack thread!
Posts, videos, and other new information related to Jetpack Compose!
Chris Banes provides an overview of the rationale and use of Compose’s slot-based API, where a composable takes other composables as parameters. The objective is to reduce the responsibility of any individual composable, delegating other responsibility to the supplied composables.
A couple of weeks ago I mentioned a pair of droidcon London 2021 presentations on Compose UI. At the time, the droidcon site was misbehaving, and I could not see the other presentations. That has since been fixed, and there were three other presentations on Compose UI:
- Julien Salvi: Exploring Jetpack Compose Canvas
- Dmytro Shuba: Testing Jetpack Compose UI
- Robert Williams: Backstack to the Future
Pankaj Raj points out that using the right key in your
make a lot of difference in the performance, particularly for mutable lists where items
might stay the same but change position within the list. Keys allow Compose to detect
those moves and avoid unnecessarily re-creating composables.
Bryan Herbst delivered a presentation on the role of semantics in Compose UI, both for
accessibility and for testing. Bryan published the slides, reviewing the use of
Modifier.semantics() and how those semantics get mapped into
objects for use by TalkBack and similar accessibility services.
Other Interesting Links
- SideEffects and Effects Handling in Jetpack Compose
- Making Complex UIs using Jetpack Compose. Building Leadership App
- Safe Compose arguments: An improved way to navigate in Jetpack Compose — Part 3
- Firebase, Login with Facebook in Jetpack Compose
- Advanced Form Operations in Jetpack Compose
- Medium: Creating a Toggle-able List Layout in Jetpack Compose!
- Medium: Network Connectivity on Modern Android Development with Jetpack Compose
- Medium: Playing with Jetpack Compose States & Flow
- Medium: Jetpack Compose Basics for Beginners
100% pure code!
The team from Mobnetic created an
AdvancedPreview() composable, designed to wrap
a function for use with
AdvancedPreview() gives you more options for rendering
the preview, and more importantly makes the resulting image available outside of the IDE preview
pane (e.g., as screenshots for documentation).
Petr Shubin created another replacement for Navigation for Compose, with a wide array of features, including deeplink and arguments support, support for multiple modules, support for sheets/tabs/dialogs, and more.
Google’s Zach Klippenstein created a set of composables that combine to wrap
some composable (say, an
Image()) around a cube (like, say,
the avatars for certain members of Block).
GitHub user Copper Leaf created a library for processing strings with inline markup.
The library then provides converters from that single markup syntax to
AnnotatedString (for Compose UI), and ANSI codes (for terminal use).
Other Interesting Links
…And One More Thing
I will be tossing out ideas for tools and libraries from time to time here — this is one of those.
For a lot of developers, the “magic” tool would be something that could convert
a layout resource into composables. There have been some experiments to that effect.
However, that is a massive undertaking, even if we limit ourselves to framework and
Jetpack widgets. The sheer volume of view properties alone is daunting, let alone
working out how to map, say, the rules of
TableLayout into composables. It is doable,
but it is a lot of work. If you start adding in data binding and arbitrary third-party
views, and it gets even worse.
However, there seems to be a reasonable chunk of “low-hanging fruit” in the resource space that could be migrated to composables more easily. One would be XML-defined drawable resources.
Most of the XML drawables implement fairly simple rules:
LayerListDrawablestacks N other drawables on the Z axis
LevelListDrawablechooses a drawable from a list of candidates based on a supplied “level”
ClipDrawableclips a drawable,
RotateDrawablerotates a drawable, etc.
And so on
VectorDrawable is complex, but given that we have SVG-to-composable tools,
there is a decent chance that creating a composable from a
VectorDrawable is not
Are these “life altering” sorts of tools? No. But, for developers looking to move to a pure Compose UI setup, these tools could be useful options. They would be of particular interest to developers looking to use Compose outside of Android (e.g., Compose for Desktop), since Android resources are only useful for Android.
- 2022-06-14: Recomposition! Animations! Performance! Design systems! Navigation! PINs! And, where are all the Google Play composable SDKs?!?
- 2022-06-07: beta03! How Google Maps and Twitter moved to Compose! AlertDialog()! Design systems! Slot APIs! Templates, inside and outside the IDE!
- 2022-05-31: Lazy grids! Pull-to-refresh! Sensor-based parallax! Compose compiler metrics reports! Collapsing top bars! Design systems! And... a snake?!? 🐍