Jetpack Compose: Getting Started

In order to build user interfaces on Android, there are two main different programming paradigms that you can use. These are the imperative UI development paradigm and the declarative UI development paradigm.

The imperative UI development paradigm is the traditional way of building user interfaces on Android. It is the way that you have been building user interfaces on Android previously.

The declarative UI development paradigm is a new way of building user interfaces on Android. It is the way that Jetpack Compose uses to build user interfaces on Android.

Imperative UI design involves you as the developer telling the system how to build the user interface with a series of commands. You are responsible for telling the system how to build the user interface and how to update the user interface when the state of the application changes.

Decalaritve UI design involves you as the developer telling the system what the user interface should look like. You are responsible for telling the system what the user interface should look like and the system is responsible for building the user interface and updating the user interface when the state of the application changes.

Imperative Text in Android

In order to display a piece of text on the screen using the imperative UI development paradigm, the following steps would be required:

• Create a TextView widget and add it to your layout file.

<TextView
    android:id="@+id/app_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello Android"
    android:textSize="24sp" />

• Find the TextView widget in your Activity or Fragment and set the text to be displayed.

val textView = findViewById<TextView>(R.id.app_text)
textView.text = "Hello Android"

• You will also be responsible for updating the text when the state of the application changes.

Declarative Text in Jetpack Compose

In order to display a piece of text on the screen using the declarative UI development paradigm, the following steps would be required:

• Create a Text composable function in a Kotlin file.

@Composable
fun AppText(text: String) {
    Text(text = text, fontSize = 24.sp)
}

• Call the AppText composable function in your Activity or Fragment and pass in the text to be displayed.

AppText(text = "Hello Android")

• The system will be responsible for updating the text when the state of the application changes.

[Slide 04 - Setting up a Jetpack Compose Project] In order to get started with Jetpack Compose, you will need to set up a Jetpack Compose project.

Create a new project in Android Studio and select the Empty Activity template.

The Android Studio IDE will generate a project with all the necessary files to get started with a Jetpack Compose app.

Alternatively, you can also add Jetpack Compose to an existing project by doing the following:

• Add the following dependencies to your build.gradle file.

dependencies {
    def composeBom = platform('androidx.compose:compose-bom:2023.04.01')
    implementation composeBom
    androidTestImplementation composeBom
}

• Add the following options to your build.gradle file.

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.6"
    }
}

• Rebuild your project since you have made changes to your build.gradle file.

You have successfully set up a Jetpack Compose project. In the next episode, you will learn how to write your first Composable.