Mobile

Jetpack Compose

Android's modern declarative UI toolkit in Kotlin that replaces XML layouts.

Official site

What it is

Google released Jetpack Compose as stable 1.0 in 2021. The UI is described with Kotlin functions annotated @Composable, with no XML layout files.

As with React or SwiftUI, UI is a function of state. When state changes, recomposition happens: only the composables whose data changed are redrawn. State is held with remember and mutableStateOf, and richer logic lives in a ViewModel.

Compose Multiplatform from JetBrains extends the approach to iOS, desktop and web. For Android it is now the recommended way to build new screens.

Use it when

  • A new Android app or new screens in an existing one.
  • You need complex animations and custom components with less code.
  • Shared UI between Android and other platforms via Compose Multiplatform.

Avoid it when

  • A large XML View app where full migration is not justified: Compose can be adopted gradually.
  • The team does not know Kotlin.

Key concepts

@Composable
A function that describes part of the UI and can call other composables.
Recomposition
Re-invoking composables when the state they read has changed.
State hoisting
State is lifted up, and the component receives a value and a callback.
Modifier
A chain that sets size, padding, click and background.
Material 3
Ready components and themes following the Material design system.

Example

A composable counter with state.

Interview questions

  1. 1. What is recomposition?

    The process of re-invoking composable functions when state they read has changed. Compose recalculates only the parts that depend on changed data.

  2. 2. Why remember?

    To keep a value across recompositions. Without it a local variable would reset on every function call. To survive screen rotation use rememberSaveable.

  3. 3. What is state hoisting?

    An approach where a composable does not hold state itself but receives a value and a change handler from its caller. That makes the component reusable and easier to test.

  4. 4. How does Compose differ from XML Views?

    Compose is declarative and fully in Kotlin, while XML needs separate layout files and imperative View updates. Compose is usually shorter and easier to test.

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform