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.

Ref

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.

build.gradle

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 'com.google.android.material:material:1.5.0'
    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 'androidx.compose.foundation:foundation:1.0.5'
    // 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 'com.android.application' version '7.1.0' apply false
    id 'com.android.library' version '7.1.0' apply false
    id 'org.jetbrains.kotlin.android' 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)

Coding

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?) {
        super.onCreate(savedInstanceState)

        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.