jetc.dev Newsletter Issue #54

Published: 2021-03-02

The beta01 release is out! So, this week, we look at the beta launch materials from Google and the release notes for the beta01 artifacts. We also look at more charting and navigation libraries, plus continue spending time in (app) bars.

Launch Look

Peeking at what Google announced with the beta release!

Announcing Jetpack Compose Beta!

This was the official blog post for the release of beta01 of Jetpack Compose. It includes links to many new training resources, the latest edition of the #AndroidDevChallenge, a testing cheatsheet, and more.

Jetpack Compose Documentation

The documentation for Compose and Compose UI was overhauled and extended, with updated codelabs and examples.

Video: Jetpack Compose Beta Overview

Google’s Nick Butcher released a video providing a general overview of where we are with the Compose and Compose UI beta release, including basic composable assembly and testing.

#TheAndroidShow: Jetpack Compose Screencasts

This YouTube playlist contains several short screencasts of Compose UI development, including state management, animation, accessibility, and testing.

Beta Breakdown

Reviewing the release notes for the latest Jetpack Compose update!

Compose Runtime Beta 1 Release Notes

They added @ReadOnlyComposable, which presumably offers some optimizations over a regular @Composable. Providers was renamed to CompositionLocalProvider and had substantial API changes.

Compose Foundation Beta 1 Release Notes

The big one here, that will break lots of code, is that preferredWidth() / preferredHeight() / preferredSize() were renamed to width() / height() / size(). The former width() / height() / size() modifiers are now requiredWidth() / requiredHeight() / requiredSize().

If you were using Scaffold() or other uses of DrawerState, note that open() and close() are now suspend functions, presumably because animations use coroutines. Use rememberCoroutineScope() to get a suitable scope for launching those coroutines.

Also, MeasureBlocks was renamed to MeasurePolicy, and InteractionState was replaced by InteractionSource and had a bunch of API changes. Plus, zoomable() is now transformable().

There are a lot more changes here — read the release notes!

Compose UI Beta 1 Release Notes

tapGestureFilter() was removed, replaced by pointerInput() and detectTapGestures(). imageResource() and vectorResource() are now extension functions on the companion objects for ImageBitmap and ImageVector, respectively. AnimationClockObservable and AnimatedFloat are gone.

Compose Material Beta 1 Release Notes

Switch(), Checkbox(), and RadioButton() now support null values for their action lambdas. Slider() can now be enabled or disabled. There is a new TextFieldColors interface to define different colors for different states of TextField and OutlinedTextField. And a ton of other things were renamed (e.g., BottomDrawerLayout is BottomDrawer). You are going to want to read these release notes!

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why So Negative?

Legacy container classes, notably RelativeLayout, supported negative margins. Compose UI does not support negative padding, but the offset() modifier offers an alternative, as we see in this week’s highlighted Stack Overflow question.

Death to AppCompat!

While Compose UI has a transitive dependency upon AppCompat, that is not strictly needed, and you can work on removing it from your project, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Jetpack Compose for Desktop: Milestone 3 Released

JetBrains has released another milestone release for Compose for Desktop, including SVG support, improved Swing component interoperability, and official support for building IntelliJ IDEA plugins.

Video: Composing a Design System

Anton Shilov looks at design systems, how you might have implemented them with classic views, and how you can adapt those to the world of Compose UI. The slides are also available.

From Top to Bottom… Bars

Thomas Künneth’s third post on app bars briefly looks at at bottom app bars, both for action items and for bottom navigation.

Video: Animation with Jetpack Compose

All Techies returns, this time with a short screencast reviewing animation APIs in Compose UI.

Resource Roundup

100% pure code!

GitHub: staakk / cchart

Charting libraries are a popular Compose UI category, and GitHub user staakk provides us another one, offering a variety of chart styles (bar, line, point, etc.).

GitHub: Modificator / compose-navigator

Another popular library category for Compose UI. GitHub user Modificator offers up another navigation candidate, one that uses classes to represent “pages” (screens) that you can navigate to.

Gist: MachFour / ActionMenu.kt

With something like a TopAppBar(), you can add IconButton() widgets, perhaps triggering a DropDownMenu(). However, that is all managed manually, so if you want to take available screen space into account, you have to do that manually too. GitHub user MachFour offers an ActionMenu() that works a bit like menu resources and an action bar, where which items get toolbar buttons and which get moved to an overflow menu is based partly on spec and partly on available space.

GitHub: DroidKaigi / conference-app-2021

The DroidKaigi 2021 conference app is being built using Compose UI!

Gist: vganin / ComposableSwitcher.kt

For cases where you need to offer an animated switch between two composables, perhaps where using a navigation library is overkill, Vsevolod Ganin has you covered!

Gist: denis-ismailaj / LabelledCheckBox.kt

Unlike its View-based counterpart, the Checkbox() composable is just the box, without a label. Denis Ismailaj shows a LabelledCheckBox() that uses a Row(), Checkbox(), and Text() to implement a checkbox with an associated label.

…And One More Thing

As I hoped, Google is being reasonable about setting expectations regarding the Compose beta releases. In the release blog post, they wrote:

With this beta release, Compose is API complete and has all the features you need to build production-ready apps. Beta also means API stable, so we won’t change or remove APIs. Now is a great time to start learning Compose and begin planning for how you will use it in an upcoming project or feature once it reaches 1.0 later this year.

That third sentence is key: Google is not necessarily expecting you to ship products based on Compose at the present time. Nothing is stopping you from doing so if you wish, and if the available functionality matches your needs, great!

At the same time, Compose UI is very young. While it is remarkably broad for such a new initiative, there are many gaps. While Google says that Compose UI “has all the features you need to build production-ready apps”, that does not imply that it has everything that your designer wants.

If your project is developer-driven, such that app functionality and look-and-feel can be adjusted based on Compose UI capabilities, starting to use Compose seriously now is not unreasonable. Conversely, if you need to match particular designs, that may be easy or hard depending on how well Compose UI — and Compose Material — line up with those designs.

So, starting to use Compose “for realz” is possible, but it may or may not be the best plan for you and your project. Evaluate whether you can deal with any Compose UI limitations before you dive into trying to implement new designs or convert existing screens into composables.