Jetpack Compose 1.2 Is Now Stable!

Today, we’re releasing version 1.2 of Jetpack Compose, Android’s modern, native UI toolkit, continuing to build out our roadmap. This release contains new features like downloadable fonts, lazy grids, and improvements for tablets and Chrome OS with better focus, mouse, and input handling.

Compose is our recommended way to build new Android apps for phone, tablets and foldables. Today we also released Compose for Wear OS 1.0 – making Compose the best way to build a Wear OS app as well.

We continue to see developers like the Twitter engineering team ship faster using Compose:

“Compose increased our productivity dramatically. It’s much easier and faster to write a Composable function than to create a custom view, and it’s also made it much easier to fulfill our designers’ requirements.”

Compose 1.2 includes a number of updates for Compose on Phones, Tablets and Foldables – it contains new stable APIs graduated from being experimental, and supports newer versions of Kotlin. We’ve already updated our samples, codelabs, Accompanist library and MDC-Android Compose Theme Adapter to work with Compose 1.2.

Note: Updating the Compose Compiler library to 1.2 requires using Kotlin 1.7.0. From this point forward the Compiler releases will be decoupled from the releases of other Compose libraries. Read more about the rationale for this in our blog post on independent versioning of Jetpack Compose libraries.

New stable features and APIs

Several features and APIs were added as stable. Highlights include:

• The APIs <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/package-summary#LazyHorizontalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)" target="_blank" rel="noopener">LazyHorizontalGrid</a> and <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/package-summary#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)" target="_blank" rel="noopener">LazyVerticalGrid</a> let you place lists of items in a grid. These APIs already existed in Compose 1.1 but were marked as @Experimental.
• The <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets" target="_blank" rel="noopener">WindowInsets</a> class provides modifiers such as <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsPadding(kotlin.Function1,kotlin.Function1)" target="_blank" rel="noopener">windowInsetsPadding</a>, <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).systemBarsPadding()" target="_blank" rel="noopener">systemBarsPadding</a>, and <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).windowInsetsTopHeight(androidx.compose.foundation.layout.WindowInsets)" target="_blank" rel="noopener">windowInsetsTopHeight</a> to deal with the insets of the device. This class is heavily based on the Accompanist insets library, and replaces it as the preferred mechanism for Insets.
• <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/package-summary#(androidx.compose.ui.Modifier).nestedScroll(androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher)" target="_blank" rel="noopener">Modifier.nestedScroll</a> provides nested scroll interoperability with views. Here’s a sample demonstrating this new functionality. Learn more in the gestures documentation.
• Easing curves were added that help write beautiful animations efficiently. Read more about how to use them in our animation guidance.
• Mouse support was improved, by adding Modifier.pointerHoverIcon, PointerEventType.Scroll, and <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputChange#scrollDelta()" target="_blank" rel="noopener">PointerEvent.scrollDelta</a>.

New Experimental APIs

We’re continuing to bring new features to Compose. Here are a few highlights:

• Create your own custom efficient scrollable layouts with <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/layout/package-summary#LazyLayout(androidx.compose.foundation.lazy.layout.LazyLayoutItemProvider,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.layout.LazyLayoutPrefetchState,kotlin.Function2)" target="_blank" rel="noopener">LazyLayout</a>. Add custom overscroll effects to your scrollable container using <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).overscroll(androidx.compose.foundation.OverscrollEffect)" target="_blank" rel="noopener">Modifier.overscroll</a>.
• Downloadable fonts using <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/text/googlefonts/GoogleFont" target="_blank" rel="noopener">GoogleFont</a>. Read the documentation to get started.
• Many text features were added, such as allowing customization of includeFontPadding and line heights (see Text documentation and blog post), <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Brush" target="_blank" rel="noopener">Brush</a> APIs (see blog post), and the addition of <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/res/package-summary#pluralStringResource(kotlin.Int,kotlin.Int)" target="_blank" rel="noopener">pluralStringResource</a>.
• Improved test APIs. For example, the <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/test/package-summary#(androidx.compose.ui.test.SemanticsNodeInteraction).performKeyInput(kotlin.Function1)" target="_blank" rel="noopener">performKeyInput</a> action mimics keyboard input in your tests. The new testTagsAsResourceId semantics property allows integration with UI Automator.

Try out the new APIs using <a href="https://developer.android.com/reference/kotlin/androidx/annotation/OptIn" target="_blank" rel="noopener">@OptIn</a> and give us feedback!

Fixed Bugs

We fixed a lot of issues raised by the community, most notably:

• Let animations follow the system defined “Animator duration scale”.
• ​​Allow disabling of scrolling of lazy layouts by adding userScrollEnabled parameter.
• Make the back button behavior in TextField identical to the behavior in EditText.

We’re grateful for all of the bug reports and feature requests submitted to our issue tracker – they help us to improve Compose and build the APIs you need. Do continue providing your feedback and help us make Compose better!

Wondering what’s next? Check out our updated roadmap to see the features we’re currently thinking about and working on, such as animations for lazy item additions and removals, flow layouts, text editing improvements and more!

Jetpack Compose continues to evolve with the features you’ve been asking for. We’ve been thrilled to see tens of thousands of apps using Jetpack Compose in production already, and many of you shared how it’s improved your app development. We can’t wait to see what you’ll build next!

Happy composing!

By Jolanda Verhoef, Android Developer Relations Engineer
Source Android