jetc.dev Newsletter Issue #62

Published: 2021-04-27

beta05 shipped, with relatively few changes!

Beyond that, we look at migrating to Compose, creating lists with all sorts of stuff in them, and try to make sense of effects. We also see a library for material chips and a project template for IntelliJ plugins using Compose for Desktop.

Plus, a special guest appearance by JetBrains’ Roman Elizarov! Or, at least, he popped into the #compose channel in Slack, to help explain why we need to type @ a lot with Compose.

Beta Breakdown

Reviewing the release notes for the latest Jetpack Compose update!

By and large, beta05 was a fairly quiet release, but there still were a few changes worth pointing out.

If you are using the ui-test-manifest or ui-tooling-data artifacts, they have been updated to support Android 12 a bit better, as is noted in the compose-runtime release notes.

The compose-foundation release notes point out that FlingBehavior now has the @Stable annotation. If you have created a custom implementation of FlingBehavior, be sure that it complies with the rules for @Stable classes.

And, strangely, there are new experimental APIs in a beta, related to focus management and text input selection, as is mentioned in the compose-ui release notes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

drawableStart Equivalent in TextField()

With EditText, we have android:drawableStart and android:drawableEnd to add icons inside the text field. With TextField(), we have leadingIcon and trailingIcon, as we see in this week’s highlighted Stack Overflow question.

Why is @Composable an Annotation?

This comes up a lot: why did Jetpack Compose use a @Composable annotation instead of adding a composable keyword? After all, coroutines added suspend. We get the answer from JetBrains’ head of Kotlin in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Lessons Learned When Migrating My App to Jetpack Compose

Igor Escodro leads off with a walkthrough of the lessons learned while migrating an existing app to Compose UI, including various stumbles along the way.

Creating a Heterogeneous List with Jetpack Compose

A lot of examples of scrolling lists focus on simple cases, where every row in the list has the same basic structure. Often, though, we need a mixed set of rows, such as headers and detail rows. In the first of two posts in this week’s newsletter, Francesc Vilarino Guell explores how we handled such heterogenous lists with RecyclerView and how much simpler this is with the LazyColumn() builder API.

Video: Side Effects & Effect Handlers

Effects are one of the more confusing aspects of Compose development. In this screencast, Phillipp Lackner explores this area, including DisposableEffect and LaunchedEffect.

Handling User Selectable Themes in Jetpack Compose

Every Compose UI-based app will wind up defining a theme. Francesc Vilarino Guell demonstrates how to have that theme be chosen by the user, backed by SharedPreferences, and driving how our composables get rendered.

Navigation Drawer Using Jetpack Compose

Avanish Agarwal explores using Scaffold() in conjunction with Navigation for Compose to set up a nav drawer and display different composables based on what the user clicks there.

Jetpack Compose: Building a Generic Grid Canvas

Patxi Bocos wanted to make a composable in the style of the IntelliJ IDEA splash screen with a grid of colored circles and circle segments. This week’s post follows up from Patxi’s original post and looks at how to implement a flexible grid structure atop a Compose Canvas().

Why Declarative UIs on Android?

Raul Hernandez Lopez asks a popular question: why? 🤔

More specifically, Raul explores why we need a declarative UI for Android, contrasting it with imperative UI systems (like views and layouts) and exploring how each get implemented in a unidirectional data flow (UDF) architecture.

Real-Time Lifecycle-Aware Updates in Jetpack Compose

Denis Rudenko is back, with a review of how composables and coroutines interact. In particular, Denis looks at the lifecycle ramifications of observing a Flow, both for simple I/O and for real-time continuous data updates.

Implementing a Number Pad in Jetpack Compose

While usually we want to use standard Android keyboards for data entry, sometimes we have a need for custom text entry keypad. Thomas Künneth walks through how to set up a numeric keypad in this fashion, with click handlers to find out what the user types.

Other Interesting Links

• Handling lifecycle events on Jetpack Compose
• Using State in Jetpack Compose
• Managing State in Compose
• Pi Practice App in Compose
• Complex UI in Jetpack Compose
• Learning Live Templates for Jetpack Compose

Resource Roundup

100% pure code!

GitHub: compose-museum / SimpleTags

GitHub user compose-museum wrote a library offering material chips (“tags”), with text, associated icons, background colors, and a slot for a click listener.

GitHub: c5inco / Compose-Desktop-Plugin-Template

Google’s Chris Sinco crafted a project template that creates a Compose for Desktop project that implements an IntelliJ plugin, for extending IDEA, Android Studio, etc.

GitHub: joreilly / StarWars

John O’Reilly is back, this time with a Kotlin/Multiplatform sample app, with SwiftUI and Compose UI, that uses GraphQL to display information from the Star Wars database. It is unclear why John released this now versus waiting for May 4th, though. 😁

GitHub: Tlaster / Swiper

GitHub user Tlaster returns, this time with another library offering another take on the swipe-to-dismiss UI pattern.

Gist: vganin / FlexRow.kt

Vsevolod Ganin brings us a code snippet for a “flow row” (i.e., a row whose contents wrap when it runs out of horizontal space).

…And One More Thing

Jetpack Compose still has a lot of bugs. While many of those issue tracker entries are not actual bugs (feature requests, random questions, etc.), many of them are bugs. For example, text entry has problems with non-GBoard keyboards.

If you are experimenting with Compose UI, you are likely to run into some problems. When you do:

• Check to see if there is a bug report for it

• If there is none, file a bug report with a sample app that reproduces the problem

Far too many issues filed on Google’s issue tracker lack that sort of sample app. While the Compose team does an exemplary job with such issues, it still slows their response time.

There is a good chance that Google is going to consider the May 5 beta06 to be the last beta release, with the final 1.0.0 version shipping during Google I|O. Any bugs that we find and report now would then get addressed in 1.0.x patch releases or perhaps a 1.1 alpha. However, the more details that we can provide about the bug, the more likely it is that Google can fix the bug faster.

Conversely, not providing a project that reproduces the error – or at the very least the source of a composable – means that the Compose team will need to create their own project, and they may have difficulty reproducing your problem.

In other words, the easiest way for Google to help you (by fixing bugs) is for you to help Google (by providing clear ways to reproduce the bugs).