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

RowScope

@Immutable object RowScope
kotlin.Any
   ↳ androidx.compose.foundation.layout.RowScope

Scope for the children of Row.

Summary

Public methods
Modifier

Align the element vertically within the Row.

Modifier

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

Modifier
Modifier.alignWithSiblings(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 alignWithSiblings.

Modifier

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 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.Box
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), backgroundColor = 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),
        backgroundColor = 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),
        backgroundColor = 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),
        backgroundColor = Color.Green
    )
}

alignWithSiblings

@Stable fun Modifier.alignWithSiblings(alignmentLine: HorizontalAlignmentLine): Modifier

Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignWithSiblings. alignWithSiblings is a form of align, so both modifiers will not work together if specified for the same layout. alignWithSiblings can be used to align two layouts by baseline inside a Row, using alignWithSiblings(FirstBaseline). Within a Row, all components with alignWithSiblings will align vertically using the specified HorizontalAlignmentLines or values provided using the other alignWithSiblings 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 alignWithSiblings modifier specified the element will be positioned as if it had Alignment.Top align.

Example usage:

import androidx.compose.foundation.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()) {
    // Center of the colored rectangle is aligned to first baseline of the text.
    Box(
        backgroundColor = Color.Red,
        modifier = Modifier.preferredSize(80.dp, 40.dp)
            .alignWithSiblings { it.height / 2 }
    )
    Text(
        text = "Text.",
        modifier = Modifier.alignWithSiblings(FirstBaseline).background(color = Color.Cyan)
    )
}

alignWithSiblings

@Stable fun Modifier.alignWithSiblings(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 alignWithSiblings. alignWithSiblings is a form of align, so both modifiers will not work together if specified for the same layout. Within a Row, all components with alignWithSiblings 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 alignWithSiblings modifier specified the element will be positioned as if it had Alignment.Top align.

Example usage:

import androidx.compose.foundation.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.preferredSize

Column {
    // Center of the first rectangle is aligned to the right edge of the second rectangle and
    // left edge of the third one.
    Box(
        Modifier.preferredSize(80.dp, 40.dp).alignWithSiblings { it.width / 2 },
        backgroundColor = Color.Blue
    )
    Box(
        Modifier.preferredSize(80.dp, 40.dp).alignWithSiblings { it.width },
        backgroundColor = Color.Magenta
    )
    Box(
        Modifier.preferredSize(80.dp, 40.dp).alignWithSiblings { 0 },
        backgroundColor = Color.Red
    )
}

gravity

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

Deprecated.

weight

@Stable 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.