jetc.dev Newsletter Issue #208
Published: 2024-04-02
This week, we spend a lot of time on internationalization, localization, and string resources in Compose UI. We also explore maps, animate items in lazy lists, and see a clipped circle shape for use in avatar lists and the like.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can We Swipe to Change Activities?
Inertia is very real when it comes to programming techniques. Nowhere is that more prominent in modern Android development than with the notion of activities-as-screens. Once developers break free from that mental constraint, things become much easier, as we see in this week’s highlighted Stack Overflow question.
Can We Get the Scroll Amount of a TextField()?
Short answer: no. While the new BasicTextField()
(formerly BasicTextField2()
)
offers an API for this, it is not ready for the desired use case: a rich text editor.
Learn more in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Medium: Introducing Trio | Part I
Airbnb released Mavericks as an open source library back in 2018, as an MVI-style system for dealing with state in viewmodels. While that was originally used with fragments, Eli Hart explains how Airbnb migrated their app to use Mavericks with Compose UI.
Medium: Styling Internationalized Text in Jetpack Compose
Many apps need some text that has styles applied to parts of it, such as for clickable
links. Handling that for localized text can be a challenge, as the positions of
the styled portions may change based on sentence structure. Burak Karaduman shows us
a ClickableLocalizedText()
that helps to manage that complexity.
Medium: String resources API for Compose Multiplatform
Dealing with localized strings in the classic View
system involved string resources…
but that only worked on Android. Compose Multiplatform now offers its own take
on string resourceds, and Gérard Paligot explains how they resemble Android string
resources and how to use them, including the current limitations that they impose.
Medium: Per-App Language Preferences in Jetpack Compose
A bunch of apps implemented their own per-app locale system, so users could have their app render in a language different than the one associated with the system locale. Android 13 standardized this, and the Jetpack AppCompat library offers a backport. Lucian Ghimpu explains how to use this in a Compose UI app, letting the user choose a language and then using string resources associated with that language.
Medium: How to Use Google Maps in Jetpack Compose: Step-by-Step Android Guide
Google Maps is extremely popular. Rıdvan Özcan shows us how to use Maps for Compose,
from the basics of the GoogleMap()
composable to adding markers, polylines, and
map controls.
Medium: A preview of Animating LazyList items in Jetpack Compose
LazyColumn()
and LazyRow()
are great, but they lacked the item animation flexibility
of RecyclerView
. The animateItemPlacement()
modifier only handled reordering of
the list, not additions or removals. Gergely Kőrössy walks us through the new
addition/removal animation support in Compose Foundation 1.7.0 alphas, including
the current limitations.
Other Interesting Links
- How To Add Jetpack Compose In Existing Kotlin Project
- Jetpack Compose: Managing state of UI
- Mastering State Management in Jetpack Compose: A Fun Guide
- Medium: 10 Jetpack Compose Mistakes: Building Beautiful UIs the Right Way
- Medium: Building Custom Circle Loader in Jetpack Compose: Exploring Android Canvas and Animations
- Medium: Creating Fluid Button Transformations in Jetpack Compose
- Medium: Dynamic Horizontal Page Slider with Dot Indicator
- Medium: Enable Edge to Edge in Android Jetpack Compose (Transparent Status Bar)
- Medium: Marquee Modifier Dancing Effect
- Medium: Shimmer Effect in Jetpack Compose
- Medium: Starting Lineups on Football Pitch with Jetpack Compose
- Medium: Swipe To Dismiss - Jetpack Compose Material3
- Medium: Write Testable Compose function
- The same app in Jetpack Compose, SwiftUI, and Flutter – Part 1: Let’s Compose
Resource Roundup
100% pure code!
GitHub: JustinGeorgeJoseph / ClippedCircleShape
A common UI pattern is a row of overlapping circle-cropped images, such as a row
of user avatars. Justin George implemented a ClippedCircleShape
designed for use
with the clip()
modifier and this UI pattern. It supports clipping in either of
the four cardinal directions, for rows or columns of circles.
GitHub: wasabeef / compose-gap
One annoyance with using Spacer()
in a Row()
or Column()
is that you have
to use width (for Row()
) or height (for Column()
) to set the size. Daichi Furiya
created a simple Gap()
composable that “knows” if it is in a Row()
or Column()
and sets the width or height accordingly.
Notable Releases
The Compose Multiplatform Wizard has been updated with experimental WasmJS support, support for multiplatform resources, up-to-date dependencies, and more.
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?!?