jetc.dev Newsletter Issue #72
RC01 is out! And there are changes! 😞
Beyond that, we look at continued attempts to figure out how to use Navigation for Compose in complex apps, how to play with multiple screen sizes, and how to render a stack of cards.
Reviewing the release notes for the latest Jetpack Compose update!
We have our first RC of the Compose artifacts! And… there are more changes than really seems like a good idea for an RC.
From the standpoint of most developers, the biggest issue is that
previews are broken until Arctic Fox RC1 ships,
which may not be soon. This seems to stem from
the split of
which apparently broke some assumptions in the IDE. The workaround, until the IDE
update is available, is to stick to
But, beyond that, there were a remarkable number of changes, including:
Dialogscan use the full screen width
We have new composition locals:
LocalOnBackPressedDispatcherOwner, mostly to allow for more composables to be previewed (once previews work again…)
AnimatedImageVectoris temporarily removed
Disabled composables (e.g.,
Modifier.clickable(enabled=false)will block those click events from rippling up to the parent
RangeSlider()composables were added
“To align with Material Design specs OutlinedTextField with invalid input stopped using error color for label when label is being used as a placeholder”
I will talk more about this in the “…And One More Thing” section at the end of this issue.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Maintaining an Aspect Ratio
Often, we need to keep some UI element in a particular aspect ratio, even if the
size itself might vary based upon available screen space. The simple
modifier handles that nicely, as we see in this week’s highlighted Stack Overflow question.
Dealing with Dialog Damage
AlertDialog(), changed in RC01, where they are now full-width
by default, and you have to opt out of that behavior. There are several problems with this,
as we see in this week’s Kotlinlang
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
Podcast: AD/BC on Material Composition
Clara Bayarri and Matvei Malkov joined Android Developers Backstage to talk about Compose Material: what it brings now, what it will bring in the future, and what you get to bring to style your apps the way that you need.
Medium: Scalable Jetpack Compose Navigation
I commented in an earlier newsletter how it seems like everybody is cranky about Navigation for Compose.
Lachlan McKee is one of many developers trying to do something about it. Lachlan
blended Dagger/Hilt with route factories to make it easier to federate route assembly
across multiple modules, keeping each implementation
internal for less coupling.
Navigation in Multi Module Android Compose UI Project + Hilt
Have I mentioned that it seems like everybody is cranky about Navigation for Compose? FunkyMuse also went the Hilt + Compose approach for addressing navigation, in this case using a dedicated navigation module and some dedicated wrappers around Navigation for Compose constructs.
Video: Supporting Multiple Screen Sizes In Jetpack Compose
Adam McNeilly returns, this time with a 2-plus-hour screencast walking through supporting phones and tablets from the same Compose UI foundation, including various strategies for making use of the available space on tablets. Adam also explores how to set up your tests to exercise your code for both form factors.
Medium: Part 2, UI Widgets From Scratch in Jetpack Compose
Sergey Nes is exploring setting up some common UI patterns using composables.
In this post, Sergey looks at how to set up a deck of cards, reminiscent of a
StackView in the classic
View system, with a top card visible and additional cards
peeking out from behind it.
Blink Like It’s 1999
Maia Grotepass is playing around with Compose UI, with an eye towards reproducing
retro Web site UI patterns. This time around, Maia implements a composable that
blinks its contents, using an infinite tween transition, akin to the
tag from a byegone era of the Web.
Medium: Jetpack Compose: How to Play with Canvas?
Gérard Paligot is back, this time with a nice look at rendering a circular
progress indicator with tick marks, for use as a countdown timer visual. Not only
does it use the
Canvas() API, but it uses trigonometry. Consider yourself warned!
Browsing Jetpack Compose Samples
Anton Shilov offers some quick tips for finding relevant Compose UI examples in the Compose code base, either using the Android Code Search site or an IDE plugin.
Other Interesting Links
- Medium: Providing AssistedInject Supported ViewModel for Composable Using Hilt
- Video: Migrating to Compose: AbstractComposeView
- Medium: Infinite List / Paged List in Jetpack Compose
- Compose: Strikethru Animation
- Markdown Rendering and Recursive Composition
- Creating a Retro-Style Game with Jetpack Compose: Movement
- Getting Started With Jetpack Compose
- Video: Making UI Development Easier with Jetpack Compose
- Video: Build Better Apps Faster with Compose
- Video: Jetpack Compose in Practice
100% pure code!
GitHub: igorescodro / alkaa
Igor Escodro has been working on Alkaa, an Android to-do app, for the past few years. Igor recently completed a rewrite to use Compose UI for the user interface, to go along with Koin, Room, coroutines, etc.
GitHub: simonsickle / ComposedBarcodes
Simon Sickle created composable wrappers around ZXing’s barcode-rendering logic, to make it easy for your app to display QR codes and other types of barcodes.
Gist: msomu / DateVisualTransformation.kt
In Compose UI, a
VisualTransformation is responsible for formatting the entered
text into what is rendered on the screen in a
TextField(). GitHub user
msomu created a
DateVisualTransformation to format an entered date as
GitHub: wiryadev / bootstrap-icons-compose
Abrar Wiryawan has used
to convert the Bootstrap icon set into composables for use in your app.
“JWM is a cross-platform Java window management and OS integration library”. It seems likely that this will wind up being used in Compose for Desktop at some point.
…And One More Thing
The RC01 changes, such as the
AlertDialog() width change, are disconcerting. Changing
how Compose works is a natural course of development, but labels like “alpha”,
“beta”, and “RC” are supposed to have meaning. Changing the API surface and changing
fundamentals like dialog widths should not be happening at this point. Similarly,
the package changes that broke previews in the current Arctic Fox betas feel like something
that should have happened early this year, not on the cusp of a stable release.
Two months ago, when the Compose team announced a July release date, I was nervous. July seemed like a perfectly reasonable objective, but Compose is huge, and it’s important to get a solid first release out. Yet, the announcement was short on wiggle room, making it seem like July was a done deal. However, adhering to that sort of public deadline leads to strange decisions, such as the ones leading to these RC01 alterations.
In the end, I hope that this is not a harbinger of things to come.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @email@example.com is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!