jetc.dev Newsletter Issue #64
beta06 is out!
However, the theme for the week is “where Compose?”, as we see Compose applied to the
Web, the terminal, and for GraphViz file generation. Plus there are hints of a
wear-compose library in our future.
Beyond that, we look at using Compose from Java (eek!), nested navigation graphs, and some more composable libraries. Plus, we peek at the I|O schedule and see what Compose-related sessions are available.
Reviewing the release notes for the latest Jetpack Compose update!
Google I|O is being held two weeks after the
beta06 release shipped. The
fact that the naming is still ‘beta’, and that there were a few interesting
beta06, suggest that Compose is not going to be declared stable
at Google I|O.
compose-uiimproved accessibility support and added some new
Font()overloads for different places to load fonts from. Plus,
compose-materialhas switched to the platform
RippleDrawablefor ripples — this should not cause code changes but may introduce subtle bugs, so check your ripples!
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
As part of migrating to Compose UI, some projects first have a challenge of not being completely implemented in Kotlin. Suppose you have a Java-based activity — is there a way to render composables inside of it, without converting it to Kotlin? See two approaches to the problem in this week’s highlighted Stack Overflow question!
Sometimes, we will have a
LazyColumn() where we want significantly different
content based on some navigation or similar affordances within the app. Updating
LazyColumn() with different content is easy… but what if we want back-
and forward-style navigation. How do we return the UI not only to the right
content but to the right scroll position? Learn more in this week’s highlighted
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
Compose continues its cross-platform assault with Compose for Web, from the fine folk at JetBrains. Partly, this is a Compose-based means to create DOMs for Web content, using standard HTML elements. Partly, this is an attempt to replicate bits and pieces of the Compose UI/Compose Material widget set, layered atop the DOM (i.e., not trying to render to a canvas). This is in its very earliest stages, but this is an interesting new target for Compose-style development.
What Compose for Web helps to illustrate is that Compose is not tied to classic
widget-based UI — generating trees of HTML elements is well within scope.
Arunkumar Sampathkumar illustrates that further by showing how to use Compose
(not Compose UI) to create GraphViz
dot files that describe
graphs to be rendered. Along the way, Arunkumar peels back the covers a bit on
how Compose creates these trees and what differs from a Compose UI target from
a GraphViz target.
Jorge Castillo wrote an excellent thread on Twitter — represented here as a Threadreader unroll — expanding upon Arunkumar’s analysis. If you want to learn more about the Compose compiler, slot tables, appliers, and related internals, this is a great week for you!
Joe Birch is back and continues an analysis of Navigation for Compose. Jetpack Navigation has supported nested navigation graphs from the beginning, and Navigation for Compose offers them as well. This post walks through why you might want nested nav graphs, how to set them up and link them, and how they relate to Joe’s previous material on having Navigation for Compose span multiple modules.
In this post, Rahul Sainani uses
CompositionLocal to “inject” rules for different dimensions
and typography into composables, to isolate size-specific concerns and better support a range
of phone sizes. Along the way, Rahul throws shade at tablets.
A few weeks ago, we saw JetBrains’ Sebastian Aigner’s implementation of the classic arcade game “Asteroids” using Compose for Desktop. Sebastian now has a pair of posts, starting with this one, explaining in greater detail about how the game came about and was implemented.
Siva Ganesh Kantamani continues a tour of Compose UI, this time looking at the use
Scaffold() for displaying snackbars, along with how to use the Compose UI
AlertDialog() function for displaying modal dialog boxes.
Adam Bennett spotted an AOSP contribution
that indicates that we will be getting a
wear-compose library in the future,
with composables set to implement the Wear Material Design spec (TIL that Wear
has a Material Design spec).
Other Interesting Links
- Adding a PIN screen with biometric authentication in Jetpack Compose
- Video: Jetpack Compose for Games & Animations
- Canvas Made Easy In Jetpack Compose
- Video: Comparing Jetpack Compose and SwiftUI: Fun with Declarative UIs
- How to use Multiple Bottom-sheets in Android Compose
- Jetpack Compose – Don’t throw your presenters off
- Bottom Navigation and Navigation Drawer Using Scaffold from Jetpack Compose
- Lists and Grids in Jetpack Compose
- Android Jetpack Compose Basics & App Review
- Video: Introduction - Jetpack Compose
100% pure code!
In a week filled with “take Compose to new places”, Jake Wharton has released a library that amounts to “Compose for Console”, allowing you to create rich terminal output using composables. Personally, as an old guy, I am holding out for “Compose for DOS”.
A popular UI metaphor on some platforms is “swipe to reveal”, where a row or
card can be swiped to the side to expose actions. Alexander Karkossa has
published a library with a
RevealSwipe() composable for implementing this same
sort of pattern in Compose UI.
Ayoub Ben Khemis released a library with some small composables for implementing
a circular progress indicator, including
circular “percent-complete” sorts of presentations.
…And One More Thing
Google I|O is coming up, on May 18-20. And, surprisingly, there is not a lot of live content clearly related to Jetpack Compose.
The overall keynote might mention it, but probably not much, as that is usually focused on end-user products and services. The developer keynote might mention it, but probably not much, as that is for all Google developer topics, and it is only 45 minutes long. The What’s New in Android session probably mentions it, but that presentation is only 30 minutes long, and Android 12 is likely to get the bulk of that time.
So, expect a “shout out” or two to Compose in there somewhere, but probably not a lot more.
In terms of Compose-specific live content, we have:
Another Compose basics workshop
Yet another Compose basics workshop
Beyond that, we have a few events with perhaps a bit of Compose:
A Day 3 live chat with Android developers that, inexplicably, has no link on the event Web site
Not everything will be live. “What’s new in Jetpack Compose” is one of many sessions labeled as “on-demand”, and it is unclear exactly when those will be available for viewing. The way that the main content page is laid out suggests that they will be available as soon as I|O starts. “Using Jetpack libraries in Compose”, “Build beautiful Material Design apps with Jetpack Compose”, and “Designing for accessibility in Android Studio and Jetpack Compose” are other Compose-focused on-demand sessions.
This being Google I|O, it is not out of the question that they will announce new sessions at the keynotes, and it is possible that those new sessions will include something tied to Compose. Statistically, though, it is more likely that the items listed above are our primary bits of Compose content in Google I|O.
To put things in perspective, there is more content on Flutter than there is on Compose. 🤔
Still, we are likely to get some good information out of these sessions, and I encourage you to make the most of them! Remember: if you want to ask questions, particularly at the AMA sessions, you need to reserve a virtual seat!
- 2021-06-08: beta08! Effects! Compose for Desktop! Navigation! Progress indicators! @MarkIAllison on foldables! And... fruit?!?
- 2021-06-01: Inside the compiler plugin! @zachklipp on reactive state and snapshots! Lottie! Kotlin/Native! Internationalization! And... app widgets?!?
- 2021-05-25: Google IO 2021! beta07! Mixing text and composables! State holders! Staggered grids! Bazel! And... digital wellbeing?!?