jetc.dev Newsletter Issue #72
Published: 2021-07-06
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.
RC Reflections
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 ui-tooling
into ui-tooling
and ui-tooling-preview
,
which apparently broke some assumptions in the IDE. The workaround, until the IDE
update is available, is to stick to beta09
for ui-tooling
.
But, beyond that, there were a remarkable number of changes, including:
-
Canvas
now supportscontentDescription
-
Dialogs
can use the full screen width -
We have new composition locals:
LocalActivityResultRegistryOwner
andLocalOnBackPressedDispatcherOwner
, mostly to allow for more composables to be previewed (once previews work againâŠ) -
AnimatedImageVector
is temporarily removed -
Disabled composables (e.g.,
Button()
) viaModifier.clickable(enabled=false)
will block those click events from rippling up to the parent -
BadgeBox()
andRangeSlider()
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 aspectRatio()
modifier handles that nicely, as we see in this weekâs highlighted Stack Overflow question.
Dealing with Dialog Damage
Dialogs, including 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.
Composable Commentary
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 <blink>
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
Resource Roundup
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 DD-MM-YYYY
.
GitHub: wiryadev / bootstrap-icons-compose
Abrar Wiryawan has used svg-to-compose
to convert the Bootstrap icon set into composables for use in your app.
GitHub: JetBrains/JWM
â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.
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?!?