jetc.dev Newsletter Issue #36
Published: 2020-10-20
alpha05
shipped, bringing changes to Scaffold()
, coroutine integration, and the
roster of ambients.
Beyond that, in this week’s issue, we look at converting ConstraintLayout
(the
ViewGroup
) to ConstraintLayout
(the composable). We also explore the semantics API,
infinite scrolling, and how Epoxy and Compose compare. Plus, we play some games, with
cards and falling blocks.
One Off the Stack, One Off the Slack
You’ve got questions. That’s understandable!
0dp
In Compose UI’s ConstraintLayout
While ConstraintLayout
is available in Compose UI, there are some key differences
in how you use it. In the traditional ConstraintLayout
, they overloaded 0dp
as
a width or height to mean “fill to the anchor points defined by constraints”.
In Compose UI, that now is a fillToConstraints
dimension value, as we explore
in this week’s highlighted Stack Overflow question.
Z-Stacking?
In the run-up to official Navigation support for Compose, how do we switch between screens efficiently? Do we just render what we need, or do we render everything and switch which portion is visible via changes in elevation? We’ll take a look at that issue in this week’s highlighted Slack thread.
Composable Commentary
Posts, videos, and other new information related to Jetpack Compose!
Compose Runtime alpha05 Release Notes
launchInComposition()
was renamed to LaunchedTask()
, and a new produceState()
function was added for tying coroutines to State
.
Compose Foundation alpha05 Release Notes
contentColor()
and currentTextStyle()
are replaced with AmbientContentColor
and AmbientTextStyle
. Also, a bunch of other ambients were renamed (e.g., EmphasisAmbient
is now AmbientEmphasisLevels
).
Compose UI alpha05 Release Notes
The FLAG_SECURE
changes mentioned in the last issue were released.
Compose Material alpha05 Release Notes
If you are using Scaffold()
, note that drawerGesturesEnabled
is now a parameter
to Scaffold()
itself, rather than being tied into ScaffoldState
. Also note that
some content lambda parameters no longer accept null
to indicate that there is no
content – use emptyContent()
instead.
Introduction to Semantics in Jetpack Compose
Bryan Herbst explores Compose’s semantics API. Partly, this is used for things like accessibility. Partly, this is useful for testing, associating custom properties with nodes in the composable tree, so we can verify certain behaviors.
Jetpack Compose View & Android View Comparison
Elye is back with another few posts on Compose, this one focusing on comparing and contrasting Compose with classic Android app development. Elye also has a post exploring animations in Compose, using an analog clock with moving hands as an example. And, Elye also wrote about how to update your UI based on user input and Compose’s concept of state.
Video: Jetpack Compose Pagination / Infinite Scroll
Kilo Loco returns with another Compose UI screencast, this time looking at LazyColumnFor()
for creating vertically scrolling lists, with some bits of pagination along the way.
Video: Let’s Build A Card Game! - Jetpack Compose: #7
YouTube user Mannodermaus has a series of screencasts on various aspects of Compose. This two-hour screencast looks at creating a simple card game, complete with a test suite.
Video: Navigation Drawer with the Next Generation UI Toolkit - Jetpack Compose
All Techies is back with another Compose screencast, this time focused on using Scaffold()
for setting up a screen with a nav drawer.
Android: Configuration Driven UI from Epoxy to Compose
Here, Hari Vignesh Jayapalan explores configuration-driven UI (roughly analogous to server-driven UI) and looks at two implementations, one using AirBnB’s Epoxy framework and one using Compose UI.
Jetpack Compose — A Modern Declarative UI Toolkit for Android
In this blog post, Vishnu Haridas reviews Compose, defines what a “declarative UI” means, and how it compares to classic Android app development.
Resource Roundup
100% pure code!
GitHub: Popalay / Tetris-Compose
Denys Nykyforov created a simple Tetris-style game in fewer than 600 lines of Kotlin using Compose UI! Grab it before The Tetris Company forces GitHub to take it down!
…And One More Thing
One of the many things that hopefully will arise out of the drive towards Jetpack Compose is an increased focus on design systems.
A simplified description of a design system is: it is a library of reusable elements (e.g., composables) that represent the building blocks of the app’s UI.
Ideally, graphic designers create such a library in their favorite design tool. So, they define the basic button shapes, the common field layouts, the standard checkbox looks, and so forth. For some projects, those might simply be Material Design with specific colors and typography. For other projects, those might be more “from scratch”, perhaps in a drive to have a common design system between Android and iOS.
If graphic designers describe their UIs in terms of a design system, developers can create implementations of the design system, then build up the UIs from those individual elements. If the designers decide to change an element of the design system — perhaps tweaking the font sizes a bit — that change would not only ripple out through all the designs, but the corresponding tweak to the element’s implementation would ripple out through all of the screens.
Right now, design systems tend to be the the sort of thing that only large or sophisticated teams try to pull off:
-
Some of the popular design tools do not lend themselves towards the rigorous definition and application of a design system, leading designers to treat every screen as a “one-off” design
-
Implementing a design system in classic Android development requires a fair bit of work spread out over a lot of files (style/theme resources, dimension resources, color resources, layout resources, Java/Kotlin code, etc.).
Compose greatly simplifies the creation of a design system, as it mostly turns
into a series of custom composables. So, instead of using Button()
or TextField()
straight from the Compose UI libraries, you use AppButton()
and AppTextField()
from your design system, where you create those functions to embody the characteristics
that the designers call for.
Hopefully, design tools will evolve to help designers define and use a design system, one that developers can then implement in Compose UI. Alternatively, we might be able to create tools that live alongside Figma, InVision, etc., where the add-on tools define the design system and annotations in the design tie back to the design system elements.
Regardless, the fact that Compose puts everything in Kotlin will at least help on the development side of a design system, and that will be a benefit for long-term app maintenance.
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
Recent Issues:
- 2024-10-29: Relay! Paparazzi! droidcon Lisbon 2024! Server-defined UI! And... desktop OS trays?!?
- 2024-10-22: Compose patch! Compose alpha! Compose Multiplatform stable! droidcon NYC! Adaptive UIs! MVI! HTML conversions! Math rendering! And... are we now Fluent in Compose?!?
- 2024-10-15: Alpha and beta BOMs! Compose Multiplatform UI testing! Compose Multiplatform camera apps! Passing data between screens in Navigation for Compose! JSON rendering!