Recently I took part in Android Learn and Inspire Series and there I came across the Pathways the Google Relations team has developed to understand Jetpack Compose better. I went through them and here I am sharing my learnings of the Jetpack Compose Concepts.
In this blog, I will try to address the first few questions that come to our mind when we hear about Compose which will build the fundamentals for the implementation.
What is Jetpack Compose?
Jetpack Compose is a modern UI toolkit that is designed to simplify UI development in Android. In simple terms, Compose means to write or create. Using Jetpack Compose, we can write our UI designs by calling some functions in Kotlin. It focuses on what and not how.
Benefits of Jetpack Compose
- It is written in Kotlin which makes it easier for new developers to start with Android development as they have to learn a single language to get started. The application codebase and its design both now can be written in Kotlin. Along with that, it takes all the benefits that Kotlin brings.
- It is declarative which means it lets you describe the UI design using a set of functions. With Compose, you don’t have to worry about the previous state of the UI, you just have to declare how your new state should look like.
- Compose enables the reusability of the UI code. It lets you build UI as a composition of multiple small blocks that can be reused in multiple places according to the use case.
- It is compatible with your existing codebase.
- It improves the size of the app and the time it takes to build the app.
Why Compose?
Compose addresses coupling issue that exists in the UI development with XML. When we initialize our views written in XML in the code written in Java/Kotlin, it generates the possibility of Null Reference errors and makes it difficult to maintain. Jetpack Compose tries to minimize the coupling in the application.
Some Jetpack Compose Components
setContent() — This function is used to define the layout through composable functions within the onCreate() function in the code.
Composable — This function is represented using the annotation — @Composable. This is used to define the UI of the app. It takes data and emits UI elements. The functions marked with the @Composable annotation can be called from the setContent() function or from other Composable functions.
- @Composable function names are capitalized(Pascal Case).
- You add the @Composable annotation before the function.
- @Composable functions can’t return anything.
- Compose function name must be a noun. It may be prefixed by descriptive adjectives. Example — DoneButton(), RoundIcon()
Preview — This function is represented using the annotation — @Preview. This helps you see the preview of the composable function that you have written in the Studio without installing the app to the device. The preview function is also a composable function and so must follow the rules of the composable functions.
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.
References