jetc.dev Newsletter Issue #173

Published: 2023-07-18

This week, we look at ellpisizing and custom design systems. We explore where Coil is going and take a deep dive into accessibility. And we examine dealing with avoiding font scaling, from a simple extension property to a KSP-based code generator for creating dimension values tied to screen widths.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can We Ellipsize Despite Other Row Content?

Sometimes, Text() that we want to ellipsize is alongside other elements in a Row(). Getting that text to properly truncate, without harming the other elements, can be a bit tricky — weight() alone might not be enough. Learn more in this week’s highlighted Stack Overflow question.

How Do We Implement a Fully Custom Design System?

Designers do not always like using Material Design. Sometimes they try applying iOS designs to Android, or they just do something totally different. Compose UI has the capability of supporting a fully custom design system, but much of the documentation and examples assume Compose Material or Compose Material3. See how various developers approached the problem in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Multiplatform image loading: Coil 3.0

Colin White explains that Coil 3.0 will support Kotlin/Multiplatform, with an eye towards eventually supporting Compose Multiplatform and supporting iOS, desktop, and Web in addition to Android.

How to Provide Accessibility in Your Native Android App with Jetpack Compose | Part 1

Karol Wrótniak explains in detail what accessibility means, why accessibility is not just for people with permanent disabilities, and various Compose-related techniques for improving accessibility.

Improving Android Accessibility with Modifiers in Jetpack Compose

Eeva-Jonna Panula continues the accessibility theme and dives into more modifier-centric ways to improve accessibility. Topics include the role parameter to clickable(), using selectable() and selectableGroup() for radio buttons and their captions, and using toggleable() for switches/checkboxes and their captions.

Tweets: TextMotion

Google’s Halil Özercan wrote a Twitter thread about TextMotion flags that you can use in a TextStyle to help smooth out animations to text size changes.

Medium: Meet “Y-Charts”: an Opensource Jetpack Compose chart library

The YML Innovation Lab describes their Y-Charts library for implementing bar charts, line charts, wave charts, bubble charts, pie charts, and donut charts in Compose UI. So. Many. Charts.

Medium: Preventing Font Scaling in Jetpack Compose

Last week, I blogged about how text will not always scale. Katie Barnett follows up with an implementation of a nonScaledSp extension property that is usable with Text() and TextStyle but avoids applying the system font scale for situations where that is unnecessary.

Medium: Collapsing Toolbar in Jetpack Compose | A closer look at the Toolbar — Part 2

Glenn Sandoval has been exploring the collapsing-toolbar UI pattern in Compose UI over several Medium posts. In this one, Glenn adds some “fine-tuning” polish to the CollapsingToolbar() implementation.

Other Interesting Links

• Android Development: Using Alert Dialog with Button in Jetpack Compose
• Creating a Dashed Border in Jetpack Compose
• ElevatedButton in Material 3 Jetpack Compose
• Lottie Animations in Jetpack Compose (with Examples)
• Medium: Creating interactive UIs with Motion Layout using Jetpack Compose
• Medium: Error Handling in Clean Architecture using Flow and Jetpack Compose
• Medium: Navigating Back with Data in Jetpack Compose
• Navigation With Compose
• TextButton in Material 3 Jetpack Compose

Resource Roundup

100% pure code!

GitHub: ghasemdev/affogato Unit-Size

Ghasem Shirdel’s affogato library suite has a library for Compose unit sizes. In addition to implementations of sdp and ssp units, it also offers a @Dimen annotation that uses a KSP code generator to allow you to easily adjust dimensions based on current screen width. This library also a variety of extensions for window size classes, folding device postures, and more.

GitHub: realOxy / touchbar

You may have seen video editors that explode a video into a series of thumbnails, allowing you to navigate through the video via a thumbnail carousel. GitHub user realOxy offers an implementation of that for Compose UI.

Variables Converter

Laurent Thiebault publishes a Figma plugin that converts Figma variables into code for various platforms, including Compose UI.

GitHub: cnrture / PickerSheet

Caner Türe created TextPictureSheet(), CheckBoxPickerSheet(), and RadioButtonPickerSheet() implementations for common forms of user-selection bottom sheets.

Other Interesting Links

• Gist: Andrew0000 / ComposeShadow.kt (custom drop shadows)
• Gist: hrules6872 / DragDropLazyColum.kt (drag-and-drop in a LazyColumn())
• Gist: maulikhirani / BoxShadow.kt (more custom drop shadows)
• GitHub: kosher9 / Compose-Round-CheckBox (round checkbox implementation)