jetc.dev Newsletter Issue #83
Published: 2021-09-21
1.1.0-alpha04
was released, bringing the oft-requested Kotlin 1.5.30 support! 🎉
Beyond that, we look at getting common concerns in migrating to Compose UI: getting
at Intent
extras and showing classic dialogs. We look at form validation, drop-down
menus, and palettes. We see a sweet KSP annotation processor to help with Navigation for Compose.
And I take a glance at some work-in-progress Compose libraries for app widgets and Wear OS tiles.
Alpha Analysis
Reviewing the release notes for the latest Jetpack Compose update!
Beyond the Kotlin 1.5.30 support, 1.1.0-alpha04
has a few changes, including:
-
There has been a fair bit of change with touch events, such as the deprecation of
GestureScope
and the addition ofperformTouchInput()
-
Android 12 stretch overscroll is now supported
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How to Get Intent Data in a Composable
Just because you are using Compose UI does not change many of the fundamental needs
of Android app development. But the fact that Compose UI encourages pure functions
means that to fulfill those needs you need to wade through a seemingly-endless
set of CompositionLocal
values. So, if you want to get the extras delivered to your
Intent
, you will need to work with LocalContext
, as we see in this week’s highlighted
Stack Overflow question.
How Do We Show a Non-Compose Dialog?
Similarly, you may have the need to integrate with existing UI elements — perhaps
from third-party libraries — that are stuck in the activity/fragment/view system.
To show a classic Dialog
from a composable, you can use DisposableEffect()
, 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: Compose: The Future of Native Android UI Development
Google’s Anna-Chiara Bellini delivered a presentation with a high-level overview of the role of Compose, how basic composables work, where Compose is going, and how you can get started.
Medium: Basic Form Validation in Android with Jetpack Compose
Two years ago, Brandon Wever wrote a Medium post on form validation using data binding and LiveData
.
Brandon rewrote that post to use Compose UI, while retaining the same ViewModel
and LiveData
that was used in the original post.
How to Test Jetpack Compose
Testing! We really should do some of that! In this post, Dmytro tours the mechanics
of testing our composables using ComposeTestRule
(for testing composables in isolation)
and AndroidComposeTestRule
(for testing composables in an activity).
Accessibility in Compose - Supporting Dynamic Font Sizes
Joe Birch returns, looking at how we can deal with scalable text sizes. The Text()
composable
and MaterialTheme()
work in sp
units… but what about the composables around your text?
Joe examines using modifiers such as widthIn()
to have your outer composables handle text scaling
according to your design rules.
How to master Swipeable and NestedScroll modifiers in Jetpack Compose
Angelo Marchesin needed a bottom sheet with some particular behaviors, just enough that the stock implementations were not quite right. In this post, Angelo looks at how to create a bottom sheet, particularly one that not only expands and collapses but has scrollable content as well.
Adding a dropdown menu to a Jetpack Compose TopAppBar
Rob Kerr wanted a classic overflow menu in a Compose UI TopAppBar()
. Rob shows how to implement
that, using DropdownMenu()
.
Composing palettes
Thomas KĂĽnneth is back, this time looking at the Palette
library for extracting theme-like colors from the contents
of a Bitmap
, and seeing how we can apply that in a composable.
Other Interesting Links
- Themes in Jetpack Compose
- Lift on scroll in Jetpack Compose
- Video: Jetpack Compose Navigation - Navigating with Parcelables
- One Tap Phone Number Login With Jetpack Compose
- Video: Custom UI Component with Jetpack Compose & Canvas | Part #1 - Preview
- Jetpack compose – Retrofit with Recyclerview
- Video: Jetpack Compose - Build a Login Screen
- Medium: Building Responsive Layouts with Jetpack Compose
- Video: Creating a TabBar Layout in Jetpack Compose
Resource Roundup
100% pure code!
GitHub: raamcosta / compose-destinations
Rafael Costa created a KSP processor that lets you create Navigation for Compose routes
via @Destination
annotations on composables. It determines arguments from the actual
composable function arguments, including support for default values, and deep links.
GitHub: jisungbin / ComposeMultiFab
Ji Sungbin created a floating action menu (FAB with a fly-out set of choices), in the form
of a MultiFloatingActionButton()
composable. It supports icons and optional labels, custom
tints, and more.
GitHub: pz64 / RoundedStarShape-JetPack-Compose
Compose UI has nice support for applying Shape
objects to things like a Surface()
,
but there are only so many built in shapes. GitHub user pz64 has a library with two
more: a rounded star and a polygon.
GitHub: timeline-notes / compose-mathjax
If you need to render LaTeX math functions, the Timeline Notes team ported an earlier function rendering library to Compose UI.
Other Interesting Links
- GitHub: dbaelz / StellarPresentation
- Gist: MatrixText
- GitHub: rabross/ SevenSegmentDisplay
- GitHub: CuriousNikhil / compose-explode
- GitHub: keygenqt / compose-forms
- GitHub: burnoo / cokoin
…And One More Thing
Back at Google I|O 2021, as part of the “Compose all the things” theme, Google showed some sample code for creating app widgets via composables. I reviewed that code and pointed out that while we might use Compose for app widgets, Compose UI — at least as we use it for Android and desktop — was unrealistic.
Dylan Roussel pointed out that Google is creating a “Glance” library
that seems reminiscent of the sample code from I|O. We get a set of composables
that resembles a tiny subset of Compose UI, and those get mapped to corresponding
constructs in a RemoteViews
.
Android Code Search shows three modules:
-
glance
, containing core code -
glance-appwidget
, containing theRemoteViews
composables for app widgets -
glance-wear
, for Wear OS tiles
These in turn depend on other things that do not yet exist as published artifacts.
glance-appwidget
depends on a core-remoteviews
library, for example. However,
as expected, none of these depend on Compose UI, just the Compose compiler and runtime.
Instead, Glance has its own composables for Box()
, Column()
, Row()
,
and Text()
, along with related modifiers and classes. The same composable
API is used for both app widgets and Wear OS tiles, as far as I can tell.
These projects have interesting elements in their implementations. They serve
as yet more examples of how to apply Compose in non-traditional use cases. Also,
glance-appwidget
has an AppWidgetHostRule
for writing instrumented tests for
app widgets, and it seems like it might be usable beyond these Compose-crafted
app widgets.
It is nice to see that Google is continuing work on the API they previewed at I|O!
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?!?