jetc.dev Newsletter Issue #64

Published: 2021-05-11

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 possible 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.

Beta Breakdown

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 changes in beta06, suggest that Compose is not going to be declared stable at Google I|O.

Of note:

• compose-ui improved accessibility support and added some new Font() overloads for different places to load fonts from. Plus, TextFieldValue.Saver now supports AnnotatedString.

• compose-material has switched to the platform RippleDrawable for 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 the 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 Kotlinlang #compose Slack thread.

Composable Commentary

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 of 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

Resource Roundup

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 ComposeVerticalSlider() composable that implements a vertical SeekBar-style “choose a value in a range” UI element.

GitHub: ayoubbk / Compose-Circular-Progress-View

Ayoub Ben Khemis released a library with some small composables for implementing a circular progress indicator, including drawDeterminateProgressView() for 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:

• A Compose basics workshop

• A Compose AMA

• Another Compose basics workshop

• Yet another Compose basics workshop

Beyond that, we have a few events with perhaps a bit of Compose:

• A Jetpack AMA

• A “Developer Tools and Languages” AMA

• “What’s new in Material Design”

• 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!