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 a Drawer() if needed
GraphicsSurface() and EmbeddedGraphicsSurface() composable wrappers around SurfaceView and TextureView
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.

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.

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.

Featured here? Please add this badge to your article or repo!

Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.

Recent Issues:

All Issues

Spread the Word!

Suggestions?

If you have ideas for items for future newsletter editions, reach out via email or contact Mark Murphy on kotlinlang Slack!