jetc.dev Newsletter Issue #73
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
LocalSoftwareKeyboardController, as we see in this week’s highlighted Stack Overflow
Filling the Viewport
We want a composable to fill the available space, yet still be scrollable.
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.
Posts, videos, and other new information related to Jetpack Compose!
Video: Jetpack Compose: Navigation
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
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 Toolbar Made Easy with Compose
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
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
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.
Other Interesting Links
- Jetpack Compose Animations in Real Time
- Video: Jetpack Compose - Styling Texts
- Medium: Custom views in Jetpack Compose (Interoperability) — Part 1
- Medium: Add Compose in XML (Interoperability) — Part 2
- Video: Expandable Card with Animation - Jetpack Compose
- Using the Scaffold and Slot APIs in Jetpack Compose
- Medium: JetPack Compose With MVVM
- Video: Compose Your Trill
- How to make Text Selectable in Android using Jetpack Compose?
- Medium: Integrating Exoplayer in Jetpack Compose
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
ViewModel, and more!
GitHub: aclassen / JetpackComposeLazyReorderList
Andre Claßen has a basic implementation of a
reorderable() modifier to apply
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.
Other Interesting Links
…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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @firstname.lastname@example.org is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!