3rd Dec 2021

Layouts in Jetpack Compose

Mobile App

Written By, Chandresh Sidapara

Overview

Hello folks,
To start any front-end technology the layout is an essential topic. If you are new to jetpack compose then it’s good to start with layouts.The main purpose of this article is to provide information about layouts in Jetpack Compose.

Modifier

Before we start about layouts, you should know about “Modifiers” in jetpack compose.Modifiers can be used to modify certain aspects of a Composable. To set them, a Composable needs to accept a modifier as a parameter. Our output depends on the order of modifiers.

Output:

modifier in jetpack compose output

From the above example, it first applies Cyan background then it applies border, and then it applies padding so we can say that the order of the modifier is “Left to Right”.

Column Layout

If you are familiar with XML in android, Column layout is the same as Linear Layout with vertical orientation.

Column is an inline composable function that accepts parameters like modifier, verticalArrangement, horizontalArrangement and content

verticalArrangement: used for arranging children vertically

horizontalArrangement: used for aligning children horizontally

Output:

column in jetpack compose output

Row Layout

If you are familiar with XML in android, Row layout  is the same as Linear Layout with horizontal orientation

Row is an inline composable function that accepts parameters like modifier, horizontalArrangement, verticalAlignment and content

horizontalArrangement: used for arranging children horizontally

verticalAlignment: used to aligning children vertically

Example: Now, I want to add a circular image on the left side of the column which I made before.

Output:

row layout in jetpack compose output

Box Layout

When you have to work  with the stack or you want to put a view on top of another then you should use Box Layout. Box Layout is similar to the frame layout in android’s XML, Box is also an inline composable function that accepts parameters like modifier, contentAlignment and content

Modifier: used for modifying the layout

contentAlignment: used for aligning the view

Let’s say I want to achieve output like the below image

box layout in jetpack compose output

Then add ImageCard function in your preview’s composable function

Constraint Layout

Constraint Layout is useful when implementing larger layouts with more complicated alignment requirements. ConstraintLayout is only recommended when you have a complex and large layout because compose can efficiently handle deep layouts hierarchies.

Before starting an example of constraint layout, you should know how to create references and how to link elements with each other.

  • References are created using createRefs() or createRefFor().
  • Constraints are provided using a constraintAs()  modifier that takes references as a parameter and then you can specify constraints in the body.
  • linkTo() is used for linking your view
  • You can define your constraints directly in View’s modifier using constraintAs() or you can first create your constraintSet and define constraints in the constraintSet block and use layout id in the modifier.

Example:

Output:

constraint layout in jetpack compose output

Custom Layout

When we have certain requirements oftentimes default layouts can make us crazy & ends up increasing complexity, for such situations they need a specialised handcrafted solution like custom layout & that’s when this tool comes really handy, We can make a custom layout using the Layout Composable function. This function takes parameters like content, modifier, and measurePolicy.

Content: we need to pass child view 

measurePolicy: the policy defining the measurement and positioning of the layout.

In custom layout, first, we have to measure our children. You can measure children only once.

Example: Let’s say I want to achieve output like the below image

custom layout output

First, we make a composable function, and in this function, we have to invoke the Layout composable function and pass parameters : content and modifier. I passed a list of images in the content. And I passed lambda parameters : measurables, constraints that are a part of measurablePolicy.

measurables are a list of Measurable that is used to measure the layout with constraints and that returns a Placeable

Placeable is an abstract class that is used to store our child’s width and height etc. Now let’s understand how a staggered grid works. From the above image you can see the pattern, this method compares the height of columns & whichever column’s height is smaller images get placed there, and so on.

Now how can we find shortest column.

Continue in StaggerGrid function

Now we have a list of measured children. Using them we can place our views in the layout but before this, we need to calculate the width and height of the layout.

Then call StaggeredGrid fun in onCreate method

Written By,

Android Developer at Yudiz Solutions Pvt. Ltd