jetc.dev Newsletter Issue #127
Published: 2022-08-09
This week, we look at minimum heights and snapshot problems. We revel in all the presentations from droidcon Berlin 2022. We learn about shimmering text and shimmering… other stuff. And, we play around with charting and cameras.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Do We Request a Minimum Height?
A common UI pattern is to have a minimum height for some UI element, where it can be taller if the content calls for it. There are a couple of different options for implementing this, as we see in this week’s highlighted Stack Overflow question.
When Should We Load Data?
One common runtime error in Compose development is: “Reading a state that was created after the snapshot was taken or in a snapshot that has not yet been applied”.
One cause is trying to trigger work from a ViewModel
constructor, even though
that might be a natural approach to implement. So, should we use something else,
like triggering that work from a LaunchedEffect
instead? Learn more in this week’s
highlighted Kotlinlang #compose
Slack thread!
Droidcon Berlin 2022
droidcon Berlin had a lot of Compose-related presentations!
- Basic Layouts in Compose
- Building Glanceables with Compose
- Composable Sheep: A Compose Animations Journey
- Compose Beyond Material Design
- Explained: Compose Compiler and Runtime
- How to Test Your Compose UI
- Implementing a Design System in Compose
- Invest in Real State: A workshop for State in Compose
- Lazy and amazy – Lazy layouts in Compose
- Lessons Learned Migrating the Maps SDK to Compose
- Painless, Typesafe Jetpack Compose Navigation with Voyager
- Shooting a “Glance” at App Widgets
- Something old, something new: Adding Jetpack Compose to a large open source Android app
- Using Compose Runtime to create a client library
- Write it down: Using text in Jetpack Compose
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Medium: Animating brush Text coloring in Compose
Google’s Alejandra Stamato continues an exploration of the new Brush
API for
text in Compose UI 1.2.0. This time, Alejandra looks at adding a shimmer effect,
involving animating a color gradient, to text.
Medium: Jetpack Compose Shimmer Animation
If you like shimmer effects, but not necessarily for text, Erselan Khan has you covered!
While there are a few libraries available to help with such shimmer effects, Erselan
shows you how to add one just using the standard Compose UI SDK, based on
rememberInfiniteTransition()
and a tween()
animation of a gradient.
Medium: How to reuse data for previews in Jetpack Compose
Many Compose UI developers rely heavily on @Preview
and the IDE for rapid
iteration on composable implementations. Juan Guillermo Gómez Torres walks us through
the use of PreviewParameterProvider
and @PreviewParameter
to make it easy
to set up several previews with varying custom data, so you can see how your
composable reacts across a bunch of scenarios.
Composing margins and paddings
Thomas Künneth is back, this time looking at whitespace. In the classic View
system, we had padding and margins. Compose UI only offers padding, and Thomas
walks us through how we can use padding to have the same visual effect as margins.
Gotchas in Jetpack Compose Recomposition
Justin Brietfeller explores recomposition, something every Compose developer experiences but few fully control. Justin looks at how Compose can optimize away recompositions and explains how some common programming techniques, like lambda expressions, can cause more recompositions than you might expect. Justin also looks at various ways to revise our approaches to help Compose skip recompositions and improve overall UI performance.
Medium: Infinite Auto-Scroll with Jetpack compose
Hardik P looks at lazy rows/columns that automatically scroll through their
contents, looping back around to the beginning of the list for an “infinite”
presentation. Hardik builds up a AutoScrollingLazyRow()
composable from
parts, with a tween()
animation for controlling the actual scroll amount.
Velocity Based Animation with Compose
James Morrissey asks “Do you have a keen eye for fine details when it comes to UX?” In my case, the answer is “oh, heck no”. But, James is good at this sort of thing! So, in this post, James explores having fling animations be configured in part by the initial velocity of the fling, such as having the range of an alpha animation depend on how strongly the user performed the fling.
Medium: Implementing a circular carousel in Jetpack Compose
Francesc Vilarino Guell returns with another form of animation: a circular 3D-style
carousel of cards. Francesc demonstrates how to build up a CircularCarousel()
to implement this effect. Content Warning: this post contains trigonometry.
Other Interesting Links
- Medium: Capture Photo using Jetpack Compose
- Medium: How to read data from Firebase Realtime Database and display it using Jetpack Compose
- Why I fell in love with Jetpack Compose at first sight: and not looking back
- Video: Imperative is Dead, Long Live Declarative!
- Medium: Navigate with arguments in Jetpack Compose
- Medium: Jetpack Compose: Build Better Apps Faster
Resource Roundup
100% pure code!
GitHub: KoalaPlot / koalaplot-core
The Koala Plot team released their eponymous Kotlin/Multiplatform charting and plotting library. In addition to supporting Android, desktop, and Web targets, it offers several different types of charts (pie, line, bar, etc.) with a fair bit of customizability.
GitHub: nilsjr / Snappy
Nils Druyen released a library that provides an activity for taking photos using CameraX. The activity is implemented in Compose UI, and it can be accessed from composables using the Activity Result API.
Other Interesting Links
- GitHub: huhx / compose_image_picker (image picker)
- GitHub: Nthily / SlideTodo (slide to unlock widget)
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?!?