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!
Other Interesting Links
- Creating a Blurred Toolbar Background in Jetpack Compose with Kotlin
- Integrating iOS into the Fold: Generating an IPA for Compose Multiplatform Projects
- Medium: Creating a Fully Customizable Top App Bar in Android with Jetpack Compose
- Medium: Handling User Input in Jetpack Compose: Text Fields, Buttons, and Gestures
- Medium: Native Date Picker in Compose
- Medium: Picture-Perfect Code: Uploading Images to the Server with Kotlin and Jetpack Compose using a RESTful API
- Medium: Pinch Zoom in Jetpack Compose
- Medium: Recreating WhatsApp Top Bar in Jetpack Compose: Part Three
- Medium: Scaffold’s PaddingValues in Jetpack Compose
- Medium: Simplify Calendar Integration with the MonthCalendar widget library: Jetpack Glance Component
- Medium: The Ultimate Series for Building a Todo Application on Android
- Medium: UI automation test in Jetpack Compose Using UI Automator
- Medium: WebView in Jetpack Compose
- Side Effects in Jetpack Compose: Demystifying the Concept
- Text Scaling in Jetpack compose
- Unleashing The Power Of Jetpack Compose Tooling: A Comprehensive Guide
Resource Roundup
100% pure code!
Haze
Chris Banes has published a Compose Multiplatform library offering a haze()
modifier to apply a glassmorphism effect to a composable.
GitHub: taewooyo / volcano
GitHub user taewooyo released a Volcano()
composable for rendering a heatmap, with
a DSL for defining the items that appear in the heatmap.
GitHub: jordond / MaterialKolor
Jordon de Hoog released a Compose Multiplatform library for generating a Material3 color palette based on a supplied input color or image.
GitHub: sharp-edge / ComposePinInput
Sarmad Thebo brings us a library with a ComposePinInput()
with support for PIN
codes, OTP codes, and the like.
GitHub: PratyushSingh07 / BumbleCardSwipe
Pratyush Singh gives us a swipeableCard()
modifier to give a composable swipe gestures,
akin to dating app cards.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-10-01: Lazy grids! Focus! @colinmarsch@androiddev.social on CMP accessibility! @skydoves@androiddev.social on Landscapist! @sinasamaki@androiddev.social on Slider()! And... what is it?!?
- 2024-09-24: A Compose security fix and a new alpha! clipToBounds()! Localization! offset()! @skydoves@androiddev.social on server-defined UI! Bottom sheets! And... someone set us up *3* BOMs?!?
- 2024-09-17: Compose 1.7.1 and Compose Multiplatform 1.7.0-beta02! Flow layouts! TV Compose! SharedBounds! Image cropping! And... why does remember() not seem always to remember?!?