jetc.dev Newsletter Issue #189

Published: 2023-11-07

This week, we look at implementing chips in fields. We get excited about Compose Multiplatform, ask “what’s the diff?” about diffing, and find ways to use custom fonts in Glance app widgets. And we explore heatmaps, palette generation, and glassmorphism.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Three Compose-related artifacts received updates:

androidx.hilt:hilt-navigation-compose:1.1.0
androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0-beta01
androidx.navigation:navigation-compose:2.7.5

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

How Can I Create a Field of Chips?

One UI pattern involves converting words into chips that can then be clicked upon, deleted, etc. While there is a existing library for the pattern, you can also create something similar by using FlowRow() and having a BasicTextField() at the end of the chips, as we see in this week’s highlighted Stack Overflow question.

How Can I Fill But Not Expand?

To have content on both sides of a Row() (or things that use a Row(), like a TextButton()), one easy solution is to use a Spacer() with a weight of 1. However, you have to be a bit careful to ensure that the Spacer() does not cause the Row() itself to get wider. Using width(IntrinsicSize.Min) can help here, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Compose Multiplatform 1.5.10 – The Perfect Time To Get Started

JetBrains’ Garth Gilmour announces the release of Compose Multiplatform 1.5.10. This update supports Kotlin 1.9.20, improves iOS support, and implements a few new Material3 components in common code, such as ModalBottomSheet() and SearchBar().

Medium: The Diffing Dilemma! All about diffing, from RecyclerView to LazyLists — An Introduction

Garima Jain explors diffing in the world of the lazy composable containers, where changes to the collection get reflected in the visible items in the container. Garima starts by exploring RecyclerView and how it handled diffing, then continues in a follow-on post to see how Compose improves upon the concept.

How to create list sections with animated shapes

Konstantin Klassen wanted to use LazyColumn(), but where a sequential block of items might visually appear as a section with a rounded rectangle effect. This requires having each item’s background vary based on its peers (top of rounded rectangle, interior, and bottom of the rounded rectangle). Konstantin shows how to implement that, adding animations as well!

Medium: How to Use Render Effects in Jetpack Compose for Stunning Visuals

Megh Lath explores using RenderEffect in a graphicsLayer() modifier for rich effects: blurs, collapsing and expanding a floating action menu, and animating changes in text and images.

Medium: Jetpack-Glance: No way to custom fonts

Arman Chatikyan ran into some challenges in using a custom font in a Glance-powered app widget. This is not surprising, as app widgets are rendered by a third-party process, and that process may not have the desired font. Arman addressed this by rendering the text using the custom font onto a Canvas().

Medium: How to show a PDF with Jetpack Compose

Graziano Rizzi explains how to use PdfRenderer to generate bitmaps for pages of a PDF, then render those bitmaps using Image() composables in a lazy container.

Medium: Jetpack Compose — Top Tabs

Medium user MaheshGubbi walks us through creating a top tab row, including plain-text tabs, tabs with icons, tabs with text and icons, scrollable tabs, and more!

Resource Roundup

100% pure code!

Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.

Recent Issues:

All Issues

Spread the Word!

Suggestions?

If you have ideas for items for future newsletter editions, reach out via email or contact Mark Murphy on kotlinlang Slack!