jetc.dev Newsletter Issue #223
Published: 2024-07-16
A new Compose beta is out, as we slowly move towards a stable 1.7.0
!
In addition, we look at clipped popups and adaptive layouts. We explore restartable functions
and custom overscroll effects. And we peek at a bunch of Compose Multiplatform libraries,
including subsampling image views and Palette
ports.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose 1.7.0-beta05
is available, with some bug fixes. Note that Compose Material3 did
not get a new version and remains on 1.3.0-beta04
.
TV Compose is in a strange state, where androidx.tv:tv-foundation
is at 1.0.0-alpha11
but androidx.tv:tv-material
is at 1.0.0-rc01
. 🤨
Also, Navigation for Compose got a new beta:
androidx.navigation:navigation-compose:2.8.0-beta05
androidx.navigation:navigation-fragment-compose:2.8.0-beta05
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Why Is My Popup()
Being Clipped?
Popup()
really does not like it if you draw outside its boundaries for much beyond
a drop shadow. This causes problems if you try to add decorations to the popup, such
as a callout-style caret, as we see in this week’s highlighted Stack Overflow question.
How Do We Conditionally Use a Default Parameter Value?
Some composables have overloads taking varying parameter lists. Sometimes, you want to either
pass a specific value in one condition or go with whatever the default value is. In that
case, your best solution is to look at the source to see what the default value is and
pass that manually, as we see in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Video: Exploring Material3 Adaptive Layout with Google’s Alex Vanyo & Ian Clifton!
The Code with the Italians crew is back, this time with Google’s Ian Clifton and Alex Vanyo in tow! They focus on Material3 Adaptive Layouts, supporting UX patterns like list-detail and toggling between bottom nav bars and navigation rails. The objective is to make it easier for you to support large screens effectively.
Restartable functions from first principles
Zach Klippenstein returns, continuing his exploration of the innards of Compose. Here,
Zach takes a deep dive into the concept of “restartable” functions: what the term means,
which functions restart, how this ties into Snapshot
-based state management, and how
you could build your own similar functionality from scratch.
Medium: Material3 BottomSheet Navigation
Stefano Natali wanted to use bottom sheet navigation with Compose Material3 bottom sheets. However, the official Material Navigation for Compose is for Compose Material, not Compose Material3. So Stefano wrote a custom library to fill the gap, and this post explains how to use it.
Overscroll animations in Jetpack Compose
sinasamaki wanted to have a custom overscroll animation: a bounce effect on a hero
element. However, the built-in OverscrollEffect
only works for simple scrollable()
lists, not lazy lists, so sinasamaki created a customOverscroll()
modifier that offers
greater flexibility.
Working With Time Picker in Jetpack Compose
Andrew Phiri gives us an in-depth tour of the TimePicker()
composable, including
all the forms: inline and dialog, plus clock face and text input
Medium: Jetpack Compose Theme with Composition Local: Spacing, Shaping, and Status Colors
Kerry Bisset explores extending a theme to handle things like padding/spacing/elevation values or
status colors, using compositionLocalOf()
and CompositionLocalProvider
to make them available to
nested composables.
Medium: Playing with Compose Screenshot testing and Github Action
Alexandre Bruneau walks us through using GitHub Actions to trigger the execution of
tests powered by Compose Preview Screenshot Testing, by means of the validateDebugScreenshotTest
Gradle task.
Medium: Effortless Navigation with Voyager — Compose Multiplatform Development
Ahmed Elkhami gives us a good look at using Voyager for nav in a Compose Multiplatform app, including bottom bar navigation, transitions, and nested navigation.
Other Interesting Links
- Medium: App Icon & Splash Screen for iOS/Android (Dark/Light) — Compose Multiplatform
- Medium: Compose Multiplatform (Android & iOS): Banner Carousel Widgets
- Medium: Creating a Bottom Navigation in Jetpack Compose with Scaffold
- Medium: Creating Snackbars with Jetpack Compose
- Medium: Custom Snackbar in jetpack compose with ComposeModifiedSnackbar library
- Medium: How to Create Text Background Shape in Jetpack Compose
- Medium: How to Preview Every Possible Screen Size in Jetpack Compose?
- Medium: IME Options in Android with Jetpack Compose — Part One
- Medium: PDF Viewer using Coil
- Medium: Resolving Circular Dependency in KMP with Decompose
- Medium: Type Safe Bottom Navigation in Jetpack Compose
- Shared Element Transitions in Jetpack Compose
- Slides: What’s new in android: jetpack compose 2024
- Stacked Cards Layout With Compose - And Cats
Resource Roundup
100% pure code!
GitHub: panpf / zoomimage
GitHub user panpf has a subsampling image viewer composable for Compose Multiplatform, supporting zoom, rotate, scrollbars, integration with popular image loading libraries, and more!
GitHub: jordond / kmpalette
Jordon de Hoog ported androidx.paeltte
to Compose Multiplatform, with support for most
of the platforms. So, you can now identify a dominant color or generate a color palette
based on the examination of some image, across platforms.
GitHub: tclement0922 / compose-font-icons
T. Clément has some code for Android, JVM and Web/JS to allow you to use icons from a font.
GitHub: mahozad / comshot
Mahdi Hosseinzadeh has an early-stage implementation of capturing composables to bitmaps for Compose Multiplatform. Right now, it works on Android and Windows.
Other Interesting Links
- GitHub: fsryan-org / fs-segmented-display (CMP 7-segment LED)
- GitHub: hoc081098 / solivagant (CMP navigation)
- GitHub: huanshankeji / compose-multiplatform-material (wrappers around CMP and Compose HTML)
- GitHub: uuranus / compose-shapes (rhombus, parallelogram, trapezoid, and star shapes)
- ImageVector Wizard
Notable Releases
Maps for Compose is up to 6.1.0
,
with a performance improvement for maps in lazy containers.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-10: A Compose Multiplatform alpha! Hot reload! Presentation! Sprites! Calendars!
- 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?!?