Basic Composables

@Composable
fun Greeting(name: String) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Hello $name!",
            style = MaterialTheme.typography.headlineMedium,
            color = MaterialTheme.colorScheme.primary
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Button(onClick = { /* Handle click */ }) {
            Text("Click Me")
        }
    }
}

State Management

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

// ViewModel
class MyViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(UiState())
    val uiState: StateFlow<UiState> = _uiState.asStateFlow()
}

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    // Use uiState
}

Layout Composables

Modifiers

Text("Styled")
    .fillMaxWidth()
    .padding(16.dp)
    .background(Color.Blue)
    .clip(RoundedCornerShape(8.dp))
    .clickable { /* Handle click */ }
    .testTag("myText")

Material 3 Components

• Button, OutlinedButton, TextButton
• TextField, OutlinedTextField
• Card, ElevatedCard
• TopAppBar, BottomAppBar
• NavigationBar, NavigationRail
• FloatingActionButton
• AlertDialog, ModalBottomSheet