Google is committed to advancing racial equity for Black communities. See how.

RowScope

@Immutable interface RowScope
androidx.compose.foundation.layout.RowScope

Scope for the children of Row.

Summary

Nested classes
companion

Public methods
open Modifier

Align the element vertically within the Row.

open Modifier

Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignBy.

open Modifier
Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)

Position the element vertically such that the alignment line for the content as determined by alignmentLineBlock aligns with sibling elements also configured to alignBy.

open Modifier

Position the element vertically such that its first baseline aligns with sibling elements also configured to alignByBaseline or alignBy.

open Modifier

open Modifier
Modifier.alignWithSiblings(alignmentLineBlock: (Measured) -> Int)

open Modifier

open Modifier
Modifier.weight(@FloatRange(0.0, 3.4E38, false) weight: Float, fill: Boolean = true)

Size the element's width proportional to its weight relative to other weighted sibling elements in the Row.

Extension functions
From androidx.compose.animation
Unit
RowScope.AnimatedVisibility(visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandHorizontally(), exit: ExitTransition = fadeOut() + shrinkHorizontally(), initiallyVisible: Boolean = visible, content: () -> Unit)

AnimatedVisibility composable animates the appearance and disappearance of its content, as visible value changes.

Public methods

align

@Stable open fun Modifier.align(alignment: Alignment.Vertical): Modifier

Align the element vertically within the Row. This alignment will have priority over the Row's verticalAlignment parameter.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize

Row(Modifier.fillMaxHeight()) {
    // The child with no align modifier is positioned by default so that its top edge is
    // aligned to the top of the vertical axis.
    Box(Modifier.preferredSize(80.dp, 40.dp).background(Color.Magenta))
    // Gravity.Top, the child will be positioned so that its top edge is aligned to the top
    // of the vertical axis.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .align(Alignment.Top)
            .background(Color.Red)
    )
    // Gravity.Center, the child will be positioned so that its center is in the middle of
    // the vertical axis.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .align(Alignment.CenterVertically)
            .background(Color.Yellow)
    )
    // Gravity.Bottom, the child will be positioned so that its bottom edge is aligned to the
    // bottom of the vertical axis.
    Box(
        Modifier.preferredSize(80.dp, 40.dp)
            .align(Alignment.Bottom)
            .background(Color.Green)
    )
}

alignBy

@Stable open fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine): Modifier

Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignBy. alignBy is a form of align, so both modifiers will not work together if specified for the same layout. alignBy can be used to align two layouts by baseline inside a Row, using alignBy(FirstBaseline). Within a Row, all components with alignBy will align vertically using the specified HorizontalAlignmentLines or values provided using the other alignBy overload, forming a sibling group. At least one element of the sibling group will be placed as it had Alignment.Top align in Row, and the alignment of the other siblings will be then determined such that the alignment lines coincide. Note that if only one element in a Row has the alignBy modifier specified the element will be positioned as if it had Alignment.Top align.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignBy { it.height / 2 }
            .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
    )
}

See Also

alignBy

@Stable open fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int): Modifier

Position the element vertically such that the alignment line for the content as determined by alignmentLineBlock aligns with sibling elements also configured to alignBy. alignBy is a form of align, so both modifiers will not work together if specified for the same layout. Within a Row, all components with alignBy will align vertically using the specified HorizontalAlignmentLines or values obtained from alignmentLineBlock, forming a sibling group. At least one element of the sibling group will be placed as it had Alignment.Top align in Row, and the alignment of the other siblings will be then determined such that the alignment lines coincide. Note that if only one element in a Row has the alignBy modifier specified the element will be positioned as if it had Alignment.Top align.

Example usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignBy { it.height / 2 }
            .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
    )
}

alignByBaseline

@Stable open fun Modifier.alignByBaseline(): Modifier

Position the element vertically such that its first baseline aligns with sibling elements also configured to alignByBaseline or alignBy. This modifier is a form of align, so both modifiers will not work together if specified for the same layout. alignByBaseline is a particular case of alignBy. See alignBy for more details.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.preferredSize

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignBy { it.height / 2 }
            .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red)
    )
    Text(
        text = "Text 2",
        modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
    )
}

See Also

alignWithSiblings

open fun Modifier.alignWithSiblings(alignmentLine: HorizontalAlignmentLine): Modifier

Deprecated.

alignWithSiblings

open fun Modifier.alignWithSiblings(alignmentLineBlock: (Measured) -> Int): Modifier

Deprecated.

gravity

@Stable open fun Modifier.gravity(align: Alignment.Vertical): Modifier

Deprecated.

weight

@Stable open fun Modifier.weight(
    @FloatRange(0.0, 3.4E38, false) weight: Float,
    fill: Boolean = true
): Modifier

Size the element's width proportional to its weight relative to other weighted sibling elements in the Row. The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight. When fill is true, the element will be forced to occupy the whole width allocated to it. Otherwise, the element is allowed to be smaller - this will result in Row being smaller, as the unused allocated width will not be redistributed to other siblings.