jetc.dev Newsletter Issue #146

Published: 2022-12-20

This week, we look at reversing rows and reducing recompositions. We flow text around images, rock our previews, and collapse our top app bars. And I reminisce a bit about a classic arcade game from my youth.

Also, two notes:

• This is the last issue of the year, as I am taking next week off. The next issue will be in 2023!

• This is the last issue being announced via Twitter.

If you want to follow this newsletter, and you had been relying on the @CommonsWare account on Twitter, your primary options are:

• Email (see the form on the main site page)

• The Atom feed

• My Fediverse account

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do We Reverse the Items in a Row?

Sometimes, you might want your Row() contents to be easily reversible — the scenario in this question is for a chat UI where incoming and outgoing messages have the same general layout, just reversed. Some developers hack it using RTL support, but that is poor for internationalization (plus, it affects the text). See how you can create a custom Arrangement to handle this pattern, in this week’s highlighted Stack Overflow question.

How Do We Animate Without Recompositions?

Compose has a lot of animation options. Unfortunately, it is easy to wind up where that animation triggers a lot of recompositions. Learn how to use a layout() modifier to animate the size of an image with fewer recompositions, in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Medium: Pew pew! Making a Game with Compose Canvas on Wear OS

Google’s Atual Munim and Sara Hamilton created the foundation for the classic Asteroids arcade game, with a spaceship that can fly around, spin, and fire a weapon. The catch is that Atual and Sara did this using Compose’s Canvas() API… for use on a watch. Adding actual asteroids is left as an exercise for the reader.

Video: Text Around an Image

The Code with the Italians crew is at it again, this time bringing in Google’s Romain Guy to talk about his combo-breaker and pathway libraries. The pathway library contains Path utility functions, notably extracting a Path from the contours of a Bitmap. The combo-breaker library uses that to have text flow around a Bitmap.

Everything you need to know about State in Jetpack Compose with examples

Alex Styl explores State and MutableState: why do we need them, why do we pair them with remember(), when do we choose between stateful and stateless composables, state hoisting, state in viewmodels, and more!

Medium: Creating a Collapsing TopAppBar with Jetpack Compose

Katie Barnett wanted a collapsible top app bar. Compose UI offers a LargeTopAppBar(), but Katie found relatively little written about it… leading to this post. See how to style a LargeTopAppBar(), have it expand and collapse based upon the scrolling of a related composable, adjust the app bar content based on its expanded/collapsed state, and more!

Medium: Jetpack Compose Preview like a pro!

Praney Patel explores the many options available for the @Preview annotation, including light and dark mode, locales, and device specifications. Praney also demonstrates creating a custom annotation for wrapping up a standard set of @Preview annotations, for less verbosity and better reuse.

Highlighting Text Input with Jetpack Compose

Joe Birch is back, this time looking at formatting text input as it is entered. The specific scenario is formatting domain names and URLs as if they were hyperlinks.

Understanding Themes in Jetpack Compose

The SemicolonSpace team looks at the three main aspects of a MaterialTheme(): colors, shapes, and typography. They look at how we can manually reference attributes from the theme, how to override aspects of the theme for certain composable trees, and more! \

Other Interesting Links

• Adding dark mode to Android app in Jetpack compose: Part 1
• Medium: Utilising the Canvas in Jetpack Compose to build a SquareSegmentedProgressIndicator
• Video: Our journey to master Jetpack Compose
• Video: Composing an Octopus
• Medium: Android Jetpack Compose Testing series: Junit unit testing, assertion
• Medium: Jetpack Compose under the hood
• Medium: Bluetooth print using Jetpack Compose and ESC/POS dependency
• Medium: Pagination in Jetpack Compose with and without Paging 3
• Medium: How remember do actually work in Jetpack Compose?
• Medium: Floating Action Button in Jetpack Compose with Material 3
• Medium: Best Jetpack Compose Habits
• Medium: Jetpack Compose Migration Part 1
• Medium: AdMob Banner & Interstitial Ads in Jetpack Compose
• Medium: How to build overlapping layout in jetpack compose
• Medium: Jetpack Compose — Introduction
• Medium: My First Year of Android Development with Jetpack Compose

Resource Roundup

100% pure code!

GitHub: zach-klippenstein / compose-seqdiag

Google’s Zach Klippenstein has a sample app up that demonstrates rendering a sequence diagram, with columns for actors and arrow-based rows representing the sequence of events.

GitHub: KazaKago / swr-compose

GitHub user KazaKago has created a Compose port of React SWR. Here, “SWR” stands for “stale-while-invalidate”, where a data source immediately supplies possibly-stale data while in parallel fetching the latest data.

GitHub: younhwan97 / SimpleLoading

Younhwan Jo implemented a SimpleLoading() composable to display an animated loading modal.

GitHub: rajndev / compose-components

Raj Narayanan published a library of simple composables and utility functions, including a custom app bar and actions, a text field with a drop-down menu, a circular progress indicator, and more.