jetc.dev Newsletter Issue #165
Published: 2023-05-16
Google I|O happened! We got a new BOM version, a new alpha, some videos… and not a lot more.
In non-I|O stuff, we look at viewmodels and BackdropScaffold()
. We peek at projects using
Lottie and SealedX for Compose UIs. And we examine libraries for dynamic themes
and floating action menus.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
The Compose BOM is up to androidx.compose:compose-bom:2023.05.01
, mostly with 1.4.3
versions of the Compose libraries.
Compose itself got a 1.5.0-alpha04
release. Of note:
-
includeFontPadding()
was undeprecated -
animateItemPlacement()
is available for contents in aLazyStaggeredGrid()
, which itself is now stable -
A bunch of changes to the pager APIs, including removing
pageCount
and addingsnapPositionalThreshold
Also, Compose-adjacent libraries were updated:
-
Glance now has a beta:
androidx.glance:glance:1.0.0-beta01
-
Navigation for Compose is up to a new RC:
androidx.navigation:navigation-compose:2.6.0-rc01
-
Wear Compose keeps chugging along:
androidx.wear.compose:compose-foundation:1.2.0-alpha10
Google I|O 2023
Google I|O came and went, without a ton of new Compose news, just a continued steady pace of development. However, a number of conference-style videos were released in concert with I|O itself on Compose, including:
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can I Change a TextField() From a ViewModel?
A typical sample of TextField()
uses remember { mutableStateOf() }
for the field’s
state. However, you might want that state to really reside in a ViewModel
for various
reasons. Each of those individually is fine, but combining the two requires care, lest
you have two “sources of truth”, as we see in this week’s highlighted Stack Overflow question.
How Can We Measure Composition Time?
Performance measurement is tricky in general, even more so for compositions. Fortunately,
we’re getting better tooling for that, but that only works when you’re using the tools.
See some of the sticky bits in this week’s highlighted Kotlinlang #compose
Slack thread.
(and hopefully the embedded images will start working…)
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
What’s new in Jetpack Compose
Google’s Jolanda Verhoef wrote up a summary of recent changes in Compose, both stuff that was released in the previous months and brand-new items, such as the first Glance beta and the first Compose for TV alpha.
Why you need ViewModels and why you don’t
Alex Styl looks at the Jetpack ViewModel
, how to use it with composables via
the lifecycle-viewmodel-compose
library, what value it still offers in the Compose
world, and alternatives for when you are developing Compose-based UIs outside of Android.
Slides: Handling State in Jetpack Compose
Beatrice Kinya walks us through basic state management in Compose, including State
,
mutableStateOf()
, remember()
/rememberSavable()
, and more.
Backdrop Scaffold in practice
Abdulahi Osoble wrote about the experimental BackdropScaffold()
composable, which
gives you separate content and background layers into which you can render your desired
content. If the standard bottom sheet implementations do not quite fit your needs,
Abdulahi demonstrates implementing one using BackdropScaffold()
.
Budding love for compose animation
Kristen Halper is back, this time looking at using Compose animations for drawing content frame-by-frame, in this case a sunflower.
Generating UI state in android for jetpack compose using sealedX library
Peter Chege explores using the SealedX library
to code-generate UI state classes to use in a Compose UI project. SealedX lets you define
a common sealed interface
(e.g., Loading
, Content
, Error
) and supply a list of
model classes, and SealedX code-generates implementations of that interface for each of
those model classes.
Medium: Using PreviewParameters and providing Composables to Jetpack Compose Previews
Katie Barnett returns, this time examining how we can pass a composable parameter
to a @Preview
-annotated composable. Her trick involves Kotlin’s functional interface
syntax, to wrap a composable in something that PreviewParameterProvider
supports.
Jetpack Compose: Create a Lottie Animation Screen and Advance to the Next Screen
Lottie is popular. Compose is popular. Biplab Bera looks at the combination: implementing a Lottie animation in a Compose UI-defined screen.
Medium: Build a form with Jetpack Compose, a better use of the state
The Lunabee Studio team describes how to handle form input in Compose UI, including
the use of rememberSaveable()
to retain basic state across configuration changes.
Other Interesting Links
- Migrating to Jetpack Compose: a step by step journey
- Using Compose for a UI component in a SwiftUI screen
- Slides: Material Design 3 in Jetpack Compose
- Medium: Building Bottom Tabs with Jetpack Compose: A Step-by-Step Guide
- Medium: From Android to Multiplatform: Real 100% Jetpack Compose App. Part 1 — Resources
- Medium: Custom ModalBottomSheet for Material 2 in Compose
- Medium: Get Current User Location in Jetpack Compose Using Clean Architecture
- Medium: Thumbtack’s New Android UI Framework: Cork
- Medium: Lessons Learned with Jetpack Compose
- Fast Tutorial - Beautiful credit cards with JetPack Compose
- Medium: WhatsApp Home Screen Design in Jetpack Compose
- Medium: The Snack Attack: Unleashing the Power of Jetpack Compose’s Advanced SnackBar
- Medium: Network Connectivity Service using callbackFlow and Jetpack Compose.
- Medium: Why Admob Ads are Not Supported in Jetpack Compose: A Developer’s Workaround
- Medium: Why Zepeto Chose Jetpack Compose for Their Android App UI
- Medium: From Data to UI : Jetpack Compose Phases
- Medium: Highlight and scroll to list item with Jetpack Compose
- Medium: Compose runtime, immutability for ui state value in composable
Resource Roundup
100% pure code!
GitHub: seyoungcho2 / ComposeDynamicTheme
SeyoungCho brings us a engine for dynamic Material 2 themes in Compose, to make it easy to switch between themes based on user input.
GitHub: lemillion12 / multi-floating-action-button
Sanyam Mehta implemented a floating action menu, where a FAB expands into a series of smaller menu items when tapped.
GitHub: ParveshSandila / CountryCodeChooser
Parvesh Kumar created a CountryCodeChooser()
composable to allow users to choose a
country code for a phone number from a searchable list.
Gist: mertceyhan / TypewriterTextEffect.kt
Cafer Mert Ceyhan put together a TypewriterTextEffect()
composable that displays
some text a little bit at a time, as if it is being typed in.
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?!?