jetc.dev Newsletter Issue #114
Published: 2022-05-03
This week, we peek at composable scopes and viewmodel scopes. We look at design systems big and small. We see how MVVM, Kotlin/Multiplatform, Compose UI, and SwiftUI can all blend together. We examine FABs, dropdowns, and lazy grids. And I point out the sessions from Google I|O 2022 that are likely to have Compose-specific content.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Do We Reuse Composables Tied to Scopes?
Many core composables, like Box()
or LazyColumn()
, execute their content
function types in a scope, like BoxScope
or LazyListScope
. This leads to some
confusing error messages when you try to refactor some code to be reusable,
as we see in this week’s highlighted Stack Overflow question.
How Do We Have ViewModels Scoped to a Composable?
Somehow, Navigation for Compose sets up viewmodels per destination. How is that
accomplished, and can we pull off the same trick elsewhere? Learn the details
in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Building an Android app with Jetpack Compose and Firebase
Marina Coelho of the Firebase team is starting a blog post series on using Firebase services, like Firebase Authentication, with Compose UI. This post, though, focuses more on general Compose UI architecture, as Marina describes the foundation of the app that will tie into Firebase services over the course of these posts.
Video: Andromeda - open source Jetpack Compose design system
Adit Lal delivered a presentation for Android Worldwide on design systems: what they are, why they help developers and designers, and how to create a custom design system for Compose UI.
Medium: Custom Themes
Jorge Castillo also looks at design systems, but in this case focuses on customizing a Compose Material theme, with custom colors, fonts, and shapes.
Medium: Introduction to Modifiers
Lucca Buermann explores modifiers: what they are, why order matters, how to create ones
tied to specific scopes, the use of Modifier.then()
, and more!
Making reusable composables using Generics
James Shvarts returns, exploring creating composables that are model-agnostic by using generics to allow those composables to handle arbitrary model types at their call sites. This is especially useful if you have the same UI pattern that ties into multiple model types — James uses a delete dialog as an example.
Medium: Keyboard Handling In Jetpack Compose — All You Need To Know
Radhika S writes about how to hide and show the soft keyboard, how to direct the focus, how to have your UI react when the soft keyboard comes and goes, how to configure and respond to the action button, and more!
Medium: How to use Kotlin Multiplatform ViewModel in SwiftUI and Jetpack Compose
IceRock Development created MOKO MVVM, a Kotlin/Multiplatform library for the MVVM architecture. In this post, Aleksey Mikhailov explores that library, particularly looking at how MOKO MVVM can be used to drive both Compose UI and SwiftUI interfaces.
Other Interesting Links
- Medium: Jetpack Compose — Android Bottom Sheet
- Expandable Text in Android using Jetpack Compose
- How to do the parallax scroll with jetpack compose
- Slides: Invitation for modern Android UI development - Basic of Jetpack Compose
- Draw a Line in Android using Jetpack Compose
- Medium: To Compose, or Not to Compose, That is the Question
- Medium: Jetpack Compose From Beginning
- Medium: Decoding Jetpack-Compose Part-1
Resource Roundup
100% pure code!
GitHub: AndroidPoet / Dropdown
Ranbir Singh created a Dropdown()
composable that renders a drop-down menu,
complete with nested sub-menus, customizable animations, and a DSL for describing
the menu contents.
GitHub: SmartToolFactory / Compose-Extended-Colors
The SmartToolFactory team continues its work with Compose UI libraries, this time with a library to help managing Material color spaces, including the tonal palette from Material Design 3.
GitHub: yusufarisoy / lazy-grid
Yusuf Gökmen Arısoy brings us LazyGrid()
and LazyCollapsibleGrid()
composables,
designed to go in a LazyColumn()
and implement a variety of grid patterns.
GitHub: Hussienfahmy / MeFab_Compose
Hussien Fahmy offers a MeFab()
composable serving as an implementation of the
floating action button and floating action menu UI patterns.
Other Interesting Links
- GitHub: re-ovo / compose-setting (preference UI backed by MMKV for storage)
- GitHub: amirreza-lotfi / AutoCompleteTextFiled (auto-complete!)
- GitHub: shindonghwi / JetpackCompose_ToolTipView (tooltips!)
- GitHub: mpetuska / kmdc (Compose Web DSL over Material Design Components)
…And One More Thing
Google released the session schedule for Google I|O 2022. Not surprisingly, Jetpack Compose gets a fair bit of attention. Here are the currently scheduled presentations explicitly related to Compose:
Google usually holds back some sessions and does not add them to the agenda until after some announcement(s) in the keynote(s). It is possible that something Compose-related will be among them, so be sure to check the agenda again after the keynotes have completed. It seems like all of the non-keynote sessions are being pre-recorded, so they should be available on-demand on YouTube from the outset.
In addition to sessions clearly tied to Compose, here are ones that seem like they might be important and might contain some Compose coverage:
-
Back to the basics of System Back: it feels like Google is going to mess with system BACK navigation. Again.
-
Designing apps for large screens: while the description does not mention Compose, it seems likely that it will be referenced
-
Fragments: The good (non-deprecated) parts: my guess is that the relationship between Compose and fragments will get a mention
-
Input for all screens: as with the large-screens presentation, this one ought to be covering Compose as part of its mix
-
Learn how to enable shared experiences across platforms: it is possible that this is centered around the Compose family of platforms
-
Multi-device development: it is unclear how this differs from the previous one, but, hey
-
Update your app for the larger screen : maybe Google considers larger screens to be important or something
-
What’s new in Jetpack: Compose almost certainly gets a brief mention here
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-10: A Compose Multiplatform alpha! Hot reload! Presentation! Sprites! Calendars!
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?