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()
)
}
HorizontalPager allows horizontal switching between pages in Jetpack Compose 1.4.
(Image: Google)
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.
New flow layouts are available for container content.
(Image: Google)
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)