Revision history [back]

To position items in a row using Jetpack Compose, the Row() composable can be used. Within the Row() composable, items can be added using additional composable functions like Box(), Image(), Text(), etc. Each item can then be positioned within the Row() by specifying the arrangement of items using the Arrangement parameter.

Here is an example code snippet:

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.fillMaxWidth()
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .padding(16.dp)
            .size(64.dp)
            .background(Color.Blue)
    ) {
        Text("Item 1", color = Color.White)
    }

    Image(
        painter = painterResource(id = R.drawable.image),
        contentDescription = "Item 2",
        modifier = Modifier
            .padding(16.dp)
            .size(64.dp)
            .clip(CircleShape)
    )
}

In this example, two items are added within the Row(): a Box() composable with a Text() inside it and an Image() composable. The Row() is positioned at the center horizontally using the horizontalArrangement parameter and vertically centered using the verticalAlignment parameter. The items are positioned within the Row() using their specific modifiers, including padding and size. The Box() composable has a blue background and the Image() is clipped to a circle shape.