Member-only story
Build Android Layouts in JetPack Compose
Row, Column, Box, and ConstraintLayout
You’re going to learn everything about layouts in Jetpack Compose from the basics to advanced concepts. In the course of this article, you’ll learn about each layout, with real-time examples that you can directly copy-paste into your Compose project to get hands-on experience.
Note: Jetpack Compose recently moved to beta. This means there will no longer be any drastic changes in the API structure. So it would be a great time to learn how to work with this next-generation UI kit for Android development. Layouts are the basic building blocks of the UI, so enjoy the article.
You will need to install Android Studio Canary, Arctic Fox (2020.3.1) version to use the Jetpack Compose beta.
Introduction
Layouts are the building blocks to design the UI. In the traditional Android development, we have RelativeLayout, LinearLayout, FrameLayout, ConstraintLayout, etc. Likewise, Jetpack Compose offers four types of layouts at the moment:
RowColumnBoxConstraintLayout
Each layout has its own importance and we’ll learn about each type in detail in the following sections of this article. As Compose is rapidly evolving, there might be new layouts in the future. But for now, these are the existing ones, and we can build simple to complex layouts with them.
If you’re new to Jetpack Compose, starting from layouts is a good thing. That being said, without any further delay, let’s get started.
Modifier
Before you learn about the layouts, first you should know about Modifier in Jetpack Compose. As the name suggests, Modifier is a way to modify certain aspects of the component that result in how the layout is displayed on the screen.
What’s cool about Modifier is that we can use a separate Modifier to decorate each component or we can chain a single Modifier to apply on multiple components, which opens up possibilities like aligning views with respect to its parent.
To learn more about modifier, read the following article:
