jetc.dev Newsletter Issue #75

Published: 2021-07-27

It was a bit of a quiet week, in the days preceding the 1.0.0 stable release of Compose. But, we look at the intersection of state, events, and navigation. We peek at Google’s work-in-progress “Link” tool for helping you debug your ConstraintLayout and MotionLayout rules. We examine an alternative navigation framework and how to make our composables more responsive to screen sizes. And I ramble a bit on the technology adoption life cycle and how Compose adoption might play out in the coming years.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Increase Size of Selected Bottom Navigation Item

Sometimes, designers get… creative. In this case, the designer called for the selected item in a bottom nav bar to be double the width of the other items. Fortunately, that is possible courtesy of the weight() modifier, as we see in this week’s highlighted Stack Overflow question.

State, Events, and Navigation

Is navigation an event? Yes! Is the result of navigation a state? Also yes! We examine how these relate, and where a state holder like a ViewModel comes into play, in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Podcast: Jetpack Compose Graphics & Animation

Android Developers Backstage continues their series on Compose UI, this time talking with Doris Liu and Nader Jawad of Google, exploring the design goals and implementation of Compose UI’s graphics layer, including animations.

How to Use Link

The ConstraintLayout team at Google has created a debug utility, in the spirit of tools like Flipper, to let you examine the details of a ConstraintLayout or MotionLayout being used in a composable live in your app. You can not only view the constraints and their results, but you can edit them in real time!

Video: Runtime Permissions with Jetpack Compose

Adam McNeilly takes a look at runtime permissions. Requesting permissions needs to be done from an activity, and so our composables will need to manage that request. Adam looks at how that is done, for single and multiple permissions, plus examines edge cases, such as when the user rejects your request for a permission.

Medium: Using Exoplayer in LazyColumn

Shashank Mishra not only wanted to show a list of videos in a column, but also to have one of the videos play automatically using ExoPlayer. This post examines how Shashank pulled that off, including dealing with activity lifecycle events.

How to create a Navigation Drawer with Jetpack Compose

John Codeos is back, this time with a quick overview of setting up a Scaffold(), populating a navigation drawer with items, and navigating to different screens from those items via Navigation for Compose.

Other Interesting Links

• Medium: Tricky refactoring of Jetpack Compose code — be careful with side effects
• Jetpack Compose Navigation and Passing Data in Android]
• Video: Build a Book App In With Jetpack Compose

Resource Roundup

100% pure code!

GitHub: adrielcafe / voyager

Adriel Café released Voyager, an extensive navigation framework for Compose UI. The result is comparable feature-wise to the official Navigation for Compose, but with richer parameter passing and customizable screen transitions. Compose for Desktop support is in the works.

GitHub: hitanshu-dhawan / CircularProgressBar-Compose

Usually, a circular progress bar is indeterminate, just serving as a “loading spinner”. Hitanshu Dhawan created a determinate circular progress bar, allowing you to control not only the percentage complete, but width of the bar and its background, the starting angle position, and more!

GitHub: s1rius / android-nest-scroll-ptr

GitHub user s1rius contributed a pull-to-refresh library, with implementations for both Compose UI and for the classic View system.

GitHub: SteadfastInnovation / ComposeResponsiveLayoutGrid

Vedant Mehta and the team at Steadfast Innovation created a ResponsiveBox() composable that packages up the Material Design responsive grid pattern. It handles the calculations of the number of grid columns and their size, plus gives you a high-level representation of screen size (phone, tablet, etc.). The idea is that you would branch off to different composables based on needing a tweaked design for larger screen sizes. This Medium post outlines its usage.

…And One More Thing

By the time you read this, the Jetpack Compose 1.0.0 final release will be but a day away, most likely. For a special release like this, they might deviate from their normal Wednesday release day, to be earlier or later as needed.

This will eliminate one of the last lingering external blockers to adoption of Compose UI in your app: pre-release status. Some who have been burned by previous Jetpack library 1.0.0 releases might take a harder line and wait for patch releases or 1.1.0 before proceeding. However, your management team might have been balking at using a beta release, and that particular problem will vanish very soon.

So now even more teams are going to be starting to think about using Compose UI, whether migrating from existing view-based UIs or starting with Compose “from scratch” for a new project.

It is not essential that you take on Compose UI right away. Views will work tomorrow as well as they did yesterday. You will want to take the time to plan out where and how you will start using it.

However, slowly, the pressure will ramp up for your project to be using Compose. Externally, some of that pressure will come from Google, and some of that pressure will come from candidates you recruit to fill open positions on the team. Internally, that pressure will come from teammates who want to be early adopters of cool technology.

While the technology adoption lifecycle bell curve is just a model, it does help to illustrate how this sort of thing evolves. Right now, I will argue that we are moving from “innovators” into “early adopters”, in tandem with the first stable Compose UI release. My current predictions are:

• By this time in 2022, we will start to transition into the “early majority” phase

• By this time in 2024, we will be making the turn into “late majority”

• By early 2026, all that will be left will be “laggards”

The end of 2026 seems like a long way away… but if you are reading this newsletter, my guess is that you are hoping not to be too late to the Compose UI party. Maybe your team is already using Compose UI, or perhaps you are trying to figure out when to start introducing it. In some future newsletters, I will use this space to talk through some of the decisions that you will need to make and what sorts of “tech debt” you will need to retire to help make your Compose adoption a success.