jetc.dev Newsletter Issue #142
This week, we get a double-handful of videos from droidcon London 2022. We look at variable fonts, accessibility, and rotary input. We see libraries for text flowing around images and fingerpainting. And we learn about donut holes, a subject that may or may not make you hungry.
NOTE: This newsletter is now being delivered via Buttondown, rather than Revue. If you were a subscriber via Revue, I moved your subscription over to Buttondown. If you are not receiving the newsletter, check your spam folder!
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Do We Dismiss a Dialog()?
The verb “dismiss” is the prose equivalent of a code smell. Dismissing something is an action; Compose is based primarily on states. With Compose’s declarative approach, you simply skip rendering the dialog when you no longer need it, as we see in this week’s highlighted Stack Overflow question.
How Do We Animate a Tab Selector?
A horizontal row of items, such as a row of tabs, might include some visual indicator
of a selection. You might want to animate the transition as the selection moves
to different items. Several solutions are identified in this week’s highlighted
#compose Slack thread.
droidcon London 2022
The droidcon London 2022 conference videos are up, including a bunch tied to Compose, such as:
- Branching out to Jetpack Compose
- Composable Sheep: The Creative Coding Epilogue
- Compose beyond Material
- Composing in your Canvas!
- Composing With Confidence
- Demystifying Molecule: Running Your Own Compositions For Fun And Profit
- Model-driven navigation with Appyx – From zero to hero
- Take a look at Jepack Glance
- Thinking outside the Box: Custom Compose layouts
- Understanding Recomposition Performance Pitfalls
Posts, videos, and other new information related to Jetpack Compose!
Medium: Just your type: Variable fonts in Compose
Google’s Alejandra Stamato writes about Compose UI’s variable fonts support, available
on Android 8.0 and higher, via the
FontVariation experimental API.
Medium: Faster Jetpack Compose <-> View interop with App Startup and baseline profile
Google’s Sagar Begale demonstrates the benefits of using Baseline Profiles with Compose apps, for reducing the time it takes to load your initial composable.
Video: Building accessibility support for Compose
Android Developer Summit 2022 Part Three was focused on the platform and as such
did not have much in the way of Compose-centric content. However, Google’s Caren Chang did
talk about accessibility in Compose UI, using things like the
modifier and the
contentDescription parameter to
Rotary Input in Wear OS with Compose
Wear OS supports “rotary input”, whether that is supplied by a rotating crown, a
rotating bezel, or a touch sensitive ring that simulates a rotating bezel.
Vinícius Veríssimo teaches us the importance of supporting rotary input in our
Wear OS apps and how to use the
onRotaryScrollEvent() modifier to accept
rotary input in a
ScalingLazyColumn() or a
Medium: What is “donut-hole skipping” in Jetpack Compose?
The Compose team uses “donut holes” and “donut-hole skipping”. This is a limited metaphor — after all, jelly donuts do not usually have holes, and you certainly do not want to skip the jelly. Emad Shehadah researched what the Compose team means by “donut holes”, in the context of optimizing recompositions, and makes the connection between “donut holes” and composition scopes.
Medium: derivedStateOf() – A definitive guide on when to use it
An Android developer going by the Medium handle “The Android Developer”
walks us through the role of
derivedStateOf(), including comparisons to
distinctUntilChanged() operator on
Flow and how proper use of
can reduce unnecessary recompositions.
Video: Exploring Constraint Layouts in Jetpack Compose
Amanda Scheetz delivered a presentation for GDG Cincinnati about the use of
ConstraintLayout() in Compose UI work, including creating reference IDs for rules
constraints() modifier’s DSL for defining the constraints between
Under the hood of Relay
Relay has definitely captured the attention of many Compose UI developers… including Kevin Schildhorn. While most material focuses on how to use Relay, Kevin dives into the generated code. As with a lot of generated code, Relay’s code is a bit messy compared to hand-written composables, and it relies on a library full of Figma-defined composables, but the code works!
Medium: Jetpack Compose Bottom Border
Ban Markovic is back, exploring an edgy topic: borders. While Compose UI offers
border() modifier, it draws the border around an entire shape. Ban wanted
a border on just one side (the bottom) and demonstrates how to implement that using
Other Interesting Links
- Jetpack Compose - Recompositions
- Compose by example: BoxWithConstraints
- Medium: Message Bar Compose — My First Open-Source Library on Github!
- Podcast: Compose vs XML – Which one should you learn as an Android Dev?
- Video: How to add Baseline Profiles
- Medium: Exploring AnimatedContent and Crossfade in Jetpack Compose
- How to Create Gradient Background in Android Jetpack Compose
- CompositionLocal in Jetpack Compose
- The color of Composable functions
- How To Make A Custom Bottom Navigation In Jetpack Compose Android Studio
- Medium: Constraint Layout in Jetpack Compose with Examples
- Medium: Creating a Basic Language Learning App with Jetpack Compose #6- Basic Dictionary with Firestore
- Android Jetpack Compose – Implement Google AdMob Banners Ads
- Reddit: Jetpack Compose Architecture
- Android Jetpack Compose MVVM
- Getting started with Jetpack Compose
- Medium: As an Android developer, Things you need to know about Jetpack compose
- Get Started with Jetpack Compose Authentication, Part 1: Jetpack Compose Basics
100% pure code!
GitHub: romainguy / combo-breaker
Google’s Romain Guy brings us a
TextFlow() composable that allows text to flow
around images or other child composables.
GitHub: skydoves / Cloudy
Jaewoong Eum wanted a blur effect, but the
blur() modifier does not work on
devices older than Android 12. Jaewoong’s library gives us a
composable to wrap another composable that we wish to blur.
GitHub: zeeshanali-k / CanvasPainter
Zeeshan Ali created a fingerpaint-style drawing surface, with supplied controls
for choosing brush colors and more. Simply add a
CanvasPainter() composable where
you want it, supplying a remembered
PainterController for interactions.
GitHub: Breens-Mbaka / Searchable-Dropdown-Menu-Jetpack-Compose
Breens Robert created a
SearchableExpandedDropDownMenu() that “does what it says
on the tin”: it gives you a drop-down menu whose menu items can be searched upon,
suitable for arbitrary-length menus.
Other Interesting Links
- Gist: riggaroo / GradientAlongPathAnimation.kt (snippet to draw gradient on a path using tessellation)
- Gist: riggaroo / CompositingStrategyOffscreenExample.kt (demo of
- JeroKit (viewmodel-based navigation, etc.)
- GitHub: qamarelsafadi / ElasticView (pop effect)
- GitHub: jaikeerthick / Network-Image (image loader)
- GitHub: mhssn95 / compose-color-picker (family of color pickers)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-03-14: Compose RC! Wear Compose alpha! Grayscale composables! Updating our Compose dependencies! MVVM! Bottom sheets! And... another Figma-to-composable plugin?!?
- 2023-02-28: Updates to the Compose family of artifacts! Layout()! UiAutomator! Pull-to-refresh! @email@example.com on adding animation sizzle! ExoPlayer! PIN entry! And... @firstname.lastname@example.org is on TV?!?
- 2023-02-21: Modifiers! Drawing! Errors! Paging (and testing paging)! QR codes! KMM templates! And a correction from @email@example.com!