jetc.dev Newsletter Issue #110
This week, we look at composables that return stuff and disabling trees of composables. We look at Figma, consider localization, and wonder why my letters are sticky. We examine a lazy staggered grid and square radio buttons. Plus, I wonder how we are going to get from our current Compose UI platforms to the next, and the next, and the next.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Sometimes, you might want to refer to
MaterialTheme colors from some context
that appears as though you cannot use
@Composable functions… such as a function
that would return a value. A
@Composable function can return a value, though,
as we see in this week’s highlighted Stack Overflow question.
Perhaps you have a screen, or a portion of one, where all the form UI elements should be
disabled. The challenge is that those composables tend to take the is-disabled state
as a parameter, rather than relying on a
CompositionLocal, so how do we handle a whole
tree’s worth at once? See a few options in this week’s highlighted Kotlinlang
#compose Slack thread!
Posts, videos, and other new information related to Jetpack Compose!
Google’s Manuel Vivo looks at propagating data from a viewmodel into a UI, and propagating user input from a UI. While the focus is mostly on states and events, Manuel uses Compose UI for the UI in question.
Figma is a popular design tool, but how it describes text and how Android implements
text are not a precise match. Can Yumusak looks at how to convert Figma
specifications into proper
Text() composables. In Compose UI 1.1.x, this is painful,
but Can also points out improvements that are coming in Compose UI 1.2.0.
Francesc Vilarino Guell returns, this time looking at sticky content with
In this case, rather than a sticky header, Francesc looks at implementing a peer column
to the main content that contains initials, where the “current” initial remains sticky
at the top and the rest scrolls with the content.
Yanneck Reiß reviews Rafael Costa’s Compose Destinations library as an alternative to using Navigation for Compose on its own.
Hardik P explores a common situation with mobile apps: the need for progress animations while something (often network I/O) proceeds. Hardik implements four different progress animations, both for direct use and as a demonstration of how you can build your own!
Naing Aung Luu looks at how we can skip Android’s string resources and use a JSON-based approach to providing translations of string. Naing’s argument is that this is more flexible, as translations can be loaded from anywhere, including from a Web server.
Other Interesting Links
- Jorge Castillo Tweet Thread on Custom Modifiers
- Compose Row, Column and Scoped Modifiers
- Curved Text in Android using Jetpack Compose
- Recognize Text using ML Kit Android Jetpack Compose
- Date Picker in Android using Jetpack Compose
- Medium: Adding Google Map in Jetpack Compose - Using AndroidView And android-maps-compose
100% pure code!
Savvas Dalkitsis assembled a basic
LazyStaggeredGrid() implementation, using a
LazyColumn() composables with synchronized scrolling. Savvas explains
more about it in this Medium post.
Unaisul Hadi put together a
SquareRadioButton() that “does what it says on the tin”:
it offers a square radio button. See this tweet
to see what it looks like!
Other Interesting Links
- GitHub: shindonghwi / JetpackCompose_DraggerWheelPicker (iOS-style wheel picker)
- GitHub: ayhanunal / android-composable-toast (
- GitHub: rygelouv / FeatureFlags (feature flags debug menu)
…And One More Thing
Compose for Android. Compose for Desktop. Compose for Web. Maybe Compose for iOS.
What comes next? It might be for some UI system that is under development or does not exist yet.
If you were building a product that, for one reason or another, needed a bespoke UI system, you might want to consider adopting some existing cross-platform framework. Yes, you could try to convince people to write directly to your own UI system, and some undoubtedly will do just that.
However, as the owner of the Los Angeles Clippers once pointed out, what matters for platforms are “developers, developers, developers”. You may want to try to meet some of those developers half-way and use Compose for your UI system.
But, how do you do that?
On the one hand, we have several examples. In addition to the ones mentioned above, there are Glance (a.k.a., Compose for App Widgets and Wear OS Tiles) and Jake Wharton’s Mosaic (a.k.a., Compose for Consoles). However, those two are for more limited scenarios, and the primary Compose-for-UI targets are massive.
Right now, a lot of the “how do we apply Compose to a UI system” knowledge is in the heads of various Google and JetBrains engineers. For Compose’s longevity, though, eventually that knowledge needs to be written down somewhere. This is not to say that it needs to be converted into some “turnkey” solution, but the ecosystem is going to need something. A high- or mid-level overview of how to build a Glance/Mosaic system and what the requirements are for adapting the Skia/Skiko-based canvas system would be huge wins for future platforms. It also would be good for maintaining current platforms, as those Google/JetBrains engineers eventually will stop working on Compose, and we need to transition to new maintainers.
- 2022-05-17: Google I|O 2022 videos! Compose beta01! Layout()! State! drawBehind()! Credit cards! App intros! And... what's a horologist?!?
- 2022-05-10: StateFlow vs. State! Design systems! MotionLayout! Text editing problems and solutions! And... modal sheets that are actually modal?!?
- 2022-05-03: @aditlal and @JorgeCastilloPr on design systems! KMP + Compose + SwiftUI! Dropdowns! FABs! And, what does Google I|O 2022 have in store for Compose UI developers?