Jetpack Compose: Layouts Part 2

This article is in continuation of the previous article in which we discussed the different types of layouts in Jetpack Compose.  In this article, we will be discussing the remaining layouts Box , ConstraintLayout and Scaffold.

Box

Children in the box layout are stacked over each other. we can use a modifier to configure the alignment of the children. It's almost similar to the relative layout.

contentAlignment: For aligning the children inside the box. It provides the following alignments TopCenter TopStart etc.

propagateMinConstraints : Boolean flag to pass the incoming min constraints to content or not.

content: A composable function to display inside Box scope.

Example

ConstraintLayout

ConstraintLayout is an alternative to numerous nested Row, Column, Box, and custom layout elements that can be used to position elements relative to others on the screen. When designing larger layouts with more alignment requirements, ConstraintLayout is helpful.

For implementing ConstraintLayout we need to follow the steps:

• Using createRefs() or createRef, create a reference for each composable in ConstraintLayout.

  val (textTopStart, textCenter, textBottomEnd) = createRefs()

• With the use of linkTo other useful methods and constraints are provided.

top.linkTo(parent.top, 8.dp)
start.linkTo(parent.start, 8.dp)

• Parent is an existing reference that is used to specify constraints to the composable.

    start.linkTo(parent.start, 8.dp)

• The constrainAs modifier, which accepts the reference as a parameter and allows you to specify its constraints in the body lambda, is used to provide constraints.

 Text(text = "True Sparrow", Modifier.constrainAs(textBottomEnd) {
            bottom.linkTo(parent.bottom, 8.dp)
            end.linkTo(parent.end, 8.dp)
        })

Example

Scaffold Layout

A scaffold is a layout that uses the fundamental framework of a material design layout. You can include things like a Drawer, FAB, TopBar, or BottomBar. We can use it as a prebuilt template. You can read more about it here.

Example

Thanks for reading the article, Stay tuned for more updates.