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)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-10: A Compose Multiplatform alpha! Hot reload! Presentation! Sprites! Calendars!
- 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?!?