Lesson 6: Your First Composable Function

Your First Composable Function

Time to write real code. Open MainActivity.kt and replace its contents with this:

package com.example.tasklist

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }
}

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

Hit Run. You should see plain text "Hello, Android!" on the emulator screen.

What just happened

• setContent { } tells Android: "everything inside here is Compose UI."
• Greeting("Android") calls our custom composable function, passing in the string "Android".
• Inside Greeting, Text(...) is a built-in composable that draws text on screen.

The @Preview annotation — instant feedback without running the app

Rebuilding and reinstalling the app every time you change something is slow. Add this below Greeting:

import androidx.compose.ui.tooling.preview.Preview

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting("Preview")
}

Now open the Split or Design view in Android Studio's editor — you'll see a live preview of your UI update as you type, with no emulator required. You'll use @Preview constantly for the rest of this course.

Next: Lesson 7 — understanding what an Activity actually is and the app lifecycle.