Android Jetpack Compose Get Started


Jetpack Compose

Jetpack Compose is Android’s modern toolkit for building native UI.

It looks like Swift UI for iOS.


Jetpack Compose

Set up

Hello World

Let’s start to prepare Simple app.

From Set up tutorial, we can create a app as usual. Select Empty Activity and build app.


Add Options to work with Compose Compiler

    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    buildFeatures {
        compose true
    composeOptions {
        kotlinCompilerVersion "1.6.10"
        kotlinCompilerExtensionVersion "1.1.0"

Add compose compiler as additional dependencies. (Android doc does not have this description)

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation ''
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

    implementation 'androidx.compose.ui:ui:1.0.5'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.5'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation ''
    // Material Design
    implementation 'androidx.compose.material:material:1.0.5'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.5'
    implementation 'androidx.compose.material:material-icons-extended:1.0.5'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.5'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.5'

    implementation "androidx.compose.compiler:compiler:1.1.0"

    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'

Check Kotlin Version

plugins {
    id '' version '7.1.0' apply false
    id '' version '7.1.0' apply false
    id '' version '1.6.10' apply false

task clean(type: Delete) {
    delete rootProject.buildDir

androidx.compose.compiler:compiler and Kotlin version has dependencies.

In this case, Kotlin 1.6.10 and compiler:1.1.0 have compatible.

Please check Compose Compiler Page.

If this has wrong choice, there are error to compile and run (Stackoverflow)


Let’s move to code

package com.daiji110.jetpackcomposesampleapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Text

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {

        setContent {
            Text("Hello world!")

This is simple text to show. Activity is ComponentActivity (please check package)

Now, this does not have setContent(“”) file method. No need to use xml anymore.

Professional Programmer2