jetc.dev Newsletter Issue #146
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
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
modifier to animate the size of an image with fewer recompositions, in this week’s
#compose Slack thread.
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
Path utility functions, notably extracting a
Path from the contours
Bitmap. The combo-breaker library uses that to have text flow around a
Everything you need to know about State in Jetpack Compose with examples
Alex Styl explores
MutableState: why do we need them, why do we pair
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
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
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
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
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
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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @firstname.lastname@example.org is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!