jetc.dev Newsletter Issue #48

Published: 2021-01-19

alpha10 is out! So, this week, we look at the release notes and see what changes are in store (focus, animation, and more). We also look at floating action menus, charts, and the Surface Duo. Plus, we look at the challenges we face when applying Compose UI in unusual situations, such as for implementing an input method.

…and we see how to ellipsize text.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Ellipsizing Text

With the classic TextView, we have ways to control how many lines are used for our text and what to do when we run out of room (e.g., append an ellipsis). BasicText() offers similar maxLines and overflow properties to control this behavior, as we see in this week’s highlighted Stack Overflow thread.

Matching the Parent’s Size

Box() has some convenient modifiers in its BoxScope, such as matchParentSize(), to cause a child to size itself based on the parent’s size. Those modifiers are only available on Box(), though. However, there are more flexible alternative solutions for the same problem, as we see in this week’s highlighted kotlinlang Slack thread.

Alpha Analysis

Reviewing the release notes for the latest Jetpack Compose update!

Compose Runtime alpha10 Release Notes

If you have written utilities or similar code that work at a low level with nodes, you may run into a breaking change in alpha10. There is a new batch API for applying changes to nodes, and apparently you do not have access to nodes until those changes get applied. The release notes mention a workaround using a SideEffect to defer execution of your code until the proper time.

Compose Foundation alpha10 Release Notes

FlowRow() and FlowColumn() were deprecated, with no replacements. Also, a bunch of specialty items were renamed, such as EditOperation to EditCommand.

Compose UI alpha10 Release Notes

Some focus-related improvements were released, including a focusOrder() modifier to let you control focus traversal. animate() is now animateAsState(), with a corresponding change in the return type to be a State rather than just the underlying type being animated. And there is a newAnimatable API.

Compose Material alpha10 Release Notes

We finally get disabled and read-only text fields, via enabled and readOnly parameters on BasicTextField() and its wrappers (e.g., TextField(), OutlinedTextField()).

Composable Commentary

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

Jetpack Compose Components (Part 2)

Siva Ganesh Kantamani continues his quick tour of major Compose UI elements, this time looking at Icon() and Image() for images, progress indicators, RadioButton(), Spacer(), and more.

Helping You Understand The Syntax of Jetpack Compose

Oussama Hafferssas takes a look at the Kotlin syntax used by Compose and discusses how much of it is ordinary, if sophisticated, Kotlin programming. No magic required!

Video: Pagination with Jetpack Compose

Mitch Tabian adds to his lengthy roster of Compose screencasts with a look at Paging for Compose, using it to drive a UI backed by a paged API for accessing a roster of recipes.

Building a Multi-Action Floating Action Button in Jetpack Compose

Joe Birch returns, this time taking a look at the floating action menu pattern and how to implement one in Compose UI, complete with a translucent overlay, custom menu images and captions, and more!

Customize a Compose for Desktop AlertDialog

Thomas Kuenneth continues documenting his Compose for Desktop experiences, this time with a look at showing desktop dialogs and shows how AlertDialog() gives you a lot of control… which you need to get the dialog to look and work correctly. Thomas also has another post up this week, continuing his examination of the Canvas() API in Compose UI.

Shapes in Jetpack Compose

Rasul Aghakishiyev returns with another look at using lower-level shape APIs in Compose UI, including a brief look at a triangular SeekBar-style UI element.

Compose (UI) beyond the UI (Part I): big changes

Jordi Saumell takes a more strategic look at Compose and Compose UI, pointing out various aspects of traditional Android app development that are likely to change a lot in the coming years.

How to Create Realistic UI with Jetpack Compose (Part II)

Kruti Kamani brings us another tour of setting up a Compose UI project and creating a UI, in this case showing a catalog of various types of flowers.

Resource Roundup

100% pure code!

GitHub: tehras / charts

Taras Koshkin offers up a demonstration of implementing composables for common chart formats, including line, bar, and pie charts.

GitHub: TheCodeMonks / TopCorn2

The Code Monks bring us a Compose UI app to display movie listings, pulled from IMDB’s Web service.

GitHub: microsoft / surface-duo-compose-samples

In 2020, Microsoft released the Surface Duo, an Android-powered dual-screen device. Microsoft has been pretty good about making code samples available to show how to work with those dual screens, and this repo contains Compose UI-specific examples.

GitHub: joreilly / chip-8

John O’Reilly is back, this time with a Kotlin/Multiplatform port of Cedric Beust’s Chip-8 game emulator. John’s version supports iOS via SwiftUI, plus Android and the desktop using Compose UI.

…And One More Thing

Right now, the focus is on using Compose UI for traditional activity/fragment-style Android app screens. This is perfectly reasonable, as those screens are the backbone of most apps.

However, View gets used in a number of other places and other ways. Over time, we will need to identify which of those can be adapted to work with Compose UI.

For example, GitHub/Stack Overflow user Yannick has been experimenting with Compose UI… for an InputMethodService. We should be perfectly capable of creating soft keyboards using Compose UI, as that is all in-process UI rendering (as opposed to app widgets or other use cases for RemoteViews). However, Compose UI needs some lifecycle support, and Yannick ran into problems with that. Not only does InputMethodService not offer any Lifecycle-related APIs, but we cannot even use something like LifecycleService, as that is set to extend Service, not InputMethodService.

Yannick eventually figured out how to grab code from ComponentActivity to create an InputMethodService with support for LifecycleOwner, ViewModelStoreOwner, and SavedStateRegistryOwner. This GitHub repo contains Yannick’s results.

Other areas will need similar treatment. In the “Resource Roundup” section, I pointed out Microsoft demonstrating using Compose UI for the Surface Duo’s dual screens. I expect to do some work tying Compose UI into Presentation for external display support (monitors, projectors, etc.). And, undoubtedly, there will be other use cases for this sort of solution.

We might get official support for these atypical View consumers from Google. But, in many cases, I suspect that we will not. For example, I will be surprised (but pleased) if Google offered an official rendition of Yannick’s solution for InputMethodService. Google does not have infinite amount of development time, and so the “long tail” of View consumers may get neglected. It will be up to the Yannicks of the world — the Android developer ecosystem — to fill in the gaps.

What I do hope for is some official guidance for the general approach to take for filling in those gaps. While Yannick’s approach looks reasonable, there may be some subtle API nuances that Yannick and I are missing, ones that may prove important over time.