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()
orcreateRef
, 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.