jetc.dev Newsletter Issue #197

Published: 2024-01-09

This week, we see how to replace View.GONE and what it means for composable parameters to be “equal” for skipping. We explore BasicTextField2() and compose with Decompose. We build a semi-circular slider and a segmented picker. And Canopas has been busy, giving us a showcase library and a composable wrapper for RecyclerView()!

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Do I Replicate View.GONE?

With classic views, we had the ability to retain the View but eliminate its UI. Google’s Rebecca Franks steers us away from that towards conditional compositions, but does offer an implementation of a gone() modifier, in this week’s highlighted Stack Overflow question.

How Are Composable Parameters Compared for Skipping?

If we want a composable to be skipped for recomposition, its parameters must be equal to those from the previous invocation. But, what exactly constitutes “equals” here? Is it ==? Is it ===? Does the Compose Compiler define ========?!? Learn more in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Video: TextField in Jetpack Compose: past, present and future

In a presentation for Women Techmakers Berlin, Alejandra Stamato walks us through the limitations of BasicTextField() and composables that wrap it, such as TextField() and OutlinedTextField(). Alejandra then explains how the replacement — currently known as BasicTextField2() — will address those concerns and improve the API surface.

Medium: Learn How To Create Shared KMP Navigation With Decompose

Michal Ankiersztajn explains how to use the Decompose library to have navigation within a Compose Multiplatform project, including Android, iOS, and desktop support.

Slides: Architectural Pattern for Large-Scale Jetpack Compose Apps

In a presentation for GDG Ahmedabad, Bhoomi Vaghasiya Gadhiya reviews the main MV* family of architectural patterns, examines how to choose the one that makes sense for your app, and how to implement it in Compose.

Medium: Mastering Text Field Customization in Android with VisualTransformation: A Jetpack Compose Guide

William Rai takes a deep dive into VisualTransformation with Compose fields, including the roles of TransformedText and OffsetMapping in defining what should appear based on what a user enters.

The fundamentals of building a circular draggable Slider in Jetpack Compose

Terrence Aluda needed a semi-circular slider, such as you might see in some thermostats. Terrence accomplished this using a Canvas() and its drawArc() and drawCircle() DSL functions, along with a pointerInteropModifier() for handling the touch input.

Medium: Custom Reusable Segmented Picker in Jetpack Compose

Marwa Diab walks us through the implementation of a “segmented picker”: a row of items where the current selection is highlighted using a rounded rectangle background. This includes the use of LazyRow() for the core content, plus a Canvas() and AnimatedContent for handling the animation of the selection indicator.

Power Up Your Jetpack Compose Previews

Mitchell Giles explores the range of configuration properties on the @Preview annotation, along with other techniques such as having multiple @Preview annotations for a composable, defining custom annotations, and applying PreviewParameterProvider to help supply test data for the previews.

Other Interesting Links

• Demystifying Jetpack Compose Modifier Order
• Medium: Exploring rememberSaveable in Android Compose
• Medium: How to create Animated Progress Bar in Jetpack Compose using Canvas
• Medium: How to handle multiple Bottom Sheet in Jetpack Compose
• Medium: How to implement Expandable Text in Jetpack Compose
• Medium: How to use Lottie files in Jetpack Compose
• Medium: How to Use Moko-Media and Moko-Permissions in Compose MultiPlatform
• Medium: Jetpack Compose Step by Step Integration Guide
• Medium: Jetpack Compose: Layouts, Animation, and Theming
• Medium: Optimizing Lazy List in Jetpack Compose: Best Practices
• Medium: Scoping shared View Model dependencies in Single Activity Android Apps using Hilt
• rememberSaveable in Jetpack Compose
• Understanding file associations in JVM apps
• Using CSS libraries with Compose for Web

Resource Roundup

100% pure code!

GitHub: canopas / compose-intro-showcase

The Canopas team released a library offering a “showcase” style UI to highlight particular UI elements, typically for first-time users. It consists primarily of an IntroShowcase() composable wrapping your UI and an introShowcCaseTarget() modifier to use on the composables that you wish to highlight.

GitHub: canopas / compose-recyclerview

The Canopas team also released a library that wraps RecyclerView in a composable, as an alternative to LazyColumn() or LazyRow(). It supports drag-and-drop, item swipes, and configuration of the underlying RecyclerView.

GitHub: frank-nhatvm / jnav

GitHub user frank-nhatvm created another KSP-based annotation processor that simplifies the development of routes for Navigation for Compose.

GitHub: pablichjenkov / macao-sdk

GitHub user pablichjenkov offers us a Compose Multiplatform library with pre-defined composables for navigation and common UX patterns (e.g., authentication).