jetc.dev Newsletter Issue #199

Published: 2024-01-23

This week, we look at JetBrains Compose tools vs. Jetpack Compose tools, plus determine how many angels fit on the head of a pin words fit on a line of a Text() composable.

We also explore optimizations and animations, play with a rich text editor, and see an OTP widget with built-in auto-fill from SMS.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Many Words Fit on a Line?

The onTextLayout parameter to the Text() composable lets you find out details of the laid-out text, such as how many lines the text took and what text went on each line. From there, you can do things like count the number of words on a particular line, as we see in this week’s highlighted Stack Overflow question.

How Can We Use JetBrains Compose Instead of Jetpack Compose?

Migrating an Android project from the Jetpack Compose toolchain to the JetBrains Compose toolchain is a necessary step if you want to start applying Kotlin Multiplatform to that project. Learn more about this migration process, and some hiccups along the way, in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: How Jetpack Compose optimizes its Recomposition?

Sanjay S walks us using Layout Inspector in Android Studio to measure recompositions, explains the concepts of “skippable” and “restartable” composables, and what it means for data to be immutable and/or stable.

Performance Optimization in Jetpack Compose

Continuing the theme of optimization, P N Bharat Kumar offers up tips related to derivedStateOf() and using keys in lazy containers, along with additional notes on immutable/stable types, and more.

State Driven Animations in Jetpack Compose

Audu Ephraim explores the various forms of animate*AsState(), such as animateFloatAsState(), used for animating arbitrary values that can then be used for positions, colors, rotations, and more.

Medium: Animating Visibility Changes in Jetpack Compose

Michihiro Iwasaki also explores animation, this time in terms of using AnimatedVisibility() to control the way some UI element appears and disappears from a composition.

Medium: How to add a Password TextField component with toggle icon in Jetpack Compose

A common UI pattern on password fields is to have some sort of end toggle icon, such as an eyeball, to flip between plaintext and shrouded passwords. Mun Bonecci explains how to implement this using TextField() and its trailingIcon slot parameter, along with a VisualTransformation.

Medium: How to add Gradient colors in Text using Brush and TextStyle in Jetpack Compose

Mun Bonecci also wrote up a recipe for using a Brush in text rendering to allow the text to have a gradient fill.

Other Interesting Links

• Bottom Navigation Bar in Jetpack Compose
• Building a Basic DateField in Jetpack Compose: A Step-by-Step Guide
• Jetpack Compose: The Android Developer Roadmap – Part 5
• Medium: Accessibility and Testing Fundamentals in Jetpack Compose
• Medium: Building a list-detail layout in Jetpack Compose
• Medium: Circular Progress Bar in Jetpack Compose
• Medium: Effect Handlers in Jetpack Compose
• Medium: Exploring LaunchedEffect in Jetpack Compose: 10 Questions Answered
• Medium: How to ask for user permission with Jetpack Compose
• Medium: How to custom Jetpack compose Material3 TextField
• Medium: Jetpack Compose Magic: Effortless View Disintegration With AGSL Shaders
• Medium: Jetpack Compose: Passing data implicitly in Composable screens
• Medium: Jetpack Compose: remember, mutableStateOf, derivedStateOf, and rememberSaveable explained
• Medium: Koin-Dependent Composable Previews in Android Jetpack Compose
• Medium: Netflix Toolbar Scroll Effect

Resource Roundup

100% pure code!

GitHub: canopas / rich-editor-compose

The Canopas team has been busy releasing libraries. This time around, they make available one with a RichEditor() composable offering support for bold/italics/underline.

GitHub: pushpalroy / ComposeOtpVerify

Pushpal Roy brings us a one-time password/PIN (OTP) entry widget with built-in integration with Google’s SMS retriever API. That way, users can type in a OTP value or automatically use one received via SMS.

GitHub: dokar3 / compose-sonner

GitHub user dokar3 is back, this time with a toast implementation supporting actions, custom styling and icons, support for stacked and expanded toasts, and more!

GitHub: serbelga / pigment

Sergio Belda Galbis brings us a ColorPicker() composable, designed to be used from a screen or dialog.

Other Interesting Links

• GitHub: Ashutoshwahane / Animator (bounce and heartbeat animations)
• GitHub: EranBoudjnah / Loaders (gears and jigsaw loading animations)
• GitHub: loukwn/StageStepBar (progress bar with indicators)