Jetpack Compose 1.2 Includes Lazy Grids, Support for Google

Jetpack Compose 1.2 stabilizes a number of features, including lazy grids, nested scroll, easing curve for animations, and more. In addition, it brings several new experimental features, like custom layouts and downloadable fonts, and fixes many issues.

Lazy grids can be built using the LazyHorizontalGrid and LazyVerticalGrid APIs. Their behaviour is optimized so only visible items are actually presented, meaning only columns or rows that are visible are rendered in memory. The following partial snippet shows how you can define a vertical grid with several items:


LazyVerticalGrid(
    columns = GridCells.Fixed(3)
) 
    items(itemsList) 
        Text("Item is $it", itemModifier)
    
    item 
        Text("Single item", itemModifier)
    


Easing curves extends animation speed control, specifically to speed up or down the animating value either at the start or end of the animation. Easing can help to create smoother and more realistic animations. Beside the usual ease in and out curves, many other curves are available, e.g., to emphasize the animation at the end, to accelerate or decelerate it, and so on. The framework also allows to define custom easing curves, like in the following example:


val CustomEasing = Easing  fraction -> fraction * fraction 

@Composable
fun EasingUsage() 
    val value by animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(
            durationMillis = 300,
            easing = CustomEasing
        )
    )
    // ...


Nested scroll enables embedding a scrollable view within another scrollable view. Nested scroll is usually tricky to get right and Compose provides a nestedScroll modifier that allows to define a scrolling hierarchy so scroll deltas are propagated from inner views to outer views when you reach scroll start or end bounds.

On the front of new experimental features, Compose 1.2 introduces lazy layouts, which could be seen as a generalization of lazy grids. As with lazy grids, lazy layouts only render those items that are actually visible to improve performance and increase efficiency.

Additionally, you can now use Google Fonts in your Android app using the GoogleFont class, which you can instantiate by providing a font name and then use to create a FontRequest.

As mentioned, Compose 1.2 fixes a number of bugs and implements many features requested by the community. For example, it now allows to disable scrolling of lazy layouts, unifies behaviour of TextField and EditText back button, ensures Compose animations honor the animation setting in developer options, and more.

As a final note, it is worth mentioning that updating Compose 1.2 requires Kotlin 1.7.0.

Presentation