jetc.dev Newsletter Issue #73

Published: 2021-07-13

Will tomorrow see the stable 1.0.0 for Compose? 😰

In the meantime, we spend some time on focus concerns and filling the viewport. We continue poking at navigation, experiment with screenshot testing for animations, and look at a reorderable list implementation. And I wonder a bit about how many vendors will get on the cross-platform Compose bandwagon.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Requesting the Focus

If a field is a key element of some composable, you may want to automatically put the focus there and (if needed) show the soft keyboard when you navigate to that composable. You can accomplish this via a FocusRequester and LocalSoftwareKeyboardController, as we see in this week’s highlighted Stack Overflow question.

Filling the Viewport

We want a composable to fill the available space, yet still be scrollable. android:fillViewport often is the solution in the classic View system. See how to implement a similar effect in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Alex Zhukovich is back, delivering a presentation to DutchAUG on navigating between screens using Compose UI and Navigation for Compose, including navigation parameters, deep links, and more! The slides are also available.

Video: Adopting Jetpack Compose

Joe Birch returns, this time with a GDG Johannesburg presentation on how to use Compose UI as part of a larger Android app based on the classic View system. Joe walks us through ComposeView() for embedding composables in view hierarchies and AndroidView() for embedding View-based classes in a composable.

Medium: Part 3, UI Widgets From Scratch in Jetpack Compose

Sergey Nes continues a tour of custom composables, this time adding swipe and flip animations to the deck of cards from last week’s Part 2, along with drag gesture support.

Video: Clean Architecture with Jetpack Compose

Divya Jain delivered a droidcon presentation reviewing the basics of applying a unidirectional data flow architecture in Compose UI and its relationship to Clean Architecture. The slides are also available.

Collapsing app bars are a fine UI pattern in many cases, though they can be a bit tricky to get right. Catalin Ghita walks us through implementing one in Compose Material, using custom calculations to determine the size of the content in the app bar based on the scroll position of an associated LazyColumn().

Compose: UI Screenshot Testing

Mark Allison continues a tour of testing in Compose, this time looking at using screenshot testing to test animations, by comparing old and new bitmaps and detecting relevant differences. The post includes an updated SnapshotComparator, based on one found in the official Rally sample app.

Creating a Retro-Style Game with Jetpack Compose: Level Completed

Thomas Künneth wraps up a series of posts on writing retro text-grid games using Compose UI, exploring how to add more state to the game, such as completing levels and resetting the game to its original state.

Medium: Custom Slider in Jetpack Compose

Piotr Prus needed a SeekBar-style composable with tick marks and labels. Unfortunately, Compose Material’s Slider() does not offer these, so Piotr used a Canvas() to add those elements.

Medium: Instagram-Like Particles Animation Using Jetpack Compose

Instagram has its “rising emojis” animation as part of handling reactions. Andrei Belous wanted a similar capability in a Compose UI-based app. Andrei demonstrates how to pull this off, handling both the vertical “rising” effect and the fade-in/fade-out effect.

Resource Roundup

100% pure code!

GitHub: Vivecstel / Jetpack-Compose-Playground

GitHub user Vivecstel is maintaining a project with a massive number of composable samples — close to 200 at this point. Most are tied to Compose UI and Compose Material samples, but there are others focused on state management, integration with Activity and ViewModel, and more!

GitHub: aclassen / JetpackComposeLazyReorderList

Andre Claßen has a basic implementation of a reorderable() modifier to apply to a LazyColumn() or LazyRow(), to be able to allow users to reorder the list contents via drag-and-drop!

Gist: DevSrSouza / GtkTheme.kt

Gabriel Souza put together a quick sample showing how a Compose for Desktop Linux app can react to Gnome desktop theme changes, specifically for light/dark modes.

GitHub: crjacinro / compose-path-finding

Dijkstra’s Algorithm is a popular approach towards finding the shortest path between graph nodes. Serge Nino Martin Villasica illustrates Dijkstra’s Algorithm using Compose UI, drawing a 2D grid with random “walls”, then computing a path from designated start and end squares in the grid.

…And One More Thing

One challenge with Compose for cross-platform development is dealing with dependencies. Many of the libraries that you might be using for Android app development will not work with Compose for Desktop, let alone Compose for Web or other possibilities. They will be tied too tightly to Android.

In some cases, those libraries represent UI concerns: widgets, screens, etc. Many of those will get Compose UI equivalents in time, but “in time” might not be in time for your deadlines.

The bigger long-term problem may be from all those commercial add-ons that you use: the bug reporters, the analytics collectors, the payment integrations, and so on. How well they play with cross-platform Compose will depend on those vendors. How many of them offer support for desktop operating systems, for example? And, for those that do, how many of them offer that with an eye towards being used by desktop apps, as opposed to being used by Web apps that happen to have servers on those platforms?

As with every new platform or cross-platform framework, this is an opportunity for vendors and a pain point for adoptees. Those vendors who backed Flutter likely gained customers over competitors who made Flutter integration aggravating. A similar dynamic will play out with cross-platform Compose: which vendors will embrace it, and which will ignore it?

For “greenfield” cross-platform Compose projects, it will be far easier to choose vendors who already have a Kotlin/Multiplatform story. For projects considering to migrate to cross-platform Compose, it may make sense to evaluate your current vendor selection and see which ones may need to be swapped out to be able to support all your desired OS targets.

Featured here? Please add this badge to your article or repo!

Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.

Recent Issues:

All Issues

Spread the Word!

Suggestions?

If you have ideas for items for future newsletter editions, reach out via email or contact Mark Murphy on kotlinlang Slack!