jetc.dev Newsletter Issue #156
Published: 2023-03-14
This week — after a one-week hiatus for this newsletter — we look briefly at the latest Compose and Wear Compose releases. We examine updating our Compose dependencies, MVVM, and bottom sheets. And we look at a competitor to Google’s Relay plugin for Figma.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose is up to a 1.4.0-rc01
, suggesting that 1.4.0 might come out with
Google I|O in May, or perhaps a bit before. Of note:
-
There were several changes to
BottomSheetScaffold()
, from parameter name changes to outright removals of some parameters -
AndroidView()
has a variant with anonReset
parameter, which allows the underlyingView
instances to be reused -
LazyStaggeredGrid()
now supports reverse layout
Wear Compose got bumped up to 1.2.0-alpha06
, adding a new CurvedBox()
,
expandable items for a ScalingLazyColumn()
, and custom preview annotations
for different sizes and shapes of Wear OS screens.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can I Create a Grayscale Composable?
A common approach for disabled states is to have everything grayed out.
See how you can use a ColorMatrix
and onDrawWithContent()
on a Surface
to accomplish this in this week’s highlighted Stack Overflow question.
Why You Should Avoid Locale.getDefault()
Locale.getDefault()
is not your friend — use LocalConfiguration.current.locale
for one that reacts to configuration changes. As a side benefit, it also works
better in previews. Learn more in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Automating dependency updates in a Compose project
Google’s Jose Alcérreca explores using Renovate to help identify when you should be bumping up your Compose dependency versions.
Now’s the time to learn Android development with Jetpack Compose!
Google’s Murat Yener announced the availability of the Android Basics with Compose course. This appears to be aimed at newcomers to Android app development who are looking to “get in on the ground floor” with Compose UI.
Android Developer Story: Clue’s developer speed increased 3X with Jetpack Compose
This official Google video outlines how Clue rebuilt their app using Compose UI and how it helped with their productivity.
Using Jetpack Compose with MVVM
Jorge Castillo explores the MVVM architecture pattern and how it blends with Compose UI.
Jorge specifically examines collectAsStateWithLifecycle()
, the
WhileSubscribed(5_000)
hack, and how this ties into unidirectional data flow
architectures.
Medium: Yet another pitfall in Jetpack Compose you must be aware of
The Android Developer looks at why your derivedStateOf()
variables might not
get updated when you expect. You need to reference the State
inside the
derivedStateOf()
lambda expression; if you do not, your derived value might
not update when that State
changes.
How to use Bottom Sheets with Material 2 and 3 with examples in Jetpack Compose
Alex Styl is back, exploring standard and modal bottom sheets and their implementations (or lack thereof) in Compose Material and Compose Material3.
Medium: Making grid items’ size identical using SubcomposeLayout in Jetpack Compose
Kurt Lemond Capatan wants a lazy grid where all of the items in the grid are
the same size, despite them having varying contents. Kurt wound up using
SubcomposeLayout()
to be able to get the sizes of the contents of each grid
item, then use those results to set the size of the grid items themselves to
all match.
Medium: Android Jetpack Compose Wear OS
Hüseyin Özkoç explores the basics of using Wear Compose to power your Wear OS app, including the Wear Compose button and chip widgets, lists and cards, “time text”, and more!
Other Interesting Links
- Medium: Android Jetpack Compose ConstraintLayout Grid Helper
- Medium: Streamlining User Actions with the Command Pattern: A Practical Guide
- Medium: Collapsing Toolbar in Jetpack Compose LazyColumn — Three Approaches
- Custom Theming in Jetpack Compose
- Ticker Board in Jetpack Compose
- Adding animations to Google Maps in Jetpack Compose
- Cooking Window Inset with Jetpack Compose sauce and a pinch of View — part 2
- Medium: React to Lifecycle state changes in Compose
- Medium: Making grid items’ size identical using SubcomposeLayout in Jetpack Compose
- Medium: TabRow in Jetpack Compose: Implementation & Customization
- Medium: Coroutine in Compose
- Medium: Building a GPT Client for Android with Jetpack Compose in Kotlin
- Medium: Style certain parts of Compose Text
- Modify items in paginated list in Jetpack Compose
- Jetpack Compose Tutorial: Replicating Dribbble Audio App - Screen Transitions
- Building a Language Learning App with Compose – Part 3
- Medium: A Guide to State Management Functions in Jetpack Compose
- Medium: Understanding and Implementing Navigation Components Jetpack Compose in Application | Part 1
- How to create Shimmer Effect in Jetpack Compose
- How to Implement IconButton in Jetpack Compose?
- Medium: An introduction about Preview in Jetpack Compose
- Medium: Jetpack Compose: Using Preview
- Ultimate Guide to Jetpack Compose List
- Lists and grids in JetPack Compose
Resource Roundup
100% pure code!
GitHub: ehsannarmani / ComposeAnimatedMenu
Ehsan Narmani brings us an AnimatedMenu()
composable for displaying a popup
menu of options, with enter and exit transitions.
GitHub: ehsannarmani / ComposeDialog
Ehsan Narmani also has a new take on Dialog()
, with custom enter and exit
animations.
Upspeed Figma Plugin
Upspeed.io published their analogue to Relay: a Figma plugin that generates composables from designs. In their case, it seems as though they accomplish this with just a plugin, making it possible to use this with IDEs other than Android Studio.
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?!?