jetc.dev Newsletter Issue #68

Published: 2021-06-08

beta08 is out… with breaking changes! 😞

Beyond that, we see that Compose sometimes is black-and-white, explore more with navigation and custom progress indicators, get some custom views code-generated for our composables, and enjoy sliced fruit. Plus, with Compose for Desktop’s next update available, I look back to see how some earlier predictions of Compose targets are holding up.

Beta Breakdown

Reviewing the release notes for the latest Jetpack Compose update!

This update had more changes than is desirable for a late beta release, let alone for a complex framework that is weeks away from a scheduled stable release, such as:

• State<T> is now State<out T>

• compose-ui moved a bunch of enums to inline class, among other changes

• In compose-material, Card() and Surface() now consume clicks, so you need to use new variants of those composables that accept onClick parameters

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

De-Colorizing an Image

While some people want to add color to old black-and-white images, sometimes developers need to go in the opposite direction. We can remove color via a ColorMatrix and the colorFilter parameter on Image(), as we see in this week’s highlighted Stack Overflow question.

Effects of Effects

LaunchedEffect. DisposableEffect. SideEffect. Knowing what those effects do and when to use them can get tricky, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Compose for Desktop: Milestone 4 Released

JetBrains released an update for Compose for Desktop, complete with a new window API, better support for pointer events and tooltips, undo/redo support for text entry fields, and general rendering improvements.

Video: Where Did My Jetpack Compose Modifier Go?

Adam McNeilly is back, with a short screencast outlining a common question: why can I use a particular modifier in one place and not another? The answer is in the form of scopes: the objects that serve as the receivers for the content lambda expressions that we use with common composables.

Scalable Jetpack Compose Navigation

Lachlan McKee wanted to use Navigation for Compose, but he grew concerned with the potential for a NavHost to become a “god object”, if it has to be able to navigate everywhere. In this post, Lachlan explores using Hilt to decouple route registration, such as having one route factory on a per-feature-module basis.

Jetpack Compose: Navigating to a Detail View (Part III)

Waseef Akhtar continues an exploration of Compose, this time applying Navigation for Compose to get from a list of content to a detail screen for an individual item.

Exploring Jetpack Compose Animations

Abhishek Dewan offers a quick rundown of how AnimatedVisibility works, to provide a custom transition between two composables, such as a transition between showing all content and the results of some sort of search or filter operation.

Custom Progress Bar in Jetpack Compose (Progress Bar with Gradient)

Andrey Molochko wanted a progress bar that used a gradient instead of a fixed color to depict the amount of progress. Andrey’s approach uses a pair of Box() composables, one of which uses Brush.horizontalGradient() for its background.

Video: How to Make an Animated Circular Progress Bar in Jetpack Compose

Continuing on the theme of progress indicators, Philipp Lackner returns with another take on a progress bar, this one built using a Canvas() and an animated effect to show transitions to a particular progress level.

How to Create Bottom Navigation Bar with Jetpack Compose

John Codeos brings us a tutorial for setting up a Scaffold() with a top bar and a bottom navigation bar. John then uses Navigation for Compose to navigate between screens from that bottom navigation bar.

Compose – List / Detail: Foldables

Mark Allison is back, continuing a look at the list/detail UI pattern. This time around, Mark looks at how to align the “split point” between the two patterns based on the hinge of a foldable, so the UI can transition between patterns based on fold/unfold actions.

Other Interesting Links

• Creating a Curved Scroll View with Jetpack Compose
• Kotlin Compiler Plugins and Binaries on Multiplatform
• Goodbye, RecyclerView Adapters — Hello, Lists in Jetpack Compose

Resource Roundup

100% pure code!

GitHub: tylerbwong / truss

Tyler Wong is back, bringing us a KSP-based code generator! This one creates custom View subclasses wrapping composables that you annotate with @BridgeView. This can help as part of a migration from a pre-Compose UI to a Compose-based one.

GitHub: jeziellago / multinavcompose

Jeziel Lago also returns, this time with a library to assist in having Navigation for Compose work across modules in a multi-module project.

GitHub: CuriousNikhil / neumorphic-compose

Not everyone is enamored with Material Design, and designers sometimes hop onto other design trends, such as skeuomorphism or “neuomorphism”. Nikhil Chaudhari, being curious, created a neumorphic() modifier to adjust the shadows on existing composables to apply a neumorphic look to them.

GitHub: ch8n / Compose-Fruit-Ninja

Chetan Gupta apparently likes fruit that is sliced, chopped, and occasionally pureed… and so created a Fruit Ninja clone using Compose for Desktop.

…And One More Thing

About seven months ago, I wrote a blog post about where Compose could go. This was written after the first milestone release of Compose for Desktop shipped, and I ran down some other possible Compose targets:

• Web: I pointed out that JetBrains appeared to be working on this, and they did indeed release a Compose for Web recently. I had expected that it would take the Skia canvas approach; instead, they are focused more on composables manipulating the DOM. In other words, this is Compose, not Compose UI/Compose Material.

• iOS: I was not expecting much here. As usual, Jake Wharton pushed the envelope, demonstrating composables driving a UIKit interface. Once again, this is Compose, not Compose UI/Compose Material.

• Chrome OS: As I wrote then, we have both Android and Linux options, so we are in reasonable shape here. It will be interesting if somebody does create a Compose for Web variant that uses the Skia canvas, with an eye towards using it for Chrome OS, Chrome extensions, or other “installed” Web apps.

• Fuchsia: Since I wrote that post, Fuchsia is slowly being rolled out to the Google Home Hub. However, there is still little sign of third-party apps, let alone ones that might be based on Compose.

The real fun is with “Platform X”. Here is what I wrote then:

If you were trying to create a new platform, to compete with the desktop, mobile, and Web options that we have today, your new platform will need apps. Adopting one of the cross-platform options (React, Flutter, Compose) would help a fair bit in getting developers interested in trying your platform, at least for conventional apps. For gaming-centric platforms, trying to adopt Unity 3D or similar cross-platform game engines would be the likely starting point.

If Google alone were pursing Compose, it would likely be an Android thing and that’s it. The fact that JetBrains has apparently decided to make Compose a focus area means that Compose is going to go further than just Android devices. We will have to see how well that turns out — after all, there is no guarantee that Compose will succeed beyond Android. But it has a lot of promise, and it will be interesting to see how the next 12 months or so play out!

To me the real power of Jake’s iOS demo, or Jake’s mosaic, or even Google’s likely forthcoming Compose for App Widgets, is to further demonstrate how we can drive UI with Compose without that UI being defined by Compose. Some Compose targets include Compose UI/Compose Material (Android, desktop). Some do not (iOS, terminal, app widgets). Some do not now but could, as an option, in the future (Web).

So, if you are creating Platform X, you can adopt Compose and decide the level of Compose support that you want:

• Composables, but to drive your own UI framework
• Composables, using a canvas to give you Compose UI/Compose Material support
• A “combo play”, where you offer your own UI composables but also support the canvas

These non-Material Compose targets demonstrate that the first option is viable and is not necessarily all that difficult. It is arcane — there are only a few people who know how to pull this off. But, given enough interest, the arcane can be codified, documented, and supported.

It will be interesting to see where else Compose goes and who might adopt it for some never-seen-before platform.