Week 5 Wednesday: Material Design 3 Theming

CS 3180 Mobile Application Development

Today's Agenda

1. Material Design 3 fundamentals (15 min)

Today's Agenda (continued)

1. Material Design 3 fundamentals (15 min)
2. Creating the Hope Foundation theme (20 min)

Today's Agenda (continued)

1. Material Design 3 fundamentals (15 min)
2. Creating the Hope Foundation theme (20 min)
3. Building adaptive layouts (15 min)

Part 1: Material Design 3

What is Material Design?

What is Material Design? (continued)

• Google's design system for consistency

What is Material Design? (continued)

• Google's design system for consistency
• Material 3 is the current version (2021+)

What is Material Design? (continued)

• Google's design system for consistency
• Material 3 is the current version (2021+)
• Material You: personalization from device theme

What is Material Design? (continued)

• Google's design system for consistency
• Material 3 is the current version (2021+)
• Material You: personalization from device theme
• Includes components, colors, typography, shapes

Material 3 Components in Jetpack Compose

import androidx.compose.material3.*  //  Use this

// NOT this:
import androidx.compose.material.*   //  Old (Material 2)

Material Theme Structure

MaterialTheme(
    colorScheme = ...,    // Colors (primary, error, etc.)
    typography = ...,     // Text styles
    shapes = ...          // Corner radii
) {
    // Your UI here
}

Accessing Theme Values in Compose

@Composable
fun ThemedScorecard() {
    Text(
        text = "Charity Golf Tracker",
        color = MaterialTheme.colorScheme.primary,
        style = MaterialTheme.typography.headlineMedium
    )
    
    Surface(
        color = MaterialTheme.colorScheme.primaryContainer,
        shape = MaterialTheme.shapes.medium
    ) {
        Text("Team Score: 72")
    }
}

Part 2: Hope Foundation Brand Theme

Material 3 Color Roles

Material 3 Color Roles (continued)

Primary Colors (Hope Foundation Green)

• primary: Main brand color (buttons, accents)
• onPrimary: Text/icons on primary background

Material 3 Color Roles (continued)

Primary Colors (Hope Foundation Green)

• primary: Main brand color (buttons, accents)
• onPrimary: Text/icons on primary background
• primaryContainer: Lighter primary (chips, badges)
• onPrimaryContainer: Text on primaryContainer

Material 3 Color Roles (continued)

Secondary Colors (Hope Foundation Gold)

• secondary: Complementary accent
• secondaryContainer: Lighter secondary
• onSecondary, onSecondaryContainer: Text colors

Material 3 Color Roles (continued)

Surface & Error Colors

• surface: Background for components
• onSurface: Text on surface
• error: Error states (over-par scores!)
• onError: Text on error background
• background, onBackground: Screen background

Step 1: Define Hope Foundation Colors

// theme/Color.kt

val HopeGreen = Color(0xFF2E7D32)
val HopeGold = Color(0xFFFFC107)

// Light theme
val md_theme_light_primary = Color(0xFF2E7D32)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFB8F5B0)

val md_theme_light_secondary = Color(0xFF7D5800)
val md_theme_light_onSecondary = Color(0xFFFFFFFF)
val md_theme_light_secondaryContainer = Color(0xFFFFDEA6)

Step 2: Define Dark Theme Colors

// Dark theme variants
val md_theme_dark_primary = Color(0xFF9DD996)
val md_theme_dark_onPrimary = Color(0xFF00390C)
val md_theme_dark_primaryContainer = Color(0xFF0B5319)

val md_theme_dark_secondary = Color(0xFFF5BE48)
val md_theme_dark_onSecondary = Color(0xFF422D00)
val md_theme_dark_secondaryContainer = Color(0xFF5F4100)

val md_theme_dark_error = Color(0xFFFFB4AB)

Step 3: Create Color Schemes

// theme/Theme.kt

val HopeFoundationLightColorScheme = lightColorScheme(
    primary = Color(0xFF2E7D32),
    onPrimary = Color.White,
    primaryContainer = Color(0xFFB8F5B0),
    secondary = Color(0xFF7D5800),
    onSecondary = Color.White,
    secondaryContainer = Color(0xFFFFDEA6),
    error = Color(0xFFBA1A1A),
    background = Color(0xFFFCFDF6),
    surface = Color(0xFFFCFDF6)
)

val HopeFoundationDarkColorScheme = darkColorScheme(
    primary = Color(0xFF9DD996),
    onPrimary = Color(0xFF00390C),
    primaryContainer = Color(0xFF0B5319),
    secondary = Color(0xFFF5BE48),
    error = Color(0xFFFFB4AB),
    background = Color(0xFF1A1C19),
    surface = Color(0xFF1A1C19)
)

Step 4: Create Theme Composable

@Composable
fun CharityGolfTrackerTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        HopeFoundationDarkColorScheme
    } else {
        HopeFoundationLightColorScheme
    }
    
    MaterialTheme(
        colorScheme = colorScheme,
        typography = GolfTypography,
        shapes = GolfShapes,
        content = content
    )
}

Step 5: Define Typography for Golf App

// theme/Type.kt

val GolfTypography = Typography(
    headlineMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 28.sp,
        lineHeight = 36.sp
    ),
    titleLarge = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 22.sp
    ),
    bodyLarge = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    // Large font for scores (outdoor visibility!)
    labelLarge = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 24.sp
    )
)

Step 6: Define Shapes

// theme/Shape.kt

val GolfShapes = Shapes(
    small = RoundedCornerShape(8.dp),    // Score badges
    medium = RoundedCornerShape(12.dp),  // Cards
    large = RoundedCornerShape(16.dp)    // Dialogs
)

Step 7: Wrap Your App in Theme

@Composable
fun ScorecardScreen() {
    CharityGolfTrackerTheme {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Scorecard") },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = 
                            MaterialTheme.colorScheme.primaryContainer,
                        titleContentColor = 
                            MaterialTheme.colorScheme.onPrimaryContainer
                    )
                )
            }
        ) { padding ->
            Column(modifier = Modifier.padding(padding)) {
                // Your scorecard content
            }
        }
    }
}

Testing Light and Dark Themes

@Preview(name = "Light Mode")
@Preview(
    name = "Dark Mode",
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun ScorecardPreview() {
    CharityGolfTrackerTheme {
        ScorecardScreen()
    }
}

Using Material Theme Builder

Steps:

1. Go to Material Theme Builder
2. Enter Hope Green (#2E7D32) as primary color
3. Enter Hope Gold (#FFC107) as secondary color
4. View generated colors for light and dark modes
5. Export as Jetpack Compose code

Part 3: Adaptive Layouts

Why Adaptive Layouts Matter

Why Adaptive Layouts Matter (continued)

• Users rotate their devices
• Some users have tablets
• Foldables have multiple configurations
• Different screen sizes need different layouts

Window Size Classes

val widthSizeClass: WindowWidthSizeClass
val heightSizeClass: WindowHeightSizeClass

Width classes:

• Compact: < 600dp (phones)
• Medium: 600-839dp (tablets, landscape phones)
• Expanded: >= 840dp (large tablets, desktops)

Height classes:

Height classes: (continued)

• Compact: < 480dp (small height)
• Medium: 480-899dp (typical phones)
• Expanded: >= 900dp (tablets in landscape)

Detecting Window Size

@Composable
fun ResponsiveScorecardScreen(
    windowWidthClass: WindowWidthSizeClass
) {
    when (windowWidthClass) {
        WindowWidthSizeClass.Compact -> {
            // Phone layout: single column
            ScorecardPhoneLayout()
        }
        WindowWidthSizeClass.Medium -> {
            // Landscape phone or small tablet
            ScorecardMediumLayout()
        }
        WindowWidthSizeClass.Expanded -> {
            // Tablet layout
            ScorecardTabletLayout()
        }
    }
}

Example: Phone Layout (Compact Width)

@Composable
fun ScorecardPhoneLayout() {
    Column(modifier = Modifier.fillMaxSize()) {
        // Single column of holes
        LazyColumn(modifier = Modifier.weight(1f)) {
            items(9) { index ->
                HoleScoreRow(
                    holeNumber = index + 1,
                    par = pars[index],
                    strokes = scores[index]
                )
            }
        }
        
        // Summary at bottom
        ScoreSummary(totalScore, scoreVsPar)
    }
}

Example: Tablet Layout (Expanded Width)

@Composable
fun ScorecardTabletLayout() {
    Row(modifier = Modifier.fillMaxSize()) {
        // Holes on left, summary on right
        LazyColumn(modifier = Modifier.weight(1f)) {
            items(9) { index ->
                HoleScoreRow(
                    holeNumber = index + 1,
                    par = pars[index],
                    strokes = scores[index]
                )
            }
        }
        
        Divider(modifier = Modifier
            .fillMaxHeight()
            .width(1.dp)
        )
        
        // Fixed summary panel on right
        ScoreSummaryPanel(
            modifier = Modifier
                .width(250.dp)
                .padding(16.dp)
        )
    }
}

Key Principles for Adaptive UI

1. Test on multiple device sizes

Key Principles for Adaptive UI (continued)

1. Test on multiple device sizes
2. Use fillMaxSize(), fillMaxWidth(), weight()

Key Principles for Adaptive UI (continued)

1. Test on multiple device sizes
2. Use fillMaxSize(), fillMaxWidth(), weight()
3. Nest Column/Row appropriately

Key Principles for Adaptive UI (continued)

1. Test on multiple device sizes
2. Use fillMaxSize(), fillMaxWidth(), weight()
3. Nest Column/Row appropriately
4. Use LazyColumn/LazyRow for long lists

Key Principles for Adaptive UI (continued)

1. Test on multiple device sizes
2. Use fillMaxSize(), fillMaxWidth(), weight()
3. Nest Column/Row appropriately
4. Use LazyColumn/LazyRow for long lists
5. Test landscape and portrait orientations

Putting It Together: Complete Themed Scorecard

@Composable
fun App() {
    CharityGolfTrackerTheme {
        val windowWidthClass = 
            calculateWindowSizeClass(
                LocalContext.current
            ).widthSizeClass
        
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Golf Tracker") },
                    colors = TopAppBarDefaults
                        .topAppBarColors(
                            containerColor = 
                                MaterialTheme.colorScheme
                                    .primaryContainer
                        )
                )
            }
        ) { padding ->
            when (windowWidthClass) {
                WindowWidthSizeClass.Compact ->
                    ScorecardPhoneLayout()
                WindowWidthSizeClass.Medium ->
                    ScorecardMediumLayout()
                WindowWidthSizeClass.Expanded ->
                    ScorecardTabletLayout()
            }
        }
    }
}

Summary: Building Professional Apps

Three pillars:

1. State management (ViewModels)
2. Visual design (Material Theme)
3. Responsive layouts (Window Size Classes)

Friday: Implementation Time

• Apply what you've learned to your scorecard
• Add ViewModel for state persistence
• Apply Hope Foundation theme
• Test on multiple screen sizes
• No new lecture—hands-on work session