Introduction

Hi, dear readers! I'm posting this article before the one related with the project because I realised it would be better to give a short introduction to new concepts before the real project.

That said, let's have a small introduction to Jetpack Compose.

Jetpack Compose

Jetpack Compose is a modern toolkit to develop Android apps' UI. Compared to the old Views approach that uses XML, this is a lot easier and a less verbose way to create UIs and their functionalities.

Visual elements are created by using special functions called composable functions. These functions not just declare how an element looks, they also declare how it behaves. They increase code reusability and testing.

For a function to be considered a composable, it must be annotated by the @Composable annotation, and composable functions can only be called if the @Composable context exists somewhere up in the call stack.

There is also the @Preview annotation, as the name tells us, its purpose is to allow us to see a preview of the composable, but there is a restriction for functions with arguments: they must have default values.

State Management

A state is a value that can change anytime in the app. Composition is the description of the UI built by Jetpack Compose when it executes composables, taking the form of a tree of UI elements. This represents a state of the UI, and the only way to update it is to run the composables again due to the declarative nature of Jetpack Compose.

The first time a composable is executed it's called initial composition. When a state changes for a composable and it needs to be rebuilt, we call it recomposition.

Composables can use the remember API to store mutable or immutable objects in memory. The value is stored during the initial composition, and restored during recomposition.

mutableStateOf creates an observable MutableState<T>, which is an observable type. The MutableState<T> interface contains a value: T field that schedules recomposition for all composables that read it when the value changes.

Final Words

In this article, we had a brief introduction to Jetpack Compose. This is enough to get started on Android projects, additional features are better learned in practice.

See you in the next article, happy coding.