Material Theme customization in Android Kotlin

Introduction

Material Theme customization lets you change colors, fonts, and shapes in your app. This helps your app look unique and match your brand.

You want your app to have your brand colors instead of default colors.

You want to change the font style to make text easier to read or more fun.

You want buttons and cards to have rounded corners or different shapes.

You want to create a dark mode with different colors.

You want consistent style across all screens in your app.

Syntax

Android Kotlin

val colors = lightColorScheme(
    primary = Color(0xFF6200EE),
    secondary = Color(0xFF03DAC6),
    background = Color(0xFFFFFFFF)
)

MaterialTheme(
    colorScheme = colors,
    typography = Typography(),
    shapes = Shapes(),
    content = { /* Your UI here */ }
)

Use lightColorScheme or darkColorScheme to define colors.

Pass your custom colors, typography, and shapes to MaterialTheme.

Examples

This example changes the main colors of the app.

Android Kotlin

val customColors = lightColorScheme(
    primary = Color(0xFFBB86FC),
    secondary = Color(0xFF03DAC5),
    background = Color(0xFFF0EAE2)
)

MaterialTheme(colorScheme = customColors) {
    Text("Hello with custom colors")
}

This example changes the shape of buttons and cards to have rounded corners.

Android Kotlin

val customShapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(16.dp),
    large = RoundedCornerShape(0.dp)
)

MaterialTheme(shapes = customShapes) {
    Button(onClick = {}) {
        Text("Rounded Button")
    }
}

Sample App

This app uses a custom color scheme and shapes. The background is light gray, the title text is purple, and the button has rounded corners.

Android Kotlin

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun CustomThemeApp() {
    val customColors = lightColorScheme(
        primary = Color(0xFF6200EE),
        secondary = Color(0xFF03DAC6),
        background = Color(0xFFF0F0F0)
    )

    val customShapes = Shapes(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(24.dp),
        large = RoundedCornerShape(0.dp)
    )

    MaterialTheme(
        colorScheme = customColors,
        shapes = customShapes
    ) {
        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
            Column(
                modifier = Modifier.padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Text("Welcome to Custom Theme!", style = MaterialTheme.typography.headlineMedium, color = MaterialTheme.colorScheme.primary)
                Button(onClick = {}, shape = MaterialTheme.shapes.medium) {
                    Text("Click Me")
                }
            }
        }
    }
}

Important Notes

Always define colors for both light and dark themes for better user experience.

Use MaterialTheme to wrap your UI so all components use your custom styles.

Shapes affect buttons, cards, and other surfaces. Adjust them to match your design.

Summary

Material Theme customization changes colors, fonts, and shapes in your app.

Use colorScheme, typography, and shapes to customize.

Wrap your UI in MaterialTheme to apply your custom styles everywhere.