jetc.dev Newsletter Issue #183
This week, we got a new Compose alpha, so we check it out!
Also, we look at why
Modifier is a
Modifier and how often we should be lazy.
We peek at Compose/
View interoperability and the next generation of text fields.
Plus we get two new options for floating composable windows.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose is up to
1.6.0-alpha06. This includes:
BottomSheetScaffold()no longer has drawer-related functionality — wrap your scaffold in a
EmbeddedGraphicsSurface()composable wrappers around
Compose now uses non-linear font scaling, so for font scales over 100%, large text will not scale up as much as will small text
Wear Compose is up to
1.3.0-alpha06, with support for an
And, in Compose-adjacent artifacts, we got:
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
The quintessential composable has a parameter like
modifier: Modifier = Modifier.
Once you get used to it, this feels natural. To a newcomer to Kotlin, let alone Compose,
this syntax is bizarre. Is
Modifier a class? Is it a global object? Is it both?!?
Why does the leading character’s case matter? See the confusion, along with explanations,
in this week’s highlighted Stack Overflow question.
Do we only use lazy containers like
LazyColumn() for performance reasons? Or is it OK
to use them for convenient animations using
animateItemPlacement()? Learn more in this week’s
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
Google’s Simona Milanović wrote a two-part series (here’s part two)
on how to migrate
View-based code to Compose UI in stages, relying on Compose’s interoperability
with views to bridge the gaps.
Google’s Zach Klippenstein delivered a presentation at droidcon NYC 2023 on the new
BasicTextField2() implementation of text fields, explaining why we needed a replacement
and what the new API offers to us.
Compose is not just for Android, iOS, and desktop — it is also for the Web. And there are two Web approaches, one of which converts composables into HTML and CSS. Barret Vogtman introduces us to Kobweb, a framework wrapped around Compose for HTML, designed to simplify front-end development while retaining the expressive power of composables.
Radhika S looks at the swipe-to-action UI pattern, where swiping an element horizontally
exposes actions to take relative to the item represented by that element (e.g., delete,
edit). Radhika demonstrates a
DraggableItem() that leverages the
modifier to implement this pattern.
Francesc Vilarino Guell is back, examining the MVI architecture pattern and demonstrating
a simple implementation for Compose UI. The viewmodel holds a
MutableSharedFlow for the
actions (“intents” in MVI terminology), with a reducer function applying those actions to
update a state represented, unsurprisingly, by a
Merab Tato Kutalia explores the relatively undocumented
Modifier.Node API. This is
what powers the new
clickable() modifier, with a touted 80% performance improvement.
This post illustrates the gains from having immutable modifier elements, explains how
this relates to the
composed() modifier, and how to implement a modifier with this new
Jacob Ras set out to measure app size and startup performance of several app development options, including Compose Multiplatform. The result: Compose Multiplatform is better than Flutter on Android but comparable or worse on iOS, possibly owing to Compose for iOS being in alpha right now.
Other Interesting Links
- How to Implement the Nested Navigation in Jetpack Compose?
- Medium: Best Practices in Jetpack Compose for beginners
- Medium: Drawer Navigation using Material 3 in Jetpack Compose
- Medium: Integrating Jetpack Compose and SwiftUI into Flutter Apps via Method Channels
- Medium: Introduction to Jetpack Compose
- Medium: Jetpack Compose for Wearables — Developing UIs for Smartwatches
- Medium: Jetpack Compose — Search screen recommendations
- Medium: LazyColumn With Multi-Header In Jetpack Compose
- Medium: Line Chart UI with Jetpack Compose: A Simple Guide
- Medium: Navigation in Jetpack compose. Full guide Beginner to Advanced.
- Medium: State Based Navigation with Jetpack Compose Navigation
- Slides: Migrating from Fragments to Jetpack Compose with Nibel
100% pure code!
GitHub user only52607 created a
ComposeFloatingWindow() composable that puts a composable
into an OS-level floating window, along with a
dragFloatingWindow() modifier to put the window
into a draggable mode.
Other Interesting Links
- GitHub: B-L-Studios / OnBoarding-compose (onboarding wizard)
- GitHub: devmike01 / Chaicup (code-generated Navigation for Compose routes)
- GitHub: MahboubehSeyedpour / jetpack-loading (loading indicators)
- GitHub: michaellee123 / Pager (pager implementation)
- GitHub: Omico / androidx-compose-material3-pullrefresh (
PullRefreshIndicator()wrapper to fix an M3 bug)
- Google Maps for Compose is up to
- Reveal is up to
3.0.0with support for Compose Multiplatform
…And One More Thing
If you have had a library mentioned in this newsletter, and you publish a major version release, let me know and I’ll aim to mention it again in an upcoming issue in the “Notable Releases” section. I am still figuring out how this will work, so don’t be surprised if there are some tweaks to how I organize those updates.
- 2023-11-21: Compose/Material3/Wear Compose updates! remember()! Adaptive layouts! Compose Multiplatform in 2024! @firstname.lastname@example.org on BasicTextField2()! Compose Multiplatform charts! And... is TV Compose in trouble?!?
- 2023-11-14: Compose Compiler! BasicTextField2()! @email@example.com and animations! Optimization! @firstname.lastname@example.org, JetBrains, and Fleet! JetBrains and plotting! And... we collapse?!?
- 2023-11-07: Compose Multiplatform! Chips in fields! Diffing! Custom fonts in Glance app widgets! Heatmaps! PIN input! And @email@example.com is in a bit of a haze?!?