[Translation] Jetpack Compose

[Translation] Jetpack Compose


  • Jetpack Compose is a separate toolkit designed to simplify UI development. It connects the reactive programming model with finality and ease of use of the Kotlin programming language.
  • NOTE: Jetpack Compose is currently in its early research stage, pre-alpha. Its API is not yet complete and therefore should not be used in production

  • from the translator: at the bottom of the article there is a link to a video with a report on Jetpack Compose at the "Google I/O'19" conference

Basic Principles

Kotlin brevity and style

  • takes advantage of Kotlin - short, secure, and fully compatible with Java. Designed to significantly reduce the amount of standard code, which allows you to focus on your code, and helps to avoid internal class errors


  • Fully declarative definition of UI components, including drawing and creating your own placements. Simply describes your UI as a set of composable functions, and the platform manages the optimization of the UI and automatically updates the widget hierarchy.


  • compatible with existing widgets so that you can mix and combine, as well as adapt as you need to have direct access to all Android and Jetpack APIs

Allows you to create beautiful applications

  • supports Material Design out of the box, as well as animation, so it makes it easy to create beautiful applications filled with motion.

Accelerates development

  • Accelerate development by writing less code and using tools like Apply Changes and viewing changes in real time.

Quick review

  • Jetpack Compose was developed based on the Android Open Source Project . It contains two main components:
    • The Compose UI library, which contains the main UI toolbox, i.e. markup, input fields, text fields, animations, styles, widgets and graphics
    • Compose compiler, your own Kotlin-compiled plugin containing build functions and automatically updating the UI hierarchy
  • A compose application consists of composable functions that transform application data into a UI hierarchy. Functions are all you need to create a new UI component.
  • to create a composable function, simply add the @Composable annotation to the function name. Under the hood, Compose uses its own Kotlin-compiled plugin so that when the background data changes, composable functions can be called again to generate updates to the UI hierarchy. A simple example below prints a line on the screen:

      import androidx.compose. *
     import androidx.ui.core. *
     fun Greeting (name: String) {
      Text ("Hello $ name!")

  • The library API is located in the AOSP directory at frameworks/support/ui . The compose compiler and runtime code are available at the following link frameworks/support/compose

Compose UI Library

  • The Jetpack Compose UI library contains the following modules:
    • android-text/- Android-specific text processing
    • android-view/- wrappers and adapters for existing Android widgets
    • animation/- animation components
    • animation-core/- internal components of the animation system
    • core/- base system classes including primitives, graphics and drawing
    • framework/- the basic components provided by the system, used as building blocks. Contains the classes Draw, Layout, Text, etc.
    • layout/- basic markup components
    • material/- a set of UI components created based on the Material Design specification
    • platform/- internal implementations allowing to separate Android implementation from tests on the host side
    • test/- testing the framework
    • text/- text engine

From the translator

Video of the Jetpack Compose report on "Google I/O'19"

Source text: [Translation] Jetpack Compose