jetc.dev Newsletter Issue #170

Published: 2023-06-27

We got another round of Compose updates, including the first alpha for 1.6.0!

In addition, we look at required sizes and line breaks. We explore anchorDraggable() and compare declarative UI frameworks. We try to avoid folds and create expandable lists. Plus, we see new entrants in the competitive spaces for navigation and image loading.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

The Compose BOM is up to 2023.06.01, though right now the “BOM to library version mapping” page does not cover that version. 🤔

The main Compose libraries are up to 1.6.0-alpha01, even though the 1.5.0 series is still in beta. Of note:

• includeFontPadding is now false by default, which may require you to tweak your Text() and related composables, or at least update screenshot tests

• AnchoredDraggable was added to help simplify drag actions, such as opening bottom sheets — this replaces Compose Material’s Swipeable APIs, which are now deprecated

• There is a renewed focus on performance, with several runtime changes that should reduce recompositions, memory usage, and unnecessary recalculations

• LazyList() supports some lookahead-based optimizations

• FocusRequester() now supports saving/restoring which child composable has the focus

In terms of Compose-adjacent libraries:

• androidx.activity:activity-compose is up to 1.8.0-alpha06

• Paging for Compose (androidx.paging:paging-compose) is up to 3.2.0-rc01

• Wear Compose’s main libraries are up to 1.3.0-alpha01

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Does requiredSizeIn() Give Different Results Than requiredWidthIn() + requiredHeightIn()?

Google’s Ian Lake explains why a size modifier (that affects both dimensions) may appear to work differently than using width and height modifiers separately, in this week’s highlighted Stack Overflow question.

How Can We Control Line Breaks in Text?

The Text() composable handles line breaks automatically, but sometimes you may want to adjust the approach, such as to have more balance between the words on each line rather than have one long line and one short one. See more about the lineBreak option on TextStyle in this week’s highlighted Kotlinlang #compose Slack thread!

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Dropbox rebuilt its search experience 40% faster with Jetpack Compose

Google published a marketing piece, describing Dropbox’s experience in using Compose UI.

Announcing FoldAwareColumn in Accompanist Adaptive

Microsoft’s Kristen Halper and Google’s Jossi Wolf announced the release of FoldAwareColumn() as part of Accompanist Adaptive. FoldAwareColumn() works like an ordinary Column(), except it can have its contents skip around hinges. You get to control how much padding to place around the fold, which children can appear through the hinge, etc.

Medium: Exploring Jetpack Compose Anchored Draggable Modifier

Francesc Vilarino Guell is back, looking at anchorDraggable(), a modifier new to Compose Foundation 1.6.0-alpha01. anchorDraggable() assists in drag behavior (e.g., opening a bottom sheet), though it only tracks the drag — actually doing something to render the drag is up to us.

Compare Declarative Frameworks

Vinay Gaba added a tool to JetpackCompose.app to let you compare syntax and approaches between Compose, Flutter, React, and SwiftUI.

Lazy Grid Layouts in Jetpack Compose (with Examples)

The SemicolonSpace team walks us through using LazyVerticalGrid() and LazyHorizontalGrid(), including their support for Fixed and Adaptive column/row counts, Arrangement.spacedBy() for inter-cell spacing, and more.

Medium: How to create Expandable List in Jetpack Compose — Part 2 — Animations

Mrugendra Thatte is demonstrating creating expandable lists, where a list item (such as a section header) can be expanded or collapsed. In Part 1, Mrugendra sets up the basic implementation. In Part 2, the focus is on animating the transition between expanded and collapsed states.

Medium: Simplifying WebView in Compose with Accompanist WebView Wrapper

Oğuzhan Aslan explores using AndroidView() to wrap a WebView and turn it into a composable. Oğuzhan then compares and contrasts that with the WebView() composable from Accompanist, which offers more features with less effort.

Other Interesting Links

• Medium: Negative Padding For Jetpack Compose Made Possible
• Medium: Use Google Cloud Text-to-Speech in Jetpack Compose
• Medium: Implementing the Shimmer Effect in Jetpack Compose for Android Apps
• How to Create Gradient Backgrounds in Jetpack Compose?
• Medium: User stack animation in Jetpack Compose
• Medium: Theme picker animation in Jetpack Compose
• Podcast: Effective Android with Jorge Castillo
• Introducing Compose Hammer: A Powerful Jetpack Compose Material3 UI Builder Plugin
• Medium: Building a Modular White Label App
• Medium: Building Compose-Driven Architecture On Android With Circuit
• Medium: Exploring Jetpack Compose UI Testing
• Medium: Unit Test in Jetpack Compose
• Material 3 TopAppBar in Jetpack Compose (with Examples)
• Video: Jetpack Compose Best Practices - AMA
• Medium: Compositional Locals for Navigation in Jetpack Compose
• Medium: Navigation, Animation, and Data Passing using Android JetPack.

Resource Roundup

100% pure code!

GitHub: erictoader / Cartographer

Toader Eric-Stefan introduces another navigation option for Compose UI, using sealed classes for destinations, NavigationArgument interfaces for custom argument types, and transition support.

GitHub: panpf / sketch

GitHub user panpf published a large image loading library, with support for all sorts of extra features (SVGs, video frames, animated WebP and GIF support) in addition to Compose UI support.

Gist: chiragthummar / BouncyClickable.kt

Chirag Thummar posted a short snippet showing a bounceClickable() modifier that supports click/double-click/long-click events on a composable, while simultaneously offering a bounce effect to draw attention to the UI element.

Gist: oussama-dz / ImagePicker.kt

CHERFAOUI Oussama offers a quick demonstration of using ActivityResultContracts.OpenDocument as an image picker, then rendering the result using Coil. See this Medium post for more on the implementation.