jetc.dev Newsletter Issue #176
Published: 2023-08-08
This week, we look again at Live Edit and Paparazzi. We explore slot APIs, chips, and recompositions. Plus, we peek at placeholders and calendars that reportedly are epic.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can We Combine onClick and combinedClickable()?
Button()
has an onClick
parameter for a click listener. We can also use the
combinedClickable()
modifier to register listeners for click and long-click events.
These do not work well together, because Compose UI gestures are usually only consumed by
one modifier, as we see in this week’s highlighted Stack Overflow question.
How Do We Flow Only One Row?
FlowRow()
is a great way to wrap a collection of composables when you hit your window width.
However, what if you want just one “row”: render as many children as you can, but then stop without
wrapping. There are a few possibilities, including forking FlowRow()
itself. Learn more in
this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Video: Live Edit for Jetpack Compose
Google’s Juan Sebastian Oviedo covers the Live Edit feature added to Android Studio Giraffe, following up on the blog post covered in last week’s newsletter.
Help Us Improve the Performance of Your Compose Multiplatform Apps
JetBrains wants you to file issues about performance problems you are experiencing with Compose Multiplatform!
An Introduction to Paparazzi for Snapshot Testing
Paul Hameteman explores snapshot testing, where you take screenshots representing what a visual component looks like and use those for test comparisons to confirm that code changes do not change the UI unexpectedly. Paul specifically looks at using Paparazzi for this, so snapshot tests can be unit tests instead of instrumented tests.
Video: Jetpack Compose Slots - How to Write Deeply Customizable UI Components
Filip Babić delivered an AppDevCon presentation exploring writing composables with “slot” parameters:
parameters that are @Composable
lambdas representing some content that the composable will
wrap or decorate.
Medium: Creating Self-Adjusting TextFields with Jetpack Compose
Ali Rezaiyan looks at what it takes to create text content (in this case, a TextField()
)
that autosizes its font so the content fits the available space. Ali uses ParagraphIntrinsics
and BoxWithConstraints()
at the core of the ResizableInputField()
implementation.
Medium: Compose Multiplatform : Windows & Mac Desktop Applications(KMP)
Ayushi Agarwal follows up on an earlier post on sharing Android and iOS Compose code. This time Ayushi looks at setting up a Compose Multiplatform app app supporting macOS and Windows desktops. Alas, Linux is not covered, despite it being a fantastic platform for Android app development and writing newsletters. 😉
All Types of Chips in Material 3 Jetpack Compose
The SemicolonSpace team reviews the various forms of “chip” composable offered by
Compose Material3, including AssistChip()
, FilterChip()
, SuggestionChip()
,
and InputChip()
. Unfortunately, PotatoChip()
and ChocolateChip()
are not part
of the Material 3 specification.
Medium: How does Compose determine which block of code to recompose? — Recomposition Scope in Jetpack Compose
Rizki Maulana takes a deep dive into the concept of composition scopes, including the impact
of inline
functions, composables being “skippable”, and more!
Medium: Debugging the recomposition in Jetpack Compose
Phat Nguyen continues the exploration of recomposition and composition scopes, including using Layout Inspector in Android Studio to determine composition counts.
Other Interesting Links
- Animation Component with Compose
- Jetpack Compose Permissions: A Quick and Easy Guide
- Medium: Android 13 Runtime Notification Permission: XML & Jetpack Compose Guide
- Medium: Build a Product Management Android App with Supabase and Jetpack Compose
- Medium: Jetpack Compose Material3 Basic Scaffold with FAB and SnackBar
- Medium: Jetpack Compose Sticky Headers
- Medium: Jetpack Compose UI Architecture
- Medium: Unlocking the Magic of Dynamic Composable Animations in Jetpack Compose
- More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction
- Tooltips in Material 3 Jetpack Compose (with Examples)
- Write Once, Run Everywhere: Building with Kotlin and Compose Multiplatform
Resource Roundup
100% pure code!
Placeholder for Jetpack Compose
Sungyong An offers us a trio of libraries for implementing placeholders: what to display while your data is loading. The placeholders support various animated effects, such as shimmers and color changes. Versions exist for Material and Material3, as well as one for your own design system (Foundation).
GitHub: epicarchitect / epic-calendar
Alexander Kolmachikhin brings us calendar composables, with optional paging and date-range selection, that work on the main Kotlin/Multiplatform targets, including Android, the desktop, iOS, and the Web.
GitHub: fracassi-marco / JetChart
Marco Fracassi has released a library with composables for bar charts, line charts, pie charts, and donut (or ring) charts. 🍩
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?!?