jetc.dev Newsletter Issue #161
This week, we look at a new Compose Compiler… as well as the next Compose Compiler.
We also deal with insets, work with TVs and keyboards, crop some images, and gaze upon an alpha of Compose for iOS.
Ooooo… What Did We Get?
Reviewing the release notes for the latest Jetpack Compose update!
Compose Compiler now has a
1.4.5 release. On the plus side, it supports
1.8.20. However, it also accidentally introduced a requirement for Java 17
to build. That issue may be addressed this week in a
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
How Can We Create a Custom Shape?
At a high level, you implement a
Shape (and override
createOutline()) or create a
(where your supplied lambda forms the implementation of
See the latter approach in action, with convex/concave rounded rectangle, in
this week’s highlighted Stack Overflow question.
How Can We Control Animations by Key?
Wanting to animate between major state changes, such as loading/content/error,
is common. However, sometimes it can be tricky to only animate between
those state changes and not animate for same-state updates, such as having
refreshed content. Alas,
AnimatedContent() lacks a
contentKey — see
a workaround in this week’s highlighted Kotlinlang
#compose Slack thread.
Posts, videos, and other new information related to Jetpack Compose!
Drawing edge to edge in Jetpack Compose
Alex Styl wants your app to render all the pixels: making the status bar and navigation bars transparent, having your background extend edge-to-edge, and having your content avoid the bars using the Insets API.
Different types of width in jetpack compose
You might think things like “width” are easy. Tarik Billa is here to point out
that width, at least, is not easy. There are many options for defining your
width, including modifiers (
and constraints with
Pass by Value vs CompositionLocal vs Static CompositionLocal
Our composables need stuff. Most of the time, we pass that stuff in via function
parameters. Vincent Tsen explores the differences between that and using
CompositionLocal in terms of how they affect recomposition.
Google’s account switcher with Jetpack Compose
Victor Brandalise shows us how to reproduce the Google account switcher UI. This shows an account avatar, where gestures cause the current avatar to animate out and another avatar to animate in.
Medium: Exploring Surface Composable in TV Compose
Umair Khalid continues an exploration of Compose for TV, looking at its edition
Surface() composable. Compared to the standard
Surface(), the TV edition
is optimized for D-pad use and focus management, two key aspects of any TV-centric
Medium: Exploring Keyboard Types in Kotlin Jetpack Compose
Gokhan Kaya reviews the different
KeyboardType values that you can pass
TextField(), indicating generally what sort of keyboard your users will see.
Just bear in mind that keyboard implementations can do what they want, so
View equivalents like
android:inputType) are hints,
Medium: ViewPager in Jetpack Compose using Official API
Medium user Saqib explores the
that “graduated” out of Accompanist and into Compose itself. Saqib not only explores
the basics, but also how to manually control the paging, how to add indicators, and
how to migrate from the original Accompanist implementation to the new Foundation
Other Interesting Links
- Medium: Jetpack Compose Side Effects & Effect Handlers -II
- Medium: Side Effects in Kotlin
- Medium: Improving accessibility in Android apps
- Medium: Accessibility in Jetpack Compose
- Medium: Building Interactive User Interfaces with Jetpack Compose Chip Component
- Revolutionize Your Jetpack Compose Navigation with Compose-Destinations
- Android Jetpack Compose – Build a BMI Calculator App from Scratch
- Medium: Efficiently Display Data with Jetpack Compose: A Beginner’s Guide to LazyColumn and LazyRow
- Medium: Jetpack Compose Multipreview Setup
- 3 Ways to Create Lines in Jetpack Compose
- Medium: Real-Time Password Validation with Jetpack Compose — Android
- Medium: Maximizing Mobile Code Reuse with Compose Multiplatform and MOKO Libraries
- Medium: State Hoisting in Jetpack Compose: Simplifying State Management for Your UI
- Medium: How to get the Height or Width of an Element in Jetpack Compose
- Medium: Getting User Location In Android, The Jetpack Compose Way
- Medium: Effortlessly implement paging in Jetpack Compose
100% pure code!
GitHub: JetBrains / compose-multiplatform
JetBrains has released an alpha edition of Compose for iOS. They also published
a project template that includes iOS support
and set up a dedicated
#compose-ios Kotlinlang Slack channel.
GitHub: MoyuruAizawa / Cropify
Moyuru Aizawa brings us a
Cropify() composable to allow a user to view and
crop an image, where the image is either supplied as a bitmap or as a URL.
GitHub: tkuenneth / compose_adaptive_scaffold
Thomas Künneth is creating a Compose for Android edition of Flutter’s adaptive scaffold, where the scaffold adapts based on screen size, foldable posture, etc.
GitHub: nasrabadiAM / progress-modifier
Ali Nasrabadi created
progressAnimation() modifiers, to put a
progress overlay on top of another composable. Learn more in
this Medium post.
GitHub: ygorluizfrazao / compose-splash-screens
Ygor Frazão wanted a splash screen without much ceremony, in particular
avoiding having to tie a splash screen into a navigation system. To that end,
Ygor created a
SplashScreen() and a
along with some helper composables for common splash screen styles.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @email@example.com is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!