Karen Ng, Product Director at Google

Jetpack Compose is a modern UI toolkit designed to help developers easily and quickly build elegant applications across the Android platform using native platform apis. It reduces the amount of code and includes interactive tools, as well as intuitive Kotlin apis. Add life to your application. Now, we are officially releasing the Alpha version of Jetpack Compose and invite you to try it out!

Developers derive value and realize ideals by building applications. Development efficiency depends on three important factors: programming languages, integrated development environments (IDES), and user interface (UI) frameworks. We bring Jetpack Compose to you to make sure that you (us too!) More efficient at building uIs!

Initially, we planned to address some of the most difficult and common issues in Android development with a series of Android Jetpack libraries to help developers run high-quality apps across all versions of Android. Jetpack is now used by 84 percent of the top 10,000 apps in the Google Play store.

Further, we’ve learned that Kotlin is so beloved by developers that it is now used by more than 70% of the top 1,000 apps, and by 60% of professional Android developers. After using Kotlin, the Google Home app reduced the number of lines of code by 80% in some cases and NullPointerExceptions by 33% compared to the same period in the past. Also, the Duolingo app saw an average 30% reduction in the number of lines of code visible to the naked eye after using Kotlin.

Finally, we collected some strong suggestions from the community that developers could use declarative apis to make UI building easier. Jetpack Compose combines these three advantages — an API for building high-quality applications on a large scale, an intuitive programming language, and a responsive programming model.

Jetpack Hello World

Jetpack Compose: Alpha is now available

Jetpack Compose Alpha provides the capabilities needed to build mature Android applications with efficient tools that interoperate with existing Android views without requiring you to rewrite your application. The Compose API was designed and developed with a set of sample applications that use the Material Design specification! We are excited to launch these apps! You can also import and browse the latest examples directly from Android Studio.

The Alpha release is as follows:

  • Animations
  • Constraint Layout
  • Initial accessibility support
  • Input and gesture
  • Interoperability with views (can mix composable functionality in your existing app)
  • Lazy loading list
  • Material UI components
  • Performance optimization
  • test
  • Text and editable text
  • Themes and graphics
  • The Window management

Working closely with the JetBrains Kotlin team, we’ve also added a number of new features to Android Studio 4.2 Canary to help you build applications with Compose:

  • Compose code completes automatically
  • Compose preview
  • Deploy a single composable component to any device
  • Interactive Compose Preview
  • A Kotlin compiler plug-in that generates code
  • Sample data API for Compose
  • Romain video – Jetpack Compose:www.bilibili.com/video/BV1Vv…

Compose’s programming ideas

Compose uses a programming model that is completely different from the existing model for building UIs on Android. Historically, Android’s view hierarchy has been described as a TREE of UI components. As the state of the app changes, the UI hierarchy needs to be updated to display the current data. The most common way to update a UI is to use methods like findViewById() to traverse the UI component tree and change nodes by calling methods like the following:

button.setText(String)
Copy the code
container.addView(View)
Copy the code
img.setImageBitmap(Bitmap)
Copy the code

These methods change the internal state of the component. Not only is this tedious, but manually updating the view increases the likelihood of errors (such as forgetting to update the view). Jetpack Compose is an approach based entirely on declarative components, which means you need to describe the UI as a function that transforms data into a UI hierarchy. The Compose framework automatically updates the UI hierarchy for you when the underlying data changes, making it easy and quick to build your UI.

  • Watch the video: Think with Compose: Youtu.be /SMOhl9RK0BA

Fully interoperable with existing Android views

Adopting any new framework is a big change for an existing project and code base, which is why we’ve designed Compose to be as easy to adopt as Kotlin — it’s fully interoperable with existing Android code from the start.

Whether to migrate to Compose is up to you and your team. If you’re building a new app, the best option might be to use Compose to implement the entire UI of your app. We know that most people have a large existing code base and can combine Compose with an existing UI design without having to rewrite the application.

There are two main ways to combine Compose with a view-based UI:

  • You can add the Compose element to an existing UI, create a new Compose-based screen, or add the Compose element to an existing fragment or view layout.
  • You can add view-based UI elements to composable functions. Doing so allows you to add a non-compose based component to a Compose based component, such as a MapView or WebView.

We have also released a new library, the MDC Compose theme adapter, which allows you to reuse existing Material Components themes in the Compose UI.

For more information, see Compose for Existing Apps Codelab or check out the following two examples:

  • Tivi and Sunflower show how to integrate Compose into an existing project

  • The Crane sample application shows how to embed a MapView in Compose

  • Watch a video on adding Compose to your existing app: Youtu.be /PjQdFmiDgwk

Powerful tools

Android Studio includes powerful tools to assist you with Jetpack Compose and help you iterate through UI elements quickly.

With the Compose layout preview, you can preview the Compose component without having to deploy your application to a device or emulator. As you develop your application, your preview is updated to help you check for changes more quickly. To create a layout preview, write a Composable function that takes no parameters and add:

@Preview annotation
Copy the code

After the application is built, the Preview UI appears in the Preview pane of Android Studio.

Android Studio provides an interactive preview mode. In interactive preview mode, you can tap or type in a UI element and the UI will respond, just as it would in an installed application.

Interactive preview tool

You can also deploy a single composable feature to a physical device or Android Emulator. Android Studio creates a new Activity that contains the UI generated by the functionality and deploys it to your application on the device. This allows you to actually experience the test UI without having to reinstall the entire application or navigate to the current page.

Composable elements preview

Start using Jetpack Compose

To get started with Jetpack Compose, refer to the Compose tutorial and set it up. Or go straight to the sample app and browse for them in the “Compose by Example” section:

  • Compose example: youtu.be/DDd6IOlH3io

Welcome to the Compose learning plan to learn more about the Compose resource, including the new Codelab and extended documentation.

Since we opened Source Jetpack Compose last year, many developers have provided us with valuable feedback to get us to where we are today. Thank you!

We are also working on improving the stability and performance of the API, so we do not recommend that you fully deploy Compose into production at this time. But we want people to try it out and share feedback with us. You can also join Kotlin Slack’s # Compose channel or talk to us in the wechat comment section. Compose 1.0 is expected to be released in 2021.