jetc.dev Newsletter Issue #40

Published: 2020-11-17

alpha07 is out, and with it comes a bunch of API cleanup. In particular, renaming continues at a brisk pace, as Google starts organizing their composable roster.

This week, we look at alpha07, along with the broader issues around design systems in the Compose UI world. We also peek at testing, locale-switching, server-driven theming, and a bunch of composable icons! And, we try our hands at creating a crossword puzzle.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

What’s Our Configuration?

This week’s Stack Overflow question asks about finding out whether the UI is portrait or landscape. Probably that is the wrong question — it is better to focus on available height and width, to take into account a wider range of scenarios, such as split-screen and multi-window. But, sometimes you need to know the orientation for other reasons, or you need other elements of the configuration. For that, use ConfigurationAmbient.

Design Systems and Composable Names

As it did a couple of months ago, the question of composable names came up. This sort of thing usually comes in the form of: “Why is TextField() using Material Design? Shouldn’t that be MaterialTextField()?” In this week’s highlighted Slack thread, we explore more about Google’s thinking in this area and how some developers are trying to use base names, like TextField(), for their own custom design systems.

Also, due to a screwup on my part, those of you who got the newsletter via email received a broken link to last week’s “One Off the Slack” entry. I apologize for my mistake. Note to self: do not put apostrophes in URLs…

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Compose Compiler Alpha 7 Release Notes

Due to a change in metadata, “composable functions compiled with the alpha07 compiler will not be binary compatible with composable functions compiled with any earlier compiler version”. Be careful with third-party libraries and make sure they get updated!

Compose Runtime Alpha 7 Release Notes

We barely found out about @UnionType, and now it is deprecated. Also, LaunchedTask is now LaunchedEffect.

Compose Foundation Alpha 7 Release Notes

The original Text() is now BasicText(), and the new Text() is a material composable. Also, if you were using CoreText(), switch to BasicText(). BaseTextField() is now BasicTextField(), and CoreTextField() is now considered to be an internal API. A bunch of ambients (e.g., AmbientTextStyle and AmbientContentColor) were moved to material; if you are not using Material Design, you will need to create your own theming ambients. There were a lot of changes in this library — see the release notes for more!

Compose Material Alpha 7 Release Notes

The Emphasis ambient is being replaced with AmbientContentAlpha. TextField() now supports maxLines and KeyboardOptions.

Video: Prototyping with Jetpack Compose

Ben Oberkfell brings us a 45-minute presentation on mocking up a UI using Compose UI, specifically creating a crossword puzzle board based on the New York Times puzzles.

Video: Gaining Composure

Vishnu Rajeevan delivered a Chicago Roboto presentation reviewing Compose UI, with a particular emphasis on how state management differs from the View-based approaches that we are used to.

Testing the New Jetpack Compose

Gabriel Baker wrote up a short post outlining how to write and run tests for your composables!

Android Jetpack Compose: Navigation

Sergio Belda gives us a quick tour of Jetpack Navigation for Compose and how to use it to offer navigation between a set of composables.

Switching Locales with Jetpack Compose

Localazy is a service for helping translate and localize your app. Their Android SDK includes being able to switch locales on the fly within your app. Václav Hodek of Localazy wrote up a post showing how to integrate their SDK into your Compose UI app.

Server-Driven Theming in Jetpack Compose

Adam Bennett returns, this time with a post exploring how to create dynamic themes in Compose UI, particularly with the theme colors being returned by a server.

Video: Let’s Build with Compose!

Joe Birch is back, this time with a DevFest Italia presentation on assembling a Compose UI-based app.

Jetpack Compose - How To Show Dialog

Phuc Tran offers up a short post outlining how to create a Compose UI project and have a composable display a dialog.

Jetpack Compose: Intro & Basic Layouts

Bevan Steele brings us another quick roundup of the fundamentals of getting a Compose UI interface set up.

Resource Roundup

100% pure code!

GitHub - DevSrSouza / compose-icons

Gabriel Souza used his svg-to-compose code to bulk-convert a few free icon packs into composables, akin to how we have the Material Design icon set available to us as composables.

…And One More Thing

Google is continuing to clean up the Compose UI API to center around design systems.

As I covered previously, a Compose design system is basically a set of composables that implement the core building blocks of your designers’ desired aesthetics. If your designers want buttons with a particular background color, shape, and border, you create a composable that defines such a button, so the rest of your code can then just use that composable. If the designers change their minds and tweak what that button should look like, you change the button composable in your design system, and everything else automatically adopts the change.

In the end, it appears that we will be getting roughly three categories of composables in Compose UI:

• Composables that do not draw anything themselves. Key examples of this are your containers: Box(), Row(), Column(), LazyColumnFor(), etc. While a design system will use these composables, usually you do not need a CompanyBox() or a DesignRow() that somehow embodies design rules.

• Composables that handle basic operations and are unopinionated (and perhaps are a bit plain as a result). It appears that Google is standardizing on Basic as a prefix, so we get BasicText(), BasicTextField(), etc.

• Composables that implement Material Design as a design system based on those Basic composables. So, Text() and TextField() are now material composables and adhere to Material Design aesthetics. These offer limited flexibility, specifically because they are supposed to adhere to Material Design rules.

If your designers are sticking pretty close to Material Design, your project’s design system can be based on the material composables, wrapping them to configure them for project design standards. If your designers are ignoring Material Design, your project’s design system will be based on the Basic family of composables, wrapping them to apply your desired aesthetic.

Google’s apparent objective is for teams to use package names to distinguish composables from different design systems. For example, you might have org.awesome.compose.design.Text() that wraps the material edition of Text(), so you can still use Text() as the composable name. That, in turn, will drive the creation of Lint rules to help ensure that only the design system uses the material edition of Text(), as auto-complete may cause developers to accidentally use that instead of the design system’s Text().

Personally, unless we get some really good tutorials or other solutions for creating and maintaining those Lint rules, my guess is that projects will lean towards AwesomeText(), with a prefix denoting the design system, to better distinguish the design system’s composables from those supplied by Compose UI. There is a bit more discussion of this point in this week’s “One Off the Slack” entry.

Regardless, I think the Basic cleanup is a good move. The more that material can be a true design system atop of Basic, the more likely it is that teams will have success creating their own similar design systems.