Column: vertical arrangement and container configuration in Compose

What is Column in Jetpack Compose

Column is a Composable function that accepts optional parameters: modifier, verticalArrangement, horizontalAlignment, and content — a lambda with ColumnScope. Inside Column, child Composable functions are arranged from top to bottom in declaration order. The height of Column equals the sum of child heights plus the space specified by Arrangement. The width equals the maximum child width considering Alignment.

Column is an invisible container: it has no background or border by default. If you need a background, add Modifier.background() to the Column itself. Unlike LazyColumn, Column renders all child elements simultaneously and does not support virtualization. This means Column is only suitable for small data sets — up to 10-15 elements. For long lists, use LazyColumn.

ColumnScope is the receiver for the content lambda of Column. It provides additional modifiers that only work inside Column: weight(), align(), alignByBaseline(). These modifiers have no meaning outside Column because they rely on vertical layout specifics. For example, Modifier.align(Alignment.CenterHorizontally) aligns a child element to the center of the Column horizontally.

Column parameters: Arrangement, Alignment, Modifier

VerticalArrangement determines how vertical space is distributed between elements. Available values: Arrangement.Top (default), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. If the Column height is greater than the sum of element heights, Arrangement distributes the free space. If elements take up the full height, Arrangement has no effect.

HorizontalAlignment sets the horizontal alignment of each child element. Alignment.Start (default for LTR), CenterHorizontally, End. Alignment acts on each element independently: if one element is narrow and another is wide, the first one will be aligned, the second may extend beyond Column boundaries. Alignment only works if Column has a fixed width or fillMaxWidth.

Modifier for Column: Column accepts a Modifier that applies to the container itself. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — all standard modifiers work. Special note: Modifier.height(IntrinsicSize.Min) forces Column to calculate the minimum height based on child elements using Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Top", modifier = Modifier.background(Color.Cyan))
        Text("Middle", modifier = Modifier.background(Color.Magenta))
        Text("Bottom", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column adjusts height to content
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Short text")
        Text("A very long text that will wrap inside the column")
    }
}

Column weight: distributing space between elements

Modifier.weight() is a ColumnScope modifier that distributes free vertical space between Column elements proportionally to the specified weights. If Column occupies 400dp height and child elements total 100dp, the remaining 300dp are split among weight elements. An element with weight(2f) gets twice as much space as an element with weight(1f).

fill — the second parameter of weight: weight(weight: Float, fill: Boolean = true). If fill = true (default), the element stretches to the full available height. If fill = false, the element only takes its intrinsic height, and the remaining space stays empty. This is useful when an element should be pushed to one side but weight only defines the proportion of empty space distribution.

Weight limitations: weight only works in Column with a fixed height or fillMaxHeight(). If the Column height is determined by child elements (wrap content), weights have no meaning — there is no free space to distribute. Also, weight cannot be combined with Modifier.height() on the same element — they conflict, and weight is ignored.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Takes 1/6 of height (weight 1 of sum 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Takes 2/6 of height
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Takes 3/6 of height
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: when to use what

Column renders all child elements immediately. If there are more than 10-15 elements, Column creates significant composition and measurement overhead. LazyColumn, on the other hand, only renders visible elements and reuses invisible ones. For long lists, lists with thousands of elements, infinite lists, or chats — LazyColumn is mandatory.

When Column is better: form screens (3-10 fields), profile cards, vertical columns with icons, menus. Column also supports IntrinsicSize, which is useful for adaptive height. Additionally, Column is easier to debug — no virtualization, all elements are visible in Layout Inspector. For static UI, Column is the right choice.

LazyColumn provides: item caching, key-based identity, add/remove animation (animateItemPlacement), sticky headers. If the list contains elements of different types (different viewTypes), use LazyColumn with a sealed class in items. Column does not support sticky headers (they need to be emulated via scrollable Column). Also, LazyColumn supports LazyVerticalGrid when using GridCells.

Practical examples of using Column

Let's look at a user profile screen where Column is used as the main container for the avatar, name, bio, and action buttons. Here, Column with IntrinsicSize.Min adjusts to the content, and weight is used to distribute space between sections.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Name
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Action buttons
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Message") }
                OutlinedButton(onClick = { }) { Text("Follow") }
            }
        }
    }
}

In the example, Column uses Arrangement.spacedBy(8.dp) for even spacing between elements. horizontalAlignment = CenterHorizontally centers the avatar, name, and bio. The Row inside Column is a nested container for buttons in one row. This combination of Column (vertical layout) and Row (horizontal layout) is a typical UI building pattern in Compose.