UI Elements of Jetpack Compose: Row and Column

3 min readDec 9, 2023

This article will delve into Rows and Columns elements. If you’re new to Jetpack Compose, please refer to my first blog an overview of Jetpack Compose. The initial part covers the basic definitions of all components. This document, however, will focus on the layout of Jetpack Compose.

What are Rows and Columns?

Rows and Columns are fundamental layout containers in Jetpack Compose. They hold the views or layouts. A row aligns elements horizontally, while a column aligns elements vertically. Within these layouts, we can group a collection of views or layouts. Also, Rows and columns can be nested within each other to create complex user interfaces with multiple levels of hierarchy.

Goals

High Performance: Compose achieves high performance by measuring children only once. (Android Jetpack Compose Performance)
Custom Layouts: Ability to easily write custom layouts
(Jetpack Compose CustomLayout)

Benefits

A Composable function may emit multiple UI elements. However, if you don’t provide guidance on how they should be arranged, compose might arrange the elements in a way you don’t prefer. For instance, consider this code that generates two text elements. Without specifying their arrangement, compose stacks the text elements on top of each other.

So, use row and column to organize item in UI interface.

Rows and Columns make it easier to respond to different screen sizes and orientations.

Utilizing rows and columns in a layout allows for automatic adjustment of element sizes according to the available screen space, making it easier to create a responsive user interface.

How to use Rows and Columns

Creating layouts in Jetpack Compose is simple and direct. Rows and Columns are inline functions provided by androidx.compose.foundation. To construct layouts, utilize the Row and Column composable functions and nest additional composable within them as children.
Here is an example of simple layouts of Row and Column

Column: Place items vertically

Row: Place items horizontally

This is a simple example where specific properties are not applied to the elements.

Note: By default, items do not scroll.

Attributes of Row and Column

Modifier: This represents a static object of the Modifier interface class.
A use of Modifier is to apply style like size, space, click listener etc.

Arrangement: The Row component features the horizontalArrangement attribute, whereas the Column component includes verticalArrangement. In this context, arrangement refers to managing the space of children along the main axis.
Alignment: The Row component features the verticalAlignment attribute, while the Column component includes horizontalAlignment. These attributes regulate the spacing of children along the cross-axis of the layout.
Content: Add more children within Row and Column.

GitHub link:
https://github.com/Bhumika2005/row-column-jetpack-compose

Bhumika Mehta
LinkedIn