Mobile Development: Jetpack Compose 1.4 works on page breaks and flow layouts

Google has released version 1.4 of its Android UI toolkit Jetpack Compose. The release brings built-in support for vertical and horizontal page breaks, flow layouts, and additional customization options for text fields. Jetpack Compose uses the Kotlin programming language and is Android’s recommended toolkit for creating native user interfaces.

Change sides without detours

Version 1.4 offers two new experimental composables out-of-the-box for vertical and horizontal page switching between different content: VerticalPager and HorizontalPager. They should enable a similar function as PageViewer in the view system. Same as with LazyRow and LazyColumn there is no need to resort to adapters or fragments. Within the Pager you can embed a composable:

// Display 10 items
HorizontalPager(pageCount = 10) { page ->
    // Your specific page content, as a composable:
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}

By default takes HorizontalPager the entire width and VerticalPager the full height of the screen. However, these values ​​can be adjusted if necessary. See the documentation for more information on using the new pagers.

Fluid layout and more flexible text fields

If the size of items and containers is unknown or dynamic, the new flow layouts FlowRow and FlowColumn play their advantage. They are intended to present items in a container in an efficient manner by allowing the items to flow to the next row or column if there is a shortage of space. In addition, the flow layouts allow dynamic size adjustment using weights to distribute items within the container.

At TextField the team behind Jetpack Compose also worked. Such a text field within a scrollable Column or LazyColumn should no longer – as was previously the case – be covered by the on-screen keyboard after focusing. There are also some new options for text customization. For example, text can be sent via TextStyle.drawStyle can be outlined and line breaks per TextStyle.lineBreak define more precisely.

Developers who want to set their text in motion can use the basicMarquee-Use modifiers. Due to its properties as a modifier, it can also be applied to any composable that should move like a marquee. On the web, the marquee HTML tag, originally developed for Microsoft’s Internet Explorer, was still found on one percent of all mobile websites last year.

More details about the new minor release are listed in the Android developer blog.

(May)