Source unsplash.com/photos/3cIvvzjE6Lk

Playing with Jetpack Compose dev preview — Part 1: Sample

No more quest to try it! Only dependencies and Android Studio 3.5

During Google I/O’19 many new and interesting things were presented for Android Developers. I am sure that Jetpack Compose is #1 in the top list of them. Unfortunately, it’s not ready for production and trying it was a difficult quest because you need to build your own version of Android Studio. The reason is that composable functions are build using a custom Kotlin compiler plugin. Kotlin compiler plugins have no open APIs and I didn’t find any information about its release.

Everything changed on October 10 when Google released the first dev builds of Jetpack Compose libraries. They don’t require any specific build of Android Studio and can be run in the latest available stable (3.5.1) or later. How? Instead of the Kotlin compiler plugin new version of Jetpack Compose use code generation and reflection calls.

Jetpack Compose still isn’t ready for production. Developer preview libraries were made only to simplify trying the future of UI in Android.

New artifacts

Core components

Two new dependencies required to try Jetpack Compose are

• androidx.compose:compose-compiler:0.1.0-dev01
• androidx.compose:compose-runtime:0.1.0-dev01

compose-compiler is the processor for annotations that you need to add with kapt to your Gradle module.

compose-runtime contains APIs that used to generate code for Compose UI. Obviously, you’ll use @Composable from it to declare UI.

UI components

• androidx.ui:ui-core:0.1.0-dev01
Base classes used across the system covering primitives, graphics, and painting: Dp, Autofill, Offset, Rect, Paint, vector math, etc.
• androidx.ui:ui-layout:0.1.0-dev01
Basic layout components: Column, Row, Table, Padding, AspectRatio, etc.
• androidx.ui:ui-framework:0.1.0-dev01
Base components exposed by the system as building blocks. This includes Draw, Layout, Text, etc.
• androidx.ui:ui-animation:0.1.0-dev01
Animation components
• androidx.ui:ui-animation-core:0.1.0-dev01
Internal declarations for the animations system
• androidx.ui:ui-android-text:0.1.0-dev01
Base components for a text from the system as build blocks.
• androidx.ui:ui-material:0.1.0-dev01
Set of UI components built according to the Material spec: MaterialTheme, BottomAppBar, Buttons, FAB, TopAppBar, etc.
• androidx.ui:ui-tooling:0.1.0-dev01
• androidx.ui:ui-platform:0.1.0-dev01
Internal implementation that allows separation of the Android implementation from host-side tests
• androidx.ui:ui-vector:0.1.0-dev01
Vector graphics
• androidx.ui:ui-foundation:0.1.0-dev01
Base components exposed by the system as building blocks: PopupLayout, Scroller, Dialog, Gestures, Selection, Shapes.
• androidx.ui:ui-text:0.1.0-dev01
Text engine
• androidx.ui:ui-test:0.1.0-dev01
Testing framework

Show me the code

1. Setup the Gradle module where Jetpack Compose will be used

2. Create our own composable function with UI:

3. Apply the composable function as content for an Activity:

4. Run the app and see the result

Conclusion

It’s great that Google migrated from the initial Kotlin compiler plugin based solution to annotation processing + reflection. I don’t know where Kotlin compiler plugin will be open for developers or how long we need to wait that developers from JetBrains accept the plugin for Jetpack Compose into the Kotlin compiler.

I am waiting for Android Dev Summit 2019 to find out more news about Jetpack Compose: state, alpha state, compatibility with existed resource system and etc.

In the next article, I’ll cover how Jetpack Compose works under the hood and how many reflection calls are used.