Blog Infos
Author
Published
Topics
,
Author
Published
Posted by: Pamela Hill

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

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){
...
}
view raw NetflixClone hosted with ❤ by GitHub

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))
view raw Modifiers hosted with ❤ by GitHub

Job Offers

Job Offers


    Android Manager (all genders)

    Babbel
    Berlin
    • Full Time
    apply now

    Android Engineer (d/f/m)

    Mobimeo GmbH
    Berlin or Hamburg
    • Full Time
    apply now

    Senior Android Engineer – Big Release Team

    Zalando SE
    Berlin
    • Full Time
    apply now
Load more listings

RECOMMENDED VIDEO

, , ,

Painless Persistence on Kotlin Multiplatform with Realm Kotlin

In this session, we will explore a fast, intuitive way to build great mobile applications using Realm’s new Kotlin SDK with Multiplatform support. We will dive deeper into how we evolved the Realm Java SDK to be a fully native Kotlin Multiplatform SDK. You will learn how Realm’s natural object model combined with Kotlin features like…
READ MORE

<h3>Jobs</h3>

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:

Get started with Jetpack Compose (official documentation)

State documentation (official documentation)

Thank you to Nick Rout for reviewing my article and giving suggestions for improvement.

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
Hi, today I come to you with a quick tip on how to update…
READ MORE
blog
Automation is a key point of Software Testing once it make possible to reproduce…
READ MORE
blog
KSP (Kotlin Symbol Processor) is a new API from Google for writing Kotlin compiler…
READ MORE
blog
In Android Studio the build Gradle files in our project structure by default use…
READ MORE
Menu