Your Second Kotlin Android App

What exactly is Jetpack Compose?

Jetpack Compose is a modern declarative UI toolkit for Android. It allows you to create beautiful UIs with less code. It also allows you to create UIs that are responsive to different screen sizes and orientations. In this course, you’ll be learning how to use Jetpack Compose to create your second android app.

Jetpack Compose is written in Kotlin, meaning you write UIs with less code and use powerful and intuitive Kotlin tools and APIs. You show your UI dynamically and declaratively. You can also use Jetpack Compose to create UIs that are responsive to different screen sizes and orientations.

Compose is heavily based on state. You render your views depending on the state of your app.

It enables you to do all this quickly and with less code.

What are Composable Functions?

Foy you to create UIs in Compose, you start by creating Composable functions. A Composable function is a function that describes how to render a UI. You can call these functions from other Composable functions to compose your UI. A composable function has to be annotated with the @Composable annotation.

You can as well preview how these composable functions will look in the preview window. You use the @Preview annotation to do this.

The functions are fast and idempotent. This means that you can call them as many times as you want and they will always return the same result.

The functions do not have any side effects like modifying properties or variables.

What are Modifiers?

Composables take modifiers as parameters. Modifiers allow you to decorate your composable with additional functionality. You can use modifiers to change size, behavior, appearance, add padding, margin, background color, etc. to your composable.

You can use them to add extra information like accessibility information to your composable.

Using them, you can process user input and also add interactions such as clicks, scroll and drag behavior to your composable.

You’ve now understood the basics of Jetpack Compose. Next, let’s dive deep into the project you created.

When you create your compose project, Android Studio generates the following files for you:

• MainActivity.kt - This is the main activity of your app. It contains the code that inflates the layout file. In Compose, this file is slightly different. The class extends ComponentActivity and it contains a setContent function that takes a composable function as a parameter. This function is the root of your UI. This function is called MainActivity and it is the first composable function that is called when the app is launched.
• There’s a ui/theme folder that contains the theme of your app. You can use this to change the colors of your app. It has the following files:
  • Colors.kt - This file contains the colors for your app. You can change the colors of your app by changing the values of the colors in this file.
  • Type.kt - This file contains the typography of your app. You can change the typography of your app by changing the values of the typography in this file.
  • Theme.kt - This file contains the theme of your app. It combines colors, shapes and typography to create a theme for your app. You can change the theme of your app by changing the values of the theme in this file. In this file, you define your dark theme and light theme colors and dynamic colors as well.

Next, navigate to your build.gradle app file, you’ll see that the following dependencies have been added to your project:

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation platform('androidx.compose:compose-bom:2022.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-tooling'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

Since Compose is the default UI framework Android Studio Flamingo onwards, Android Studio automatically adds the compose and Material 3 dependencies to your project.

Depending on when you’re going through this course, the dependency versions might have been updated.

Explore MainActivity.kt

Open the MainActivity.kt file. You’ll see that the class extends ComponentActivity and it contains a setContent function that takes a Composable function as a parameter. This function is the root of your UI. This function is named ListMakerTheme and it is the first composable function that is called when the app is launched.

Inside the setContent block, you call your ListMakerTheme to apply your theme to your app. Inside the ListMakerTheme block, you have these block of code:

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Greeting("Android")
}

In the code above, you’re creating a Surface composable. You’re passing a modifier to it. The modifier is Modifier.fillMaxSize(). This modifier fills the entire screen with the Surface composable. You’re also passing a color to the Surface composable. The color is MaterialTheme.colorScheme.background, which is the background color of your app. You can change this color by changing the value of the background color in the Colors.kt file in the ui/theme folder. You also pass the Greeting composable to the Surface composable. The Greeting composable takes a string as a parameter. You pass the string "Android" to the Greeting composable.

The Greeting function looks like this:

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

It takes a string as a parameter and displays it on the screen. It has a Text composable. The Text Composable takes a string as a parameter and displays it on the screen. The Text composable comes from the Material 3 library.

Lastly, you can also see a Composable function annotated with @Preview. This function is used to preview how the Greeting Composable will look like. You can similarly use the @Preview annotation to generate previews for other Composable functions. At first, the preview doesn’t display anything. Make sure you build the project and on the pane on the top right, switch to Split mode to see both the preview and the code.