Learn JETPACK-COMPOSE with Real Code Examples

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

@Composable
fun TodoApp() {
    var todos by remember { mutableStateOf(listOf<String>()) }
    var newTodo by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        Row {
        TextField(value = newTodo, onValueChange = { newTodo = it }, modifier = Modifier.weight(1f))
        Spacer(modifier = Modifier.width(8.dp))
        Button(onClick = {
        if(newTodo.isNotBlank()) {
        todos = todos + newTodo
        newTodo = ""
        }
        }) {
        Text("Add")
        }
        }
        Spacer(modifier = Modifier.height(16.dp))
        Column {
        todos.forEach { todo -> Text(todo) }
        }
    }
}

Demonstrates a simple Jetpack Compose app with a Todo list, adding tasks, and displaying them using Composables and state management.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Counter: $count", style = MaterialTheme.typography.h4)
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Button(onClick = { count++ }) { Text("+") }
        Button(onClick = { count-- }) { Text("-") }
        Button(onClick = { count = 0 }) { Text("Reset") }
        }
    }
}

A simple counter app with increment, decrement, and reset buttons.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

@Composable
fun DarkModeCounterApp() {
    var count by remember { mutableStateOf(0) }
    var isDark by remember { mutableStateOf(false) }
    MaterialTheme(colors = if (isDark) darkColors() else lightColors()) {
        Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Counter: $count", style = MaterialTheme.typography.h4)
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Button(onClick = { count++ }) { Text("+") }
        Button(onClick = { count-- }) { Text("-") }
        Button(onClick = { count = 0 }) { Text("Reset") }
        }
        Button(onClick = { isDark = !isDark }) { Text("Toggle Theme") }
        }
    }
}

Counter app with light/dark theme toggle.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

@Composable
fun MultiCounterApp() {
    var counters by remember { mutableStateOf(listOf(0, 0, 0)) }
    Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        counters.indices.forEach { i ->
        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        Text("Counter ${i+1}: ${counters[i]}", style = MaterialTheme.typography.h5)
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Button(onClick = { counters = counters.toMutableList().also { it[i]++ } }) { Text("+") }
        Button(onClick = { counters = counters.toMutableList().also { it[i]-- } }) { Text("-") }
        }
        }
        }
    }
}

Multiple independent counters in a single view.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import androidx.compose.runtime.LaunchedEffect

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

@Composable
fun AutoIncrementCounter() {
    var count by remember { mutableStateOf(0) }
    var isRunning by remember { mutableStateOf(true) }
    LaunchedEffect(Unit) {
        while(true) {
        delay(1000)
        if(isRunning) count++
        }
    }
    Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Counter: $count", style = MaterialTheme.typography.h4)
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Button(onClick = { isRunning = !isRunning }) { Text(if(isRunning) "Pause" else "Resume") }
        Button(onClick = { count = 0 }) { Text("Reset") }
        }
    }
}

Counter that automatically increments every second.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

@Composable
fun PriorityTodoApp() {
    var todos by remember { mutableStateOf(listOf<Pair<String,String>>()) }
    var task by remember { mutableStateOf("") }
    var priority by remember { mutableStateOf("") }
    Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Row {
        TextField(value = task, onValueChange = { task = it }, modifier = Modifier.weight(1f), placeholder = { Text("Task") })
        TextField(value = priority, onValueChange = { priority = it }, modifier = Modifier.weight(1f), placeholder = { Text("Priority") })
        Button(onClick = {
        if(task.isNotBlank()) {
        todos = todos + (task to priority)
        task = ""; priority = ""
        }
        }) { Text("Add") }
        }
        Column {
        todos.forEach { Text("${it.first} (Priority: ${it.second})") }
        }
    }
}

Todo app where each task has a priority and displays it.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import androidx.compose.runtime.LaunchedEffect

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

@Composable
fun CountdownTimerApp() {
    var count by remember { mutableStateOf(10) }
    LaunchedEffect(Unit) {
        while(count > 0) { delay(1000); count-- }
    }
    Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Time: $count", style = MaterialTheme.typography.h4)
        Button(onClick = { count = 10 }) { Text("Reset") }
    }
}

Countdown timer starting from 10 seconds.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

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

@Composable
fun AlertCounterApp() {
    var count by remember { mutableStateOf(0) }
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    Scaffold(scaffoldState = scaffoldState) {
        Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp)) {
        Text("Counter: $count", style = MaterialTheme.typography.h4)
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        Button(onClick = {
        count++
        if(count == 10) scope.launch { scaffoldState.snackbarHostState.showSnackbar("Count reached 10!") }
        }) { Text("+") }
        Button(onClick = { count = 0 }) { Text("Reset") }
        }
        }
    }
}

Counter shows a Snackbar alert when it reaches 10.