Jetpack Compose 1.0: Android’s Declarative UI Revolution

Jetpack Compose 1.0 hit stable in August 2021, Google’s answer to SwiftUI. After two years of alpha and beta development, Compose is production-ready and represents the biggest architectural shift in Android UI development since the introduction of Fragments. If you are writing Android UI in 2021, Compose is where you should invest.

Composable Functions: The Building Block

UI in Compose is defined by @Composable functions that describe what the screen should look like for a given state:

@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello, $name!",
        style = MaterialTheme.typography.headlineMedium,
        color = MaterialTheme.colorScheme.primary
    )
}

State and Recomposition

When state changes, Compose intelligently re-executes only the composables that read that state — a process called recomposition:

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

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Count: $count", style = MaterialTheme.typography.displaySmall)
        Button(onClick = { count++ }) { Text("Increment") }
    }
}

Modifier: Flexible Decoration

Modifiers chain decoration, layout, and interaction behaviours onto any composable:

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
        .clip(RoundedCornerShape(16.dp))
        .background(MaterialTheme.colorScheme.surface)
        .clickable { /* handle click */ }
)

Lists with LazyColumn

LazyColumn (equivalent to RecyclerView) only composes visible items:

LazyColumn(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    items(posts) { post ->
        PostCard(post = post)
    }
}

ViewModel Integration

Compose works seamlessly with the existing ViewModel/LiveData/StateFlow architecture. Use viewModel() to obtain a ViewModel and collectAsState() to observe a StateFlow:

@Composable
fun HomeScreen(vm: HomeViewModel = viewModel()) {
    val uiState by vm.uiState.collectAsState()
    PostList(posts = uiState.posts)
}

Interoperability with View System

Compose and the View system interoperate completely. Embed composables in XML layouts via ComposeView, or use AndroidView to embed a traditional View inside a composable. This makes incremental migration of existing apps straightforward.

Jetpack Compose will define Android UI development for the next decade. Start learning it today — the investment pays dividends immediately.