Blog Infos
Author
Published
Topics
Author
Published

A short tutorial on how to use FlowLayout in Jetpack Compose

FlowRow {
    chipsInRow.forEach {
        Chip(text = it.text, pointColor = it.pointColor)
    }
}

For a FlowColumn, it could look like this:

FlowColumn {
    cardsInColumn.forEach { cardData ->
        Card(cardData)
    }
}
fun FlowRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    maxItemsInEachRow: Int = Int.MAX_VALUE,
    content: @Composable RowScope.() -> Unit
)

horizontalArrangement, on the other hand, has more options with some non-obvious ones:

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

, ,

Cutting-Edge-to-Edge in Android 15: Using Previews and Testing in Jetpack Compose to Manage Insets.

With the advent of Android 15, edge-to-edge design has become the default configuration. Consequently, applications must be capable of accommodating window insets, including the system status bar and navigation bar, as well as supporting drawing…
Watch Video

Cutting-Edge-to-Edge in Android 15: Using Previews and Testing in Jetpack Compose to Manage Insets.

Timo Drick
Lead Android developer
Seven Principles Mobility GmbH

Cutting-Edge-to-Edge in Android 15: Using Previews and Testing in Jetpack Compose to Manage Insets.

Timo Drick
Lead Android develop ...
Seven Principles Mob ...

Cutting-Edge-to-Edge in Android 15: Using Previews and Testing in Jetpack Compose to Manage Insets.

Timo Drick
Lead Android developer
Seven Principles Mobility ...

Jobs

No results found.

maxItemsInEachRow can be used together with weight modifiers to make something like this:

All buttons have the weight set to 1 except the zero button, which has the weight set to 2.

FlowRow(maxItemsInEachRow = 4) {
    buttons.forEach {
        FlowButton(
            modifier = Modifier
                .aspectRatio(1 * it.weight)
                .clip(CircleShape)
                .background(it.color)
                .weight(it.weight),
            text = it.text,
            textColor = it.textColor,
        )
    }
}

As you can see, for straight-forward examples the FlowRow and FlowColumn composables are very easy to use – they are a powerful and flexible layout tool for dynamic or unknown sizes. This makes them especially useful for dynamic and responsive interfaces that adapt to different screen sizes and orientations. We expect the examples above to cover most developers’ needs, but we still want to create a more complex example using these new layouts and animating transitions that could happen during adding, removing or repositioning elements. So keep an eye out for the next article on Flow Layout! Meanwhile you can check out our other articles on android development: Dribbble replicating or Androidview&Jetpack Compose tutorial.

This article was previously published on proandroiddev.com

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
Menu