Your Second Kotlin Android App

Aug 29 2023 · Kotlin 1.8.21, Android 13, Android Studio Flamingo | 2022.2.1

Part 1: Create Your App & Learn Jetpack Compose

03. Understand Jetpack Compose Essentials

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 02. Create the Project Next episode: 04. Customize Android Studio

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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.

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.

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.

    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'

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.

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Greeting("Android")
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}