Android Jetpack Compose of layouts, row, column, modifier, ConstraintLayout and Scaffold

Hello everyone,

In this article, we are going to learn how to use layouts, rows, columns and modifiers with any layout. In my last tutorial, we have learned about the Jetpack Compose introduction and about applying the app theme for light and dark mode in Jetpack Compose. I would recommend checking this article before reading this.

Let’s start to understand the basic concept to use the basic layout in our app while developing the app in Jetpack compose. Before direct going to layouts, we need to understand a few basic components used to build the layout.

Alignment, Arrangement and Modifier

Alignment is used as a parameter to set the layout at the start, end or in the centre. Alignment has a set of constants for Alignment.Horizontal and Alignment.Vertical interfaces.

Arrangement is used to specify the arrangement of child elements in “Column” and “Row” layouts in the axis direction (horizontal and vertical), arrangements like “Start”, “End”, “Center”, “Top”, and “Bottom”. We already know and used in xml layout before. I am not going into detail regarding this.

From the official developer site, Modifier is an ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

Let’s see an example of a modifier, where we can use dp, height, width and background.

Box(
       modifier = Modifier
           .padding(horizontal = 16.dp, vertical = 8.dp)
           .fillMaxSize()
           .background(Color(0xFF342E6C))
   ) {
        Text(text = "TopStart", modifier = Modifier.align(Alignment.TopStart))
   }

Okay, Now let’s start learning about the layouts.

Layouts

Building the UI of the our application application, we need to combine multiple UI elements, and multiple available layouts help us with that.

Jetpack Compose supports the following layouts:

• Box
• Column
• Row
• ConstraintLayout
• Scaffold

Box Layout: Box layout stacks every child on top of each other. By default, the children will be placed at the Alignment.TopStart position. Let’s take an example of Box.

@Composable
fun BoxDemo() {
    Box(
        modifier = Modifier.size(height = 120.dp, width = 300.dp),

        ) {
        Text(text = "TopStartText",
            modifier = Modifier.align(Alignment.TopStart),
            style = MaterialTheme.typography.body1,
            textAlign = TextAlign.Center)
        Text(text = "CenterText",
            modifier = Modifier.align(Alignment.Center),
                style = MaterialTheme.typography.body1,
                textAlign = TextAlign.Center)
        Text(text = "BottomEndText",
            modifier = Modifier.align(Alignment.BottomEnd),
            style = MaterialTheme.typography.body1,
            textAlign = TextAlign.Center)

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BoxDemo()
}

Column layout: Column layout is similar like LinearLayout which we already used in xml view. All child items will be arranged vertically at Top and aligned horizontally at Start, by default. Let’s see an example.

@Composable
fun ColumnDemo() {
    Column(modifier = Modifier.height(200.dp)){
        Text(
            text = "I am the first text, which display on first on top",
            fontSize = 20.sp,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(Color.White)
        )
        Text(
            text = "I am the second text, which display on below of first text",
            fontSize = 20.sp,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(Color.LightGray)
        )
    }
}

Row layout: Row layout is similar like LinearLayout which we already used in xml view like Horizontal align View. All child items items will be aligned vertically at Top and arranged horizontally at Start, by default.

@Composable
fun RowDemo() {
    Row(modifier = Modifier.height(200.dp)){
        Text(
            text = "I am the first text, which display on first on top",
            fontSize = 20.sp,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(Color.White)
        )
        Text(
            text = "I am the second text, which display on below of first text",
            fontSize = 20.sp,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(Color.LightGray)
        )
    }
}

Constraint layout: Constraint layout is layout positions children according to the constraints between them. It’s similar to the available “ConstraintLayout” for Android development used in xml.

@Composable
fun ConstraintLayoutDemo(){
    ConstraintLayout( modifier = Modifier.fillMaxWidth()) {
        val (image, title, content) = createRefs()
        Image(
            modifier =  Modifier.size(100.dp)
                .constrainAs(image) {
                    centerHorizontallyTo(parent)
                    top.linkTo(parent.top)
                },
            contentDescription = "image",
            painter = painterResource(R.drawable.poster)
        )

        Text(
            modifier = Modifier
                .constrainAs(title) {
                    centerHorizontallyTo(parent)
                    top.linkTo(image.bottom)
                }
                .padding(8.dp),
            text = "Title text",
            style = MaterialTheme.typography.h2,
            textAlign = TextAlign.Center,
        )

        Text(
            modifier = Modifier
                .constrainAs(content) {
                    centerHorizontallyTo(parent)
                    top.linkTo(title.bottom)
                }
                .padding(horizontal = 8.dp)
                .padding(bottom = 12.dp),
            text = "content text",
            style = MaterialTheme.typography.body1,
            textAlign = TextAlign.Center,
        )
    }
}

Scaffold layout: Scaffold layout contains a basic implementation of the material design app structure with the following components:

• TopBar
• BottomBar
• FloatingActionButton
• Drawer

Let’s take an example of TopBar and FloatingActionButton.

@Composable
fun FloatingActionButtonDemo() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("FloatingActionButtonDemo") })
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /*TODO*/ },
                backgroundColor = Color.Red,
                content = {
                    Icon(
                        painter = painterResource(id = R.drawable.icon_add),
                        contentDescription = null,
                        tint = Color.White
                    )
                }
            )
        },
        content = {
            Surface(modifier = Modifier.padding(24.dp)) {
                Text(
                    text = "This is just description",
                    fontSize = 16.sp,
                )
            }
        }
    )
}

That is all about the layout in Jetpack Compose. In our next tutorial, we will learn more about the Jetpack Compose.

Happy Coding.