Jetpack Compose Basics

In this blog we will try to look at all the basics and fundamental blocks needed to start Jetpack Compose.

What is Jetpack Compose?

Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. Using Jetpack Compose, we can write our UI designs by calling some functions in Kotlin. It is very powerful and Intuitive to use.

Benefits of Compose —

1. It is written in Kotlin. So, it’s easier of new developers to get up to speed.
2. No more XML files. One language for all in code.
3. Declarative Approach. It means that just mention how the UI should compose and not worry about it’s states. Recomposition is taken care by itself.
4. Promotes code-reusablility. Since, the UI is also functions it can be reused just like any other functions.
5. Overall size and build of application is reduced significantly.

Components of Compose —

setContent()— function is used to define the layout and theme through composable functions within the onCreate() method in the code.

Composables — function that is denoted by @Composables annotation.
Composables are UI functions. It takes any parameter just like any other function. Composable functions are called from setContent() or other composables only.

Few things to keep in mind regarding composables-

• @Composable function names are capitalized(Pascal Case).
• @Composable annotation before the function is needed.
• @Composable functions can’t return anything.

Preview — This function is represented using the annotation — @Preview. The preview of the composable function that you have written without installing the app to the device. The preview is interactive and thereby very useful tool for development. The preview function is also a composable function and so must follow the rules of the composable functions.

Surface — The Surface() function is an invisible box that helps with setting up color or shape needed for background.

Row — The Row() function helps you arrange all the child elements in a horizontal arrangement.

Column — The Column() function helps you arrange all the child elements in a vertical arrangement.

Box — The Box() function helps you arrange the child elements above one another in an overlapping arrangement.

Modifier — A Modifier is used to augment or decorate your composable.

For more Jetpack Composables, please refer Components.

That’s all for now. Thanks.

Please feel free to reach out to me on LinkedIn.

If you liked this blog, don’t forget to hit the 👏 .