Week 4 Monday: Jetpack Compose Foundations

CS 3180 Mobile Application Development

Today’s Agenda

1. What is Jetpack Compose? (20 min)

Today’s Agenda (continued)

1. What is Jetpack Compose? (20 min)
2. Core Composables (25 min)

Today’s Agenda (continued)

1. What is Jetpack Compose? (20 min)
2. Core Composables (25 min)
3. Layouts with Column/Row/Box (30 min)

Learning Objectives

By the end of today, you will be able to:

1. Explain declarative UI and how Compose works

Learning Objectives (continued)

By the end of today, you will be able to:

1. Explain declarative UI and how Compose works
2. Build UI using core composables

Learning Objectives (continued)

By the end of today, you will be able to:

1. Explain declarative UI and how Compose works
2. Build UI using core composables
3. Arrange UI with Column, Row, and Box

What is Jetpack Compose?

What is Jetpack Compose? (continued)

• Declarative UI framework

What is Jetpack Compose? (continued)

• Declarative UI framework
• 100% Kotlin (no XML)

What is Jetpack Compose? (continued)

• Declarative UI framework
• 100% Kotlin (no XML)
• Official Android UI toolkit (stable since 2021)

What is Jetpack Compose? (continued)

• Declarative UI framework
• 100% Kotlin (no XML)
• Official Android UI toolkit (stable since 2021)
• Less code, easier to maintain

Declarative vs. Imperative

// Imperative (XML + code)
val textView = findViewById<TextView>(R.id.greeting)
textView.text = "Hello, $name"
textView.setTextColor(Color.BLUE)

// Declarative (Compose)
Text(
    text = "Hello, $name",
    color = Color.Blue
)

Key Compose Principles

Key Compose Principles (continued)

• Composable functions (annotated with @Composable)

Key Compose Principles (continued)

• Composable functions (annotated with @Composable)
• Data flows down, events flow up

Key Compose Principles (continued)

• Composable functions (annotated with @Composable)
• Data flows down, events flow up
• Recomposition updates UI automatically

Key Compose Principles (continued)

• Composable functions (annotated with @Composable)
• Data flows down, events flow up
• Recomposition updates UI automatically
• Everything is a function

Compose Advantages

Compose Advantages (continued)

• Type-safe Kotlin UI

Compose Advantages (continued)

• Type-safe Kotlin UI
• Less boilerplate

Compose Advantages (continued)

• Type-safe Kotlin UI
• Less boilerplate
• Live Preview in Android Studio

Compose Advantages (continued)

• Type-safe Kotlin UI
• Less boilerplate
• Live Preview in Android Studio
• Interoperable with XML

Your First Composable

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

@Preview
@Composable
fun GreetingPreview() {
    Greeting("Android")
}

Text Composable

Text(
    text = "Hello, World!",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue,
    textAlign = TextAlign.Center
)

Image and Icon Composables

Image(
    painter = painterResource(R.drawable.logo),
    contentDescription = "App logo",
    modifier = Modifier.size(100.dp)
)

Icon(
    imageVector = Icons.Default.Favorite,
    contentDescription = "Favorite",
    tint = Color.Red
)

Button Variants

Button(onClick = { /* handle click */ }) {
    Text("Click Me")
}

OutlinedButton(onClick = { }) { Text("Outlined") }
TextButton(onClick = { }) { Text("Text Button") }
IconButton(onClick = { }) {
    Icon(Icons.Default.Add, contentDescription = "Add")
}

TextField and OutlinedTextField

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Enter name") },
    placeholder = { Text("John Doe") }
)

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Email") }
)

Common Composable Patterns

Common Composable Patterns (continued)

• Provide contentDescription for accessibility

Common Composable Patterns (continued)

• Provide contentDescription for accessibility
• Use Material Design components when possible

Common Composable Patterns (continued)

• Provide contentDescription for accessibility
• Use Material Design components when possible
• Composable names use PascalCase

Common Composable Patterns (continued)

• Provide contentDescription for accessibility
• Use Material Design components when possible
• Composable names use PascalCase
• Content is often a trailing lambda

Layouts: Column (Vertical)

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.SpaceBetween,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}

Layouts: Row (Horizontal)

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly,
    verticalAlignment = Alignment.CenterVertically
) {
    Icon(Icons.Default.Home, contentDescription = "Home")
    Icon(Icons.Default.Search, contentDescription = "Search")
    Icon(Icons.Default.Person, contentDescription = "Profile")
}

Layouts: Box (Overlapping)

Box(
    modifier = Modifier.size(200.dp),
    contentAlignment = Alignment.Center
) {
    Image(
        painter = painterResource(R.drawable.golf_hole),
        contentDescription = null,
        modifier = Modifier.fillMaxSize()
    )
    Text(
        text = "Hole 7",
        color = Color.White,
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold
    )
}

Nesting Layouts

Column {
    Row {
        // Horizontal items
    }
    Box {
        // Overlapping items
    }
    Row {
        // More horizontal items
    }
}

Layout Decision Guide

Layout Decision Guide (continued)

• Column: vertical stacks

Layout Decision Guide (continued)

• Column: vertical stacks
• Row: horizontal alignment

Layout Decision Guide (continued)

• Column: vertical stacks
• Row: horizontal alignment
• Box: overlapping content

Layout Decision Guide (continued)

• Column: vertical stacks
• Row: horizontal alignment
• Box: overlapping content
• LazyColumn/Row: scrollable lists

Activity: Scorecard Grid Layout

Goal: Build a 3-column grid for Hole, Par, Score

Scorecard Grid: Header Row

@Composable
fun ScorecardGrid() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Text("Hole", modifier = Modifier.weight(1f), fontWeight = FontWeight.Bold)
            Text("Par", modifier = Modifier.weight(1f), fontWeight = FontWeight.Bold)
            Text("Score", modifier = Modifier.weight(1f), fontWeight = FontWeight.Bold)
        }

Scorecard Grid: Hole Rows

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            HoleButton("1", Modifier.weight(1f))
            Text("4", modifier = Modifier.weight(1f))
            ScoreButton("", Modifier.weight(1f))
        }

        // TODO: Students complete holes 2-9
    }
}

Scorecard Grid: Helper Buttons

@Composable
fun HoleButton(holeNumber: String, modifier: Modifier = Modifier) {
    Button(
        onClick = { },
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFF2E7D32)
        )
    ) {
        Text(holeNumber, fontSize = 18.sp)
    }
}

@Composable
fun ScoreButton(score: String, modifier: Modifier = Modifier) {
    OutlinedButton(
        onClick = { },
        modifier = modifier
    ) {
        Text(score.ifEmpty { "-" }, fontSize = 18.sp)
    }
}

Live Demo Preview

Show the scorecard grid in Preview with 1–2 holes and verify spacing

Wrap-Up

• Compose is declarative and Kotlin-first

Wrap-Up (continued)

• Compose is declarative and Kotlin-first
• Core composables build most screens

Wrap-Up (continued)

• Compose is declarative and Kotlin-first
• Core composables build most screens
• Layouts organize components into a scorecard