Jetpack Compose Basics

Jetpack Compose is Android's modern declarative UI toolkit built entirely in Kotlin. Instead of defining layouts in XML, you write composable functions annotated with @Composable that describe what the UI should look like for a given state. When state changes, Compose automatically recomposes only the affected parts of the UI. State in Compose is managed with remember and mutableStateOf. The remember function retains the value across recompositions, while mutableStateOf creates an observable state holder that triggers recomposition when its value changes. State hoisting — lifting state up to the parent composable — keeps components reusable and testable. Compose provides a rich set of built-in composables (Text, Button, TextField, LazyColumn, etc.) and a powerful modifier system for applying styling, layout, and gesture handling in a chainable, type-safe way.

Example

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
    ) {
        Text(
            text    = "Count: $count",
            style   = MaterialTheme.typography.headlineMedium,
        )
        Spacer(modifier = Modifier.height(16.dp))
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = { count-- }) { Text("-") }
            Button(onClick = { count++ }) { Text("+") }
        }
    }
}

@Composable
fun NameList(names: List<String>, onItemClick: (String) -> Unit) {
    LazyColumn {
        items(names) { name ->
            ListItem(
                headlineContent = { Text(name) },
                modifier = Modifier.clickable { onItemClick(name) },
            )
            HorizontalDivider()
        }
    }
}

HTML

Full Editor

Related Resources

Kotlin Reference

Complete tag & property list

Kotlin How-To Guides

Step-by-step practical guides

Kotlin Exercises

Practice what you've learned