jetc.dev Newsletter Issue #51

Published: 2021-02-09

This week, we take a look at images and how they get scaled and zoomed. We explore navigation some more, both in terms of Navigation for Compose and alternatives for Compose for Desktop. We also review the main container composables and decide whether ConstraintLayout() is essential.

And, if you read all the way to the end… I’m looking for your feedback on this newsletter!

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

ConstraintLayout() vs. Row() and Column()

With the classic view system, we were told to avoid nested LinearLayout containers and use ConstraintLayout. With Compose UI, though, ConstraintLayout() seems overly tedious. Google’s Ryan Mentley gives you permission to use Row() and Column() instead, in this week’s highlighted Stack Overflow question.

Where to Debounce?

State management in Compose is more flexible than what we are used to in the classic View system, even if it means that we have to handle more of it ourselves (e.g., text entered into a field). We also need to think about where to put the sorts of custom logic that we used with callbacks and listeners, such as debouncing user input events, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Zoomable Image with Jetpack Compose

Dmitrii Kachan brings us a post looking at the zoomable() modifier and how we can use that as the foundation for rendering an Image() with pinch-to-zoom capabilities, along with panning and asynchronous image loading using Glide.

Jetpack Compose Image Content ScaleType Fully Illustrated

Elye is back, this time with a post exploring the Alignment and ContentScale types, as used with parameters to Image(). The post has a great set of illustrations showing the effects of different values, and it compares and contrasts how Compose UI handles image scaling compared to the ScaleType options used with ImageView in the classic view system.

A Comprehensive Hundred-Line Navigation for Jetpack/Desktop Compose

Arkadii Ivanov returns with another post examining multiplatform navigation options. This time, he demonstrates a basic navigation system, designed for use by Compose for Desktop, since Google’s Navigation for Compose is Android-specific.

Navigation in a Pure Jetpack Compose Project - Part #2

Karan Dillion returns with a follow-up to his earlier Navigation for Compose post. Here, Karan shows tying navigation into the bottom nav option for a Scaffold(), to switch between screens.

Getting ready for Declarative UIs — Part 1 — Unidirectional Data Flow

Raul Hernandez Lopez takes a step back from composables and looks at the rest of the core UI architecture. Compose can be used with any architecture, but it is well-designed for use with a unidirectional data flow. Raul takes a look at what “unidirectional data flow” really means and how we implement one, with an eye towards having Compose render the UI derived from that data flow.

How to Display Data from Firestore using Jetpack Compose

Alex Mamo tackles a subject that does not get written about much: how to render Compose UIs where the data comes from Firebase. In this case, Alex looks at Firestore, blending it with Hilt and coroutines to fetch data from a Firestore-backed repository and render it in a simple list.

The State of JVM Desktop Frameworks: Jetpack Compose for Desktop

Nicolas Fränkel has been writing a series of posts on implementing desktop apps using various JVM technologies, from older options like Swing to JavaFX/TornadoFX. This time, he looks at the current Compose for Desktop alpha, comparing its results to the other frameworks that he has reviewed.

Jetpack Compose: Layouts

Alex Zhukovich gives us a quick tour of major container composables, including Row(), Column(), Box(), and ConstraintLayout(). Alex also explores common parameters, such as alignment and arrangement, and popular modifiers for these containers.

A Simple Binary To Decimal Converter App In Jetpack Compose

Rick Regan takes us through a simple Compose UI app, one that converts binary values to decimal, to show the basics of state management and driving UI changes based on user input that modifies that state.

Resource Roundup

100% pure code!

GitHub: CzarqR / GithubViewer

GitHub user CzarqR created a Compose UI-based app for examining GitHub itself. It uses GitHub’ Web service API to allow for searching repositories and users by name, along with maintaining a local list of bookmarks for items of interest.

GitHub: ked4ma / ComposeColorTool

GitHub user ked4ma wrote a sample app that lets you dynamically modify its theme colors, using a color picker. The objective is to help you visualize how various composables use the theme’s roster of colors.

Gist: loloof64 / Animation.kt

Laurent Bernabé returns with another animation sample, this time eschewing user input and focusing purely on animating a yellow ball across a red background.

…And One More Thing

This issue wraps up the first year of this newsletter.

When I originally created the newsletter, it was supposed to be in support of some broader Jetpack Compose work that I had been planning. Right now, that work is on indefinite hold, and it is likely that it will never happen.

So, this seems like a fine time to take stock and see whether this newsletter should continue.

I would love to hear what you think! In particular:

• Is this newsletter worthwhile to you?

• What recommendations do you have on making it better?

I cannot promise that I will be able to implement all the recommendations. For example, my newsletter publishing platform is Revue, and it does not support monospace fonts. As such, I cannot directly include extended code snippets without them looking pretty nasty, or having to possibly convert them into images.

But, if you have feedback, please send it to me! If you are getting the actual email newsletter, there should be thumbs-up and thumbs-down buttons just below the body of the newsletter. Not only can you cast a vote, but you get a text box where you can provide specific feedback. Or, reach out via email or Twitter.