jetc.dev Newsletter Issue #186

Published: 2023-10-17

This week, we look at empty composables and slow insets. We examine gestures, migrations to Compose, and MotionLayout(). We see a slick branded QR code generator. And, we have to put up with complex math (ugh!).

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Tell If a Composable is Empty?

Sometimes, you may want to treat a slot parameter differently if it has no content. One approach is to have the parameter be nullable and pass null to indicate a no-content case. Or, you could see if the composable has no height. See how both of these work in this week’s highlighted Stack Overflow question.

When Can I Read the Insets?

WindowInsets sometimes returns 0 for an inset size, before it returns the real value. Learn more about why this is and some options for working around it in today’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Video: Gestures in Jetpack Compose

Google’s Joldanda Verhoef looks at the mechanics behind custom gestures, powered by pointerInput(), such as pinch-to-zoom, drag-to-pan, and drag-based multiple selection logic.

Jetpack Compose: Tips & Tricks from Our Android App Migration

Lucian Ghimpu explains how his team migrated their reusable UI elements from classic Views to composables. Lucian focuses on key lessons, such as using a design system and the importance of having a consistent Compose-friendly UI architecture.

Custom Shapes in Jetpack Compose

Maksim Golendukhin examines the process for creating custom Shape implementations and applying them to composables. The end result is a triangular button with rounded corners. Warning: post contains a fair bit trigonometry, so be sure to have had your coffee first! ☕ 😁

Medium: Jetpack Compose Custom Hideable Bottom Sheet

Igor Stevanovic needed a bottom sheet, but the built-in options lacked flexibility in the desired areas. In this post, Igor explains the basics of setting up your own custom bottom sheet implementation, employing anchoredDraggable() as the foundation.

Toggle Password Field in Android using Jetpack Compose

The GeeksForGeeks team looks at how we can implement a toggle button that controls whether a password field is shrouded or not. This involves the trailingIcon slot parameter to TextField(), where we can supply an IconButton() for the desired interaction.

Medium: Mastering Animation Magic: MotionLayout in Jetpack Compose

Ali Yüce wanted a button that, when clicked, contained an animated effect of putting an item into a shopping cart. To pull off this effect, Ali used MotionLayout() and a roster of ConstraintSet JSON definitions.

Mastering Jetpack Compose Performance With Examples: Part 1

Sagar Khurana looks at techniques for boosting performance of your composables by avoiding overcomposition, such as moving some changes to the layout or drawing phase.

Custom Layout - Made Easy With Jetpack Compose

Md Zahirul Islam explores the Layout() composable for fully-customized layouts. The specific example is creating a custom grid where the children are laid out in a “snake” format (first row starts on the left, second row starts on the right, etc.).

Jetpack Compose Text: A Complete Guide

Mohammed Rashid walks us through many of the configuration options available for the Text() composable, from simple scenarios (bold, font size, etc.) through more elaborate ones (gradient colors, drop shadows, text selection, etc.)

Other Interesting Links

• Adding icons to text in Jetpack compose with Kotlin and Android
• Medium: Bringing Compose Multiplatform to Life: Seamlessly Incorporating ktor, koin, and voyagar Integration
• Medium: Creating Dynamic Background Blur with Jetpack Compose in Android
• Medium: Finding a random point on a polygon
• Medium: Improving RoundCornerShape Appearance in Narrow Widths
• Medium: Jetpack Compose: Recomposition
• Medium: Make your System bars colorful
• Medium: Realm With Jetpack Compose
• Medium: Recreating WhatsApp Top Bar in Jetpack Compose: Part Two
• Medium: Theming and Styling in Jetpack Compose: A Detailed Walkthrough
• Slides: Composing an API the right way
• Slides: Modifiers: The secret sauce of Jetpack Compose
• Using SFSymbols in Jetpack Compose

Resource Roundup

100% pure code!

GitHub: alexzhirkevich / qrose

Alexander Zhirkevich created a QR code generation library for Compose Multiplatform, with supports for custom code shapes and colors.

GitLab: Lazy layouts for Compose HTML

The OpenSavvy team figured out how to implement lazy layouts for Compose HTML, such as LazyColumn().

GitHub: ozcanalasalvar / picker

Özcan Alaşalvar brings us spinner- or wheel-style date and time pickers for Compose. The wheel view itself is available separately.

GitHub: md0092651 / PlotWizard

Mithilesh Dhupia offers us another graphing library, supporting line, pie, range, and circular bar charts.

Other Interesting Links

• Gist: chachako / Toast.kt
• Gist: jisungbin / Modifier.drawHorizontalFadingEdges.kt
• GitHub: NicosNicolaou16 / ImagePickerAndroid

Notable Releases

Maps for Compose now has a 3.1.1 patch release.

Resaca, a library that scopes ViewModel instances to composables, is up to 3.0.0 with a new approach for detecting when the hosting activity resumes.