jetc.dev Newsletter Issue #191
Published: 2023-11-21
Compose, Compose Material3, and Wear Compose all received updates, so we see what’s in store!
In addition, we learn what “Material3 Adaptive” is, where Compose Multiplatform will go in
2024, and more on why BasicTextField2()
is awesome. Plus, we explore some new non-Android
Compose options, such as improved previews for Compose for Desktop and a new charting library.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose got a bump to 1.6.0-beta01
, suggesting that 1.6.0
will become stable
by late this year or early next. If you are implementing drag-and-drop, there were
a bunch of API changes
to be aware of. There were also changes to text input APIs, the magnifier()
parameters, and SwipeToReveal()
. Plus, assertIsDeactivated()
now lets you test
for nodes that are cached for later reuse but are not actively in the composition.
Compose Material3 is up to 1.2.0-alpha11
. This adds PullToRefreshContainer()
, un-deprecates
TabRow()
and ScrollableTabRow()
, and renamed a bunch of other APIs.
There are also new androidx.compose.material3:material3-adaptive
and
androidx.compose.material3:material3-adaptive-navigation-suite
artifacts for implementing
common UI patterns across a variety of screen sizes. Below, we have a Googly Medium
post explaining what this is about!
Wear Compose is up to 1.3.0-beta01
with a bunch of changes to SwipeToDismiss()
and SwipeToReveal()
, among other changes.
In Compose-adjacent libraries, we also got:
androidx.activity:activity-compose:1.8.1
androidx.lifecycle:lifecycle-runtime-compose:2.7.0-rc01
androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0-rc01
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Do We Always Need to remember()?
It is all too easy to forget to remember()
. But, that can lead to overuse of remember()
,
for cases where it is not needed, such as constants. Learn more in this week’s
highlighted Stack Overflow question.
How Can We Find Our Position Cheaply?
Sometimes, we need to know a composable’s position on the screen. onGloballyPositioned()
seems like the right modifier to use for this, given its name. However, if the composable
does not change position relative to its parent, onPlaced()
is more efficient, as we
see in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Medium: New APIs for adaptive layouts in Jetpack Compose
Google’s Ian Clifton discusses the new androidx.compose.material3:material3-adaptive
and
androidx.compose.material3:material3-adaptive-navigation-suite
libraries, which offer
out-of-the-box layouts that handle varying screen sizes. In particular, Ian covers
ListDetailPaneScaffold()
for the list/detail UI pattern and NavigationSuiteScaffold()
for switching between a bottom navigation bar and a side navigation rail.
Kotlin Multiplatform Development Roadmap for 2024
JetBrains’ Egor Tolstoy outlines the plans for Kotlin Multiplatform and Compose Multiplatform for 2024. Of note, they aim to get Compose for iOS to a beta state and getting the core Compose APIs and components available to multiplatform projects. They also plan to have Fleet support live preview for common code in Compose Multiplatform projects.
Medium: BasicTextField2: A TextField of Dreams [2/2]
Alejandra Stamato continues her tour of BasicTextField2()
, including using InputTransformation
for filtering, OutputTransformation
for formatting, scroll state access, and more.
How to Add Content Descriptions in Compose - A Guide for Android Devs
Eeva-Jonna Panula is back with more material on accessibility, this time focusing
on content descriptions (contentDescription
for Image()
and Icon()
, or via modifiers like
semantics()
). Eeva-Jonna explores who experiences those descriptions and how to write
good descriptions.
Medium: Building an Efficient UI Design System with Jetpack Compose and Compose Multiplatform
Ahmed Nasser examines what it takes to build a cross-application design system in Compose Multiplatform, via a dedicated module.
All You Need To Know About Modal Navigation Drawers In Jetpack Compose
Joel Dias examines the navigation drawer UI pattern and how to implement one powered
by Navigation for Compose, by way of the ModalNavigationDrawer()
composable.
Medium: Managing UI States in Jetpack Compose
Michihiro Iwasaki explains why a plain var
does not work for composable state,
then dives into mutableStateOf()
and remember()
as an alternative, before turning
to viemmodels as another alternative.
Jetpack Compose + Material Components for Android TV: Cards
Joe Birch continues his tour of TV Compose with a look at cards, such as StandardCardLayout()
for an image-and-caption card, WideCardLayout()
for a more immersive card UI, ClassicCard()
for image/title/subtitle/description structures, and more.
Other Interesting Links
- Bottom Navigation Bar in jetpack Compose using Material3 (UI/UX)
- How to Add Border to Row in Android Jetpack Compose
- How to Disable Jetpack Compose Switch
- Medium: Adapt with Ease: Mastering Orientation Changes in Jetpack Compose
- Medium: Disabling the focus indicator on IconButtons (or any other composable that uses a ripple indicator)
- Medium: Draw Line With Canvas In Jetpack Compose
- Medium: Jetpack Compose Meets Google Maps Magic
- Medium: Jetpack Compose Navigation for Beginners
- Medium: Living Composition: Recreating ‘The Game of Life’ with Jetpack Compose
- Medium: Snackbar without scaffold in jetpack compose
- Medium: The best way to manage the Runtime permissions using PermissionHandler in Jetpack Compose
- Ultimate Guide to Jetpack Compose Navigation
- Understanding @Immutable in Jetpack Compose
Resource Roundup
100% pure code!
GitHub: alexfacciorusso / compose-previewer
Alex Facciorusso offers improved preview annotation support for Compose for Desktop.
GitHub: mori-atsushi / compose-stylesheet
Mori Atsushi is building a stylesheet engine for Compose UI, with a DSL for defining colors, fonts, sizes, etc.
Gist: Wear Compose HierarchicalFocusCoordinator
Sample
Yuri Schimke demonstrates how to have a dialog composable in Wear OS handle
rotary events correctly using HierarchicalFocusCoordinator
. See
this Kotlinlang thread
for more context.
GitHub: maximilianproell / compose-multiplatform-chart
Maximilian Pröll is building a charting library for Compose Multiplatform, starting with line charts.
Other Interesting Links
- Gist: Custom Date Picker using Jetpack Compose in Android
- Gist: Jetpack Compose LazyColumn with animated header (see this demo)
- GitHub: taewooyo / shaker (simple shake, rotate, etc. animations)
Notable Releases
Maps for Compose released 4.2.0
and 4.3.0
in rapid succession,
addressing accessibility concerns and making ClusterManager
be part of the API.
…And One More Thing
Over in the CommonsBlog, I wonder how we might move forward, now that the primary Android-based TV platform may be moving on to something else. Is TV Compose too late?
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?!?