Jetpack Compose is the new toolkit for building UIs in Android. While there are many samples and tutorials available to learn the practical particulars of Jetpack Compose, often terms are used without explanation. This article aims to clarify these terms for readers unfamiliar with their meaning.
Architecture
Unidirectional data flow
A pattern where data flows in only one direction. Imagine that we have a screen made up of components, and these components are made up of smaller components and so on. Data flows down from parent components to their child components, and events flow up from child components to their parent components, which are responsible for altering the child components’ state in response to these events.
Example:
The above screen could be said to consist of three components: one for username, one for name, and another for birthday. When the screen is created, the data is perhaps retrieved from a database and then passed from the screen to each of these components. For example, the username “frodo” is passed to the username component.
If the user enters a value “frodobaggins” and presses the “Save” button, the internal state of the username component does not yet change. Rather, the save user event is sent to the screen, and the screen saves the data to the database and sends the new state again to the child components.
Imperative user interfaces
A style of developing user interfaces where the developer specifies how to mutate the user interface in response to events. The Android view system is an example of this style. While the views are usually described in XML, the user interface tree hierarchy is mutated in response to events. For example, to set text on a TextView, findViewById is used to find the view and then setText to alter the text.
Declarative user interfaces
A style of developing user interfaces where the developer describes what the user interface should look like based on the current state. The user interface is not mutated in response to events, but rather the whole user interface is regenerated when the state changes, and only the necessary changes are applied. Jetpack Compose is an example of this style.
Basics
Composable functions
The building block of creating user interfaces in Jetpack Compose. To create a composable function, annotate a Kotlin function with @Composable. The function is unrestricted in terms of parameters but must not have an explicit return type (other than Unit).
Example:
Below is an example of a composable function that will display a screen with movie details.
@Composable
fun NetflixClone(movie: Movie){
...
}Modifiers
Alters a composable's size, layout, behaviour, and appearance. To create a modifier, use one of the Modifier factory methods. Modifiers can be chained, but note that the order of modifiers matter. If a particular composable doesn't take the explicit argument that you want, it's probably a modifier.
Example:
Below is an example of a text composable displaying the name of an epic movie ️🧝♀️ with a little vertical and horizontal padding.
Text(
text = "The Fellowship of the Ring",
style = MaterialTheme.typography.h1,
modifier = Modifier.padding(
horizontal = 16.dp,
vertical = 4.dp
)
)Recomposition
Automatically calling a composable function again with new data, so that the emitted user interface components are redrawn with new data. Jetpack Compose uses intelligent recomposition to only redraw what needs to change.
Layout & design
LazyRow / LazyColumn
Composables that only compose and lay out child composables visible in the viewport. This is particularly for use cases where there are many child composables in the layout, so that the user interface stays performant. LazyRow lays out components horizontally, whereas LazyColumn lays out components vertically.
Content composable lambda
Lambda taking a content parameter with the type @Composable () -> Unit
Slot APIs
Takes several content composable lambdas to place the resulting components in specific predefined positions in a user interface. Scaffold, defined below, is an example of a composable that makes use of slot APIs.
Scaffold
Simplifies creating a Material Design user interface by providing a structure in which to slot in your custom composables. For example, Scaffold provides slots for the top bar, bottom bar, floating action button, drawer and your screen content.
State
State
A value that changes over time. For example, a simple variable is state. The family of stateOf functions create value holders where the Compose scope will subscribe to the changes of the value.
State hoisting
A pattern where a child composable's state is moved (or hoisted) to its parent composable. This means that only the parent composable can change the state, and the child component is therefore stateless.
Stable
Composables that only accept stable inputs can safely be skipped during recomposition. Primitives, String objects, and interfaces are inherently stable, and objects explicitly marked with the @Stable annotation can be made stable.
Key composable
Identifies content composables with a key of one or more values. Keys do not have to be globally unique, only among the composables at the specific call site.
Remember
A composable function that stores the state in memory during initial composition and returns the value during recomposition.
Advanced topics
Side-effect
Change to the state of the application that happens outside the scope of the composable function.
Effect
A composable function that doesn't emit user interface components but causes side effects to run when composition completes. An example of an effect in Jetpack Compose is LaunchedEffect, which launches a composable lifecycle-aware coroutine outside the composable.
References:
Thank you to Nick Rout for reviewing my article and giving suggestions for improvement.