jetc.dev Newsletter Issue #44

Published: 2020-12-15

This week, we spend a lot of time looking at LazyColumnFor(), plus some custom composables for picking colors or auto-completing fields. And, we look at some interesting Modifier syntax and explore using those techniques in our own code outside of Compose.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

What is the ItemDecoration for Jetpack Compose LazyColumn?

RecyclerView offers ItemDecoration, for controlling things like per-item padding or dividers. Elye explores the Compose UI counterpart, in this week’s highlighted Stack Overflow question.

Conditional Modifiers

What if your mix of modifiers for a composable varies based on input? For example, suppose you want a modifier in some circumstances but not others? For that, there is then(), as we see in this week’s highlighted Kotlinlang Slack thread.

Composable Commentary

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

Video: Jetpack Compose: Broadening Horizons

Pankaj Raj delivered an 80-minute presentation for GDG Hyderabad, reviewing how to get started with Compose UI for building UIs, focusing the demonstration on scrolling list with LazyColumnFor() and related composables.

How to Make a RecyclerView in Jetpack Compose

Ian Alexander takes a look at LazyColumnFor() and compares it to RecyclerView to see which is simpler. Spoiler alert: Compose UI wins.

RecyclerView and LazyColumnFor in Jetpack Compose

Elye returns with another comparison of RecyclerView and LazyColumnFor(), in this case showing the same list-of-cards UI using both techniques.

Jetpack Compose Components (Part 1)

Siva Ganesh Kantamani offers another review of how to get started with Compose UI, from the Gradle setup through basic composables like Row() and Column().

Daily Life with Jetpack Compose Part 1

Thanh Phu offers two Compose UI code snippets, one for embedding a WebView in a composable and one for starting an activity from a composable. Both rely on ContextAmbient.current and so will require some revision on newer versions of the Compose libraries (it is now AmbientContext).

Resource Roundup

100% pure code!

GitHub: serbelga / ComposeColorPicker

Sergio Belda Galbis brings us a color picker composable, showing a grid of colors, ready to be embedded in your UI (samples include a dialog and a bottom sheet presentation).

Gist: Kshitij09 / ComposeAutoCompleteTextField.kt

GitHub user Kshitij09 created a composable that fills the same sort of role that AutoCompleteTextField does in the classic View system. This one uses LazyColumn() to wrap the field and items, and LaunchedEffect() to get the items to show in that list after a one-second delay.

GitHub: kirill-grouchnikov / aurora

Long ago, Kirill Grouchnikov created Radiance, a collection of Java libraries (later adapted to Kotlin) for “for writing modern, elegant and fast Swing applications”. He has started Aurora for a similar collection of composables, with an eye towards Compose for Desktop.

…And One More Thing

One of the side themes that we have with Compose is how Compose is going to be used for more than traditional Android UIs. For example, Google apparently created a spike solution for defining and updating a RemoteViews using composables. In the end, composables simply build up a tree of nodes; what those nodes represent and what you do with the resulting tree is up to you. Others have already experimented with building up Web page DOMs and the like using composables.

However, we will also be learning other things from Google’s work on Compose.

For example, in this week’s highlighted Kotlinlang Slack thread, we saw some interesting Modifier chain syntax:

Modifier
  .size(64.dp)
  .then(if (enabled) Modifier.clickable(onClick = {}) else Modifier)
  .padding(8.dp)

Modifier chains are very expressive and simple to assemble. They are also fairly easy to implement, typically in the form of an extension function on Modifier itself. We can even arrange for modifiers to only be available in certain scopes, such as RowScope-defined Modifier functions that are only available inside of a Row().

The thing is: Modifier itself is not composable. There does not appear to be anything related to Modifier that is tied to the Compose Kotlin compiler plugin and its associated “compiler magic”. This is just ordinary Kotlin.

So, I expect that some of us will look to Modifier and see how to create similar fluent extensible APIs that can be used in other areas, having little to do with Compose itself.