jetc.dev Newsletter Issue #104
Published: 2022-02-15
1.1.0
is finally stable! And, we got a new alpha of 1.2.0
as a bonus!
Beyond that, we look at the oddness of the resources()
composable and why
it sometimes works if we forget to remember()
. We eliminate duplicate clicks
in duplicate ways and look at use cases for Molecule. Google’s Chris Sinco
gives us a Figma plugin and a menu-to-close animation. And I warn about
how the ancient CPUs used by many Wear OS devices may cause problems for you
as you try to use Compose UI on wrists.
Alpha Analysis
Reviewing the release notes for the latest Jetpack Compose update!
In addition to getting a stable release of 1.1.0, we also got 1.2.0-alpha03
.
Of note:
-
They are working on adding tracing logic to recompositions, for intended integration with Perfetto. Note, though, that you need to add ProGuard/R8 rules to remove this code from release builds.
-
They added
movableContentOf()
, which migrates a composition from one composable to another. The idea is to use this for transition animations. -
notifyFocusedRect
is deprecated, being replaced byBringIntoViewRequester
. -
They added more support for font families, with
LocalFontFamilyResolver
,createFontFamilyResolver()
,AndroidFont
, and more. -
TextField()
now remains above the soft keyboard when that keyboard is shown. -
LazyVerticalGrid()
supports specifying “the content type for items”.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
Why Can We Sometimes Forget to remember()?
remember()
is a really good idea, yet sometimes it seems like we can use
mutableStateOf()
without remember()
and things still work. See how
that happens in this week’s highlighted Stack Overflow question.
Why is resources() So Strange?
The resources()
composable, for accessing a Resources
object, has a strange
reference to LocalConfiguration.current
. See why this is needed, and how it relates
to some framework API quirks, in this week’s highlighted Kotlinlang #compose
Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Jetpack Compose 1.1 is now stable!
Florina Muntenescu brings us the news about the 1.1 stable release of Compose and all that we get, including new touch sizes for Compose Material!
Video: Compose ALL the things! Foldables, wearables, TVs and more — with Clara Bayarri
The Code with the Italians team had another Googler guest appearance, this time Clara Bayarri. While we focus on Compose UI for phones, Google would like us to use it across a variety of form factors. See how this works and what the limitations are!
Medium: How to prevent multiple clicks in Android Jetpack Compose
Duplicate clicks on UI elements can sometimes be a problem, such as causing an action to be performed twice when the user really meant for it to be performed once. Alexander Shevalev reviews a few techniques for implementing modifiers to allow for single-click behavior.
Using Jetpack Compose with Square’s Molecule Library
Molecule is a library for creating flows from composables. Mohit Sarveiya used Molecule and Ktor to hit a GraphQL server and integrated the results into a Kotlin/Multiplatform client app. Includes bonus historical golf coverage! 🏌
Medium: Jetpack Compose meets Huawei ID Login
Huawei offers their Account Kit, to allow apps to have users authenticate themselves to the app using their Huawei IDs. In this post, Sertaç Ayhan explores how to use Account Kit with Compose UI, with a login screen that integrates with Account Kit.
Create Pie Chart with Jetpack compose
Nisha Jain walks us through creating a PieChart()
composable using a Canvas()
,
complete with support for clicks on particular segments of the chart. See also
a related post on implementing a line chart.
Medium: Learn Jetpack Compose Crossfade Animation
Elye looks at the Crossfade()
animation, including combining it with
other animated effects.
Medium: Card carousel animation in Jetpack compose
Debdut Saha wanted to offer a stack of cards, with a fully-visible top card and
other cards peeking out behind it, reminiscent of StackView
in the classic
View
system. Dedhut looks at implementing this using Animatable
for powering
the swipe animations.
Other Interesting Links
- Medium: Grouping Semantics in Jetpack Compose UI
- Drawing text on a path in Compose Desktop with Skia
- Medium: Learn Jetpack Compose Animated Visibility
- Medium: Double Header LazyColumn in Jetpack Compose
- Medium: Why using Navigation-Compose in your Jetpack Compose app is a bad idea
- Medium: Customizing Material Theme with Jetpack Compose
- Medium: Jetpack Compose for Views developers — Part 01 — LinearLayout
- Our Journey from XML to Jetpack Compose UI
- Jetpack Compose list performance optimization
- Medium: GridView and LazyColum Integration With Jetpack Compose
- Android jetpack compose bottom navigation bar
Resource Roundup
100% pure code!
GitHub: aldefy / Andromeda
Adid Lal has released an early version of Andromeda, a full design system for Compose UI, apparently building on top of Compose Material. See the associated blog post for more!
GitHub: canopas / JetCountrypicker
The Canopas team is back at it, this time with a bottom sheet showing countries and their respective flags and phone number prefixes, to let the user select a country of interest.
GitHub: c5inco / shape-composer-figma
Google’s Chris Sinco brings us a Figma plugin to convert a Figma shape (VectorNode
)
into a composable Shape
, ready to be pasted into your project.
Gist: c5inco / MenuToClose.kt
Chris Sinco appears yet again, this time with a composable animation to swap between a three-line menu icon and a close “X” icon, where the top and bottom lines from the menu turn into the arms of the X.
…And One More Thing
Compose UI performance is an issue. It seems like developers have to think about performance
more with Compose UI than with equivalent View
-based solutions. Part
of that is the technology, which relies very heavily on JIT/AOT for optimization.
Part of that is tied to our experience, where we now need to think about things
like overcomposing that we are not
used to. And, some probably represents just general performance problems in a highly-complex
framework.
In time, all of this will be better, through improved tools, improved techniques,
and improved technology. The latter comes in the form of ever-more-powerful devices.
Part of the reason why Compose UI optimization is hard is because, for many UIs, current
hardware can run sub-optimal View
-based code well enough that we do not have to worry
about wasted CPU/GPU cycles. Even with Compose UI, poor-performing code may still be
acceptable, just because we have the power in the phones.
However, on the frontiers, Compose UI performance is a bigger problem in the present day. One example is with Wear OS.
Google clearly wants us to use Compose UI on Wear OS. They have dedicated libraries and composables for Wear OS. They even set up a dedicated Kotlinlang Slack channel for Wear for Compose.
And on the Samsung Galaxy Watch4, with a modern CPU and Wear OS 3, Compose UI runs well.
Performance problems crop up with everything else.
Wear OS was largely ignored by Google for years. Worse, Wear OS was largely ignored by CPU manufacturers for years, particularly Qualcomm. Even if you limit yourself to Wear OS 2 and higher, most watches sport a Qualcomm Wear 2100 CPU, from 2016. Others are worse off, sporting Snapdragon 400 CPUs (2013) or MediaTek MT2601 CPUs (2015). GPUs also seem to be underpowered.
Compose UI is slow, the watches are slow, and the combination can be a real problem. On an app that I am working on, testing on a MediaTek MT2601-powered watch leaves me with a UI where swiping pages and scrolling content is very janky.
Our “go-to” argument for Compose UI is “the app will perform better over time after JIT kicks in”. That argument is fine if the app performs acceptably at the outset and improves all the way to fairly decent in time. That argument falls apart if the app performs poorly at the outset, as users simply will not use the app long enough for performance to improve. They will uninstall the app, leave a bad Play Store review, and so on.
In the future, as watch performance improves, things will get better. But right now, while the Galaxy Watch4 appears to be selling well, it still represents a small slice of the Wear OS market.
If you are planning on supporting Wear OS, and you are planning on doing so using Compose UI, budget time for performance tuning, and have a plan for what to do if older/slower watches simply cannot run your UI well.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-10-01: Lazy grids! Focus! @colinmarsch@androiddev.social on CMP accessibility! @skydoves@androiddev.social on Landscapist! @sinasamaki@androiddev.social on Slider()! And... what is it?!?
- 2024-09-24: A Compose security fix and a new alpha! clipToBounds()! Localization! offset()! @skydoves@androiddev.social on server-defined UI! Bottom sheets! And... someone set us up *3* BOMs?!?
- 2024-09-17: Compose 1.7.1 and Compose Multiplatform 1.7.0-beta02! Flow layouts! TV Compose! SharedBounds! Image cropping! And... why does remember() not seem always to remember?!?