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.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-12-03: Rebecca Franks on clipping and masking! Stefano Natali on graphicsLayer()! FunkyMuse on type-safe nav results! And... if we have enough maps, do we need to store our maps in a Map?!?
- 2024-11-26: Math! Shared element transitions! Custom modifiers! Macrobenchmark! Adapting to platform-specific design systems! And... why does wrapContentSize() not wrap my content size?!?
- 2024-11-19: Compose alphas! Compose Multiplatform patch! PaddingValues! Graphics layers! Swiping! Heatmaps! Navigation! And... why did we get a new production Compose BOM?!?