Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Jetpack Compose

A declarative toolkit for building UI

Jetpack Compose is an unbundled toolkit designed to simplify UI development. It combines a reactive programming model with the conciseness and ease of use of the Kotlin programming language.

Core Principles

Concise and Idiomatic Kotlin

Built with the benefits that Kotlin brings -- concise, safe, and fully interoperable with Java. Designed to drastically reduce the amount of boilerplate code you have to write, so you can focus on your app code, and help avoid entire classes of errors.

Declarative

Fully declarative for defining UI components, including drawing and creating custom layouts. Simply describe your UI as a set of composable functions, and the framework handles UI optimizations under the hood and automatic updates to the view hierarchy.

Compatible

Compatible with existing views so you can mix and match, and adopt at your own pace with direct access to all of the Android and Jetpack APIs.

Enable Beautiful Apps

Designed with Material Design out of the box and animations from the start, so it’s easy to create beautiful apps that are full of motion.

Accelerate Development

Accelerate development by writing less code and using tools like Apply Changes and live preview.

A quick look

Jetpack Compose is in development on the Android Open Source Project. It has two major components:

  • Compose UI library, which contains the core UI toolkit with layout, input, text, animations, styles, widgets, and graphics.
  • Compose compiler, a custom Kotlin compiler plugin that takes composable functions, and automatically updates the UI hierarchy.

A Compose application is made up of composable functions that transform application data into a UI hierarchy. A function is all you need to create a new UI component.

To create a composable function, just add the @Composable annotation to the function name. Under the hood, Compose uses a custom Kotlin compiler plug-in so when the underlying data changes, the composable functions can be re-invoked to generate an updated UI hierarchy. The simple example below prints a string to the screen.

import androidx.compose.*
import androidx.ui.core.*

@Composable
fun Greeting(name: String) {
   Text ("Hello $name!")
}

The APIs for the Jetpack Compose UI library live in the AOSP frameworks/support/ui directory. The Compose compiler and runtime code can be found in frameworks/support/compose.

Compose UI library

The Jetpack Compose UI library contains these modules:

android-text/
Android specific text stack dependent implementations
android-view/
Wrappers and adapters for existing Android Views
animation/
Animation components
animation-core/
Internal declarations for the animations system
core/
Base classes used across the system covering primitives, graphics and painting
framework/
Base components exposed by the system as building blocks. This includes Draw, Layout, Text, etc.
layout/
Basic layout components
material/
Set of UI components built according to the Material spec
platform/
Internal implementation that allows separation of the Android implementation from host-side tests
test/
Testing framework
text/
Text engine