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!
Can We Use Compose UI From Java?
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!
Saving Multiple States for a List
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!
Technology Preview: Jetpack Compose for Web
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.
Jetpack Compose for Non UI - Tree construction and source code generation
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.
Twitter Thread: Jorge Castillo on Compose Internals
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!
A Practical Introduction to Jetpack Compose Android Apps
Vinay Gaba returns, this time with a long article providing a quick run-through of the major Compose elements, for those new to Compose.
Nested Navigation Graphs in Jetpack Compose
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.
Supporting Different Screen Sizes on Android with Jetpack Compose
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.
How I built an “Asteroids” game using Jetpack Compose for Desktop
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.
Design Snackbars and Alert Dialogs in Jetpack Compose
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.
Signs of wear-compose
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!
GitHub: JakeWharton / mosaic
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”.
GitHub: ch4rl3x / RevealSwipe
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.
GitHub: aakarshrestha / compose-vertical-slider
Aakar Shrestha published a small library with a
composable that implements a vertical
SeekBar-style “choose a value in a range”
GitHub: ayoubbk / Compose-Circular-Progress-View
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!
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!