jetc.dev Newsletter Issue #102
Published: 2022-02-01
1.1.0
is… not yet stable! But, we now have an rc03
, in addition to 1.2.0-alpha02
.
Beyond those, we look at keys, both in terms of user input and in terms of triggering recomposition. We examine the next phase of Glance, navigation, and scoped viewmodels. We see a media picker library and a collapsible tab bar. Plus, I talk a bit about everybody’s favorite subject: documentation!
(what? that’s not your favorite subject?!?)
Alpha Analysis
Reviewing the release notes for the latest Jetpack Compose update!
This past week, we got 1.1.0-rc03
. There were no obvious significant changes, though
Google reiterates that Compose Material widgets have minimium touch target sizes.
We also got 1.2.0-alpha02
. Among other changes, this alpha includes:
-
Mouse wheel scrolling support for
scrollable()
containers -
excludeFromSystemGesture()
modifiers -
onRotaryScrollEvent()
andonPreRotaryScrollEvent()
modifiers (for watches with crowns that rotate)
We also got an update to Glance, which includes a new androidx.glance:glance-wear-tiles
artifact. More on this below!
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Do We React to Global Key Events?
Sometimes, you want to react to key events outside of having something like a
TextField()
with the focus. For example, you might be interested in responding
to D-pad input from a remote control in a TV app. How to do that in a Compose-friendly
way is the subject of this week’s highlighted Stack Overflow question.
Are Constant Keys OK?
We often have the opportunity to provide “key” objects to composables. When the key
changes, the composable will get recomposed. But, we see some samples where
the key is a constant. We explore whether or not that’s a good idea in this week’s
highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Announcing Glance: Tiles for Wear OS made simple
We have had alpha releases of Glance for a while, but only with support for app widgets. Now, the second half of Glance is out, with support for creating tiles in Wear OS apps. Tiles on Wear OS fill a similar role as do app widgets on phones and tablets, and now our code can be similar as well (and composable as a bonus)!
Video: Compose Snapshots
The Code with the Italians team brought in Google’s Chuck Jazdzewski to talk
about Compose’s snapshot system, which is what makes State
work and drives a lot
of the Compose foundation.
Medium: Android Jetpack Compose: Create a Replacement Material Theme
Medium user Pedro wanted to use Compose Material but with a theme that was based
only partially on MaterialTheme()
. This requires a bit of reverse-engineering,
to determine how Compose Material composables use MaterialTheme()
, so alternative
typography, shapes, etc. can be applied.
Medium: Animations in Jetpack Compose with examples
Jimmy Sanghani looks at four different animation effects and explores how to implement them, using state animation and infinite animation APIs.
Bite-size Jetpack Compose: Navigation
Myric September walks us through the setup and usage of Navigation for Compose, including
using sealed class
for navigation routes, passing navigation arguments, and more!
Medium: Navigation in Jetpack Compose using ViewModel state
Medium user Frank continues our tour of Navigation for Compose. In this case, Frank examines how state — not events — can handle navigation from composable to composable, to better align with how Compose operates.
Every Composable deserves a ViewModel
Sebastian Lobato Genco created the Resaca library
that I mentioned two weeks ago. In this post, Sebastian explains the rationale behind
creating Resaca and its rememberScoped()
function, to try to have narrower viewmodel-style
objects for use by specific reusable composables.
Getting Started with ConstraintLayout in Jetpack Compose
ConstraintLayout
is very popular in the classic View
system, but not everybody
realizes that there is a ConstraintLayout for Compose UI as well. Shrey Sindher
walks us through why you might want ConstraintLayout
in a composable and how
standard ConstraintLayout
capabilities — such as guidelines and chains —
translate to a Kotlin DSL.
Medium: Creating Custom Jetpack Compose Chips
Chips are popular UI elements. Kamaldeep Kumar reviews how to create various styles of chips from scratch using basic composables.
Other Interesting Links
- Video: Speed Development Using Jetpack Compose
- State Management in Android Jetpack Compose
- Medium: Achieving better baseline alignment for fonts in Jetpack Compose
- Medium: Speed Up Mandelbrot Drawing on Android Jetpack Compose
- Into the Compose-Verse, A beginner guide to Android Development With Jetpack Compose
- Medium: Introduction to Jetpack Compose
- Medium: Traditional MVVM with Jetpack Compose and StateFlow
- Medium: How to implement pagination in Firestore using Jetpack Compose?
Resource Roundup
100% pure code!
GitHub: rektplorer64 / picker-kt
Tanawin Wichit created a set of libraries that combine to provide a Material3-based,
responsive media selection UI. The library handles rendering the previews of the
media, and you get a list of Uri
objects back representing the selections.
GitHub: nesyou01 / LazyStaggeredGrid
Younes Lagmah created a LazyStaggeredGrid()
composable, offering a controllable
set of columns and cells of arbitrary height within those columns.
GitHub: getStream / butterfly
The Stream team brings us a library to help with dealing with tablets and foldables,
with State
objects for window size classes, fold posture (open, half-open),
hinge size, and more!
Gist: c5inco / CollapsingTabBar.kt
Google’s Chris Sinco offers the source for a CollapsingTabBar()
composable:
an icon bar that expands outward from a central FAB-style button.
Other Interesting Links
- GitHub: MhmoudAlim / Compose-Ratingbar-library
- GitHub: Size0f / android.compose.squircle
- GitHub: keygenqt / compose-routing
…And One More Thing
We have @Preview
in the IDE. Showkase
also lets us use @Preview
-annotated composables for screenshot testing.
For me, the next step is: use @Preview
as part of generating documentation.
Principally, my concern is for library documentation. Having screenshots (or GIF animations) of composables is really quite useful for developers hunting for a library that might solve particular UI concerns. Having up-to-date screenshots be generated automatically as part of publishing the documentation can be a big win. Manually generating screenshots is a pain, which means that either:
-
We don’t get many screenshots, or
-
Those screenshots may not be maintained and could be out of sync with the actual code base
However, the value of documentation is also valid for in-house use by development teams. While Showkase works nicely in-app, browsing composables in the app may or may not be the most efficient course of action for bulk knowledge transfer (think: onboarding new team members).
In principle, the @Preview
-rendering logic from the IDE could be made available
for documentation Gradle tasks. After all, the IDE is not running Android. Or,
perhaps we could get something out of Compose for Desktop that serves the same role.
This idea is in the “Coming Soon!” list for Showkase. Between them and other independent developers, with luck, we can get something in this area in the not-too-distant future.
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?!?