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 an onReset parameter, which allows the underlying View 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.