Material Theme customization in Android Kotlin - Mini App: Build & Ship

Build: CustomThemeScreen

This screen demonstrates how to customize the Material Theme colors and typography in an Android app using Kotlin. It shows a simple UI with a title, a button, and a text field styled with the custom theme.

Target UI

-------------------------
| Custom Theme Screen   |
|-----------------------|
| Title (Large Text)    |
|                       |
| [ Text Input Field ]  |
|                       |
| [ Custom Button ]     |
|                       |
-------------------------

Create a custom Material Theme with a primary color of teal_700 and secondary color of amber_500.

Customize typography to use a larger font size for the title text.

Apply the custom theme to the screen.

Add a TextField with hint text 'Enter your name'.

Add a Button labeled 'Submit' styled with the primary color.

Starter Code

Android Kotlin

package com.example.materialthemecustomization

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class CustomThemeScreen : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // TODO: Apply custom Material Theme here
            Surface(modifier = Modifier.padding(16.dp)) {
                CustomThemeContent()
            }
        }
    }
}

@Composable
fun CustomThemeContent() {
    var name by remember { mutableStateOf("") }
    Column {
        Text(text = "Title", style = MaterialTheme.typography.headlineMedium)
        // TODO: Add TextField with hint
        // TODO: Add Button labeled 'Submit'
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.materialthemecustomization

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

private val CustomLightColors = lightColorScheme(
    primary = Color(0xFF00796B), // teal_700
    secondary = Color(0xFFFFC107) // amber_500
)

private val CustomTypography = androidx.compose.material3.Typography(
    headlineMedium = TextStyle(
        fontSize = 28.sp,
        fontWeight = FontWeight.Bold
    )
)

class CustomThemeScreen : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = CustomLightColors,
                typography = CustomTypography
            ) {
                Surface(modifier = Modifier.padding(16.dp)) {
                    CustomThemeContent()
                }
            }
        }
    }
}

@Composable
fun CustomThemeContent() {
    var name by remember { mutableStateOf("") }
    Column {
        Text(text = "Title", style = MaterialTheme.typography.headlineMedium)
        TextField(
            value = name,
            onValueChange = { name = it },
            placeholder = { Text(text = "Enter your name") },
            modifier = Modifier.padding(top = 16.dp, bottom = 16.dp)
        )
        Button(onClick = { /* Handle submit */ }) {
            Text(text = "Submit")
        }
    }
}

We created a custom color scheme with teal_700 as primary and amber_500 as secondary colors using lightColorScheme. We customized the typography by increasing the font size and weight of the headlineMedium style for the title text. The MaterialTheme composable applies these custom colors and typography to all child components. The TextField uses a placeholder to show the hint text. The Button uses the primary color automatically from the theme. This setup shows how to customize and apply a Material Theme in a simple screen.

Final Result

Completed Screen

-------------------------
| Custom Theme Screen   |
|-----------------------|
| Title                 |
|                       |
| [ Enter your name    ]|
|                       |
| [ Submit ]            |
|                       |
-------------------------

User can tap the text field and type their name.

User can tap the Submit button (currently no action).

Stretch Goal

Add dark mode support to the custom Material Theme.

💡 Hint

Define a darkColorScheme with appropriate colors and switch themes based on system setting using isSystemInDarkTheme() in Compose.