jetc.dev Newsletter Issue #183
Published: 2023-09-26
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 aDrawer()
if needed -
GraphicsSurface()
andEmbeddedGraphicsSurface()
composable wrappers aroundSurfaceView
andTextureView
-
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 edgeSwipeToDismiss()
modifier for SwipeToReveal()
.
And, in Compose-adjacent artifacts, we got:
androidx.activity:activity-compose:1.8.0-rc01
androidx.navigation:navigation-compose:2.7.3
androidx.paging:paging-compose:3.3.0-alpha01
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Why Is Modifier a Modifier?
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.
When Should We Be Lazy?
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
highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Medium: Migrating to Jetpack Compose — an interop love story
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.
Slides: Reimagining text fields in Compose
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.
Medium: Exploring Kobweb
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.
Medium: How to Implement Swipe-to-Action using AnchoredDraggable in Jetpack Compose
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 anchoredDraggable()
modifier to implement this pattern.
Medium: Simple MVI Framework for Jetpack Compose
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 State
.
Medium: Compose Modifier.Node and where to find it
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
API.
Medium: Android & iOS native vs. Flutter vs. Compose Multiplatform
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.
Medium: Mapping Experiences with Google Maps and Jetpack Compose
Nirbhay Pherwani describes how to use Maps for Compose, from adding the dependency and setting up simple maps to adding markers and info windows.
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
Resource Roundup
100% pure code!
WebRTC for Compose
The Stream team published a library with VideoRenderer()
and FloatingVideoRenderer()
composables
for handling WebRTC video content.
GitHub: only52607 / compose-floating-window
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.
GitHub: aabadaa / Fly-view
In related news, Abdulaleem Alsayed brings us FlyViewInfo()
and DraggableFlyView()
composables that put the composition into
a movable floating window.
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)
Notable Releases
- Google Maps for Compose is up to
2.15.0
- Reveal is up to
3.0.0
with 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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 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?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?