Material Theme customization in Android Kotlin - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of customizing the Material Theme in Android?

Customizing the Material Theme lets you change colors, typography, and shapes to match your app's unique style and branding.

beginner

Which XML file is commonly used to define custom Material Theme colors in Android?

The colors.xml file inside the res/values folder is used to define custom colors for the Material Theme.

intermediate

How do you apply a custom Material Theme to your Android app?

You create a custom style in themes.xml that inherits from a Material Theme, then set it as the app theme in AndroidManifest.xml.

intermediate

What is the role of Theme.Material3.DayNight in Material Theme customization?

It provides a base theme that supports both light and dark modes automatically, making it easier to customize for different appearances.

intermediate

Name two ways to customize typography in a Material Theme.

You can customize typography by defining a typography style in themes.xml or by creating a custom TextAppearance style.

Which file do you edit to change the primary color in a Material Theme?

A strings.xml

B colors.xml

C AndroidManifest.xml

D build.gradle

The primary color is defined in colors.xml as a color resource used by the theme.

What is the base theme to inherit from for Material 3 customization?

A Theme.Material.Light

B Theme.AppCompat.Light

C Theme.Holo.Light

D Theme.Material3.DayNight

Theme.Material3.DayNight is the recommended base for Material 3 with light and dark mode support.

How do you apply your custom theme to the entire app?

A Set it in the activity's onCreate method

B Add it to colors.xml

C Set it in AndroidManifest.xml under application tag

D Call setTheme() in every fragment

The app theme is set in AndroidManifest.xml inside the tag using android:theme attribute.

Which XML file defines the shape appearance for Material Theme components?

A themes.xml

B dimens.xml

C shapes.xml

D styles.xml

Shape appearances are defined inside themes.xml as part of the Material Theme customization.

What benefit does using Theme.Material3.DayNight provide?

A Supports both light and dark modes automatically

B Supports only light mode

C Supports only dark mode

D Disables theme customization

It automatically switches between light and dark modes based on system settings.

Explain how to customize the primary and secondary colors in a Material Theme for an Android app.

Think about where colors are defined and how the theme uses them.

Describe the steps to enable dark mode support using Material Theme customization.

Consider the base theme and how colors adapt to dark mode.

Practice

1. What is the main purpose of customizing the MaterialTheme in an Android app?

easy

A. To add new activities to the app

B. To change the app's colors, fonts, and shapes globally

C. To manage app permissions

D. To handle network requests

Solution

1. Step 1: Understand MaterialTheme role

   The MaterialTheme controls the look and feel of the app by setting colors, typography, and shapes.

2. Step 2: Identify customization purpose

   Customizing MaterialTheme changes these visual styles globally for consistency.

3. Final Answer:

   To change the app's colors, fonts, and shapes globally -> Option B

4. Quick Check:

   MaterialTheme customization = change colors, fonts, shapes [OK]

Hint: MaterialTheme controls app-wide style settings [OK]

Common Mistakes:

• Confusing theme customization with adding app features
• Thinking it manages app permissions
• Assuming it handles network or data logic

2. Which of the following is the correct way to apply a custom color scheme in MaterialTheme in Kotlin?

easy

A. MaterialTheme(colorScheme = myColors) { /* UI content */ }

B. MaterialTheme(colors = myColors) { /* UI content */ }

C. MaterialTheme(setColors = myColors) { /* UI content */ }

D. MaterialTheme(applyColors = myColors) { /* UI content */ }

Solution

1. Step 1: Recall MaterialTheme parameters

   The correct parameter for colors in MaterialTheme is colorScheme.

2. Step 2: Match correct syntax

   MaterialTheme(colorScheme = myColors) { /* UI content */ } uses colorScheme = myColors, which is the correct syntax in Kotlin.

3. Final Answer:

   MaterialTheme(colorScheme = myColors) { /* UI content */ } -> Option A

4. Quick Check:

   Use colorScheme parameter for colors [OK]

Hint: Use colorScheme, not colors, in MaterialTheme [OK]

Common Mistakes:

• Using 'colors' instead of 'colorScheme'
• Using non-existent parameters like 'setColors' or 'applyColors'
• Forgetting to wrap UI content inside the theme block

3. Given the code snippet below, what color will the Text component display if primary in colorScheme is set to Color.Red?

MaterialTheme(
  colorScheme = ColorScheme(
    primary = Color.Red,
    secondary = Color.Blue
  )
) {
  Text("Hello", color = MaterialTheme.colorScheme.primary)
}

medium

A. Blue

B. Green

C. Red

D. Default text color

Solution

1. Step 1: Identify colorScheme primary value

   The primary color in colorScheme is set to Color.Red.

2. Step 2: Check Text color usage

   The Text color uses MaterialTheme.colorScheme.primary, so it will be Color.Red.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   Text color = primary color = Red [OK]

Hint: Text color uses primary from colorScheme [OK]

Common Mistakes:

• Confusing primary with secondary color
• Assuming default color instead of theme color
• Mixing up color names

4. What is wrong with the following Kotlin code that tries to customize the MaterialTheme's typography?

MaterialTheme(
  typography = Typography(
    bodyLarge = TextStyle(fontSize = 20)
  )
) {
  Text("Welcome")
}

medium

A. TextStyle requires a unit for fontSize, like sp or dp

B. Typography cannot be customized in MaterialTheme

C. Text component must specify typography explicitly

D. MaterialTheme must not have a typography parameter

Solution

1. Step 1: Check TextStyle fontSize usage

   The fontSize must include a unit like 20.sp, not just 20.

2. Step 2: Identify correct syntax

   Without the unit, the code will cause a type error because fontSize expects a TextUnit.

3. Final Answer:

   TextStyle requires a unit for fontSize, like sp or dp -> Option A

4. Quick Check:

   fontSize needs unit like sp [OK]

Hint: Always add .sp for fontSize values [OK]

Common Mistakes:

• Omitting units for fontSize
• Thinking typography can't be customized
• Expecting Text to need explicit typography parameter

5. You want to create a custom shape for buttons in your app using MaterialTheme. Which approach correctly applies a rounded corner shape of 16.dp to all buttons?

hard

A. MaterialTheme(shapes = Shapes(extraLarge = RoundedCornerShape(16.dp))) { Button(...) }

B. MaterialTheme(shapes = Shapes(small = RoundedCornerShape(16.dp))) { Button(...) }

C. MaterialTheme(shapes = Shapes(large = RoundedCornerShape(16.dp))) { Button(...) }

D. MaterialTheme(shapes = Shapes(medium = RoundedCornerShape(16.dp))) { Button(...) }

Solution

1. Step 1: Understand shape categories in MaterialTheme

   MaterialTheme defines shapes as small, medium, and large. Buttons use the medium shape by default.

2. Step 2: Apply rounded corners to medium shape

   Setting medium = RoundedCornerShape(16.dp) customizes button corners.

3. Final Answer:

   MaterialTheme(shapes = Shapes(medium = RoundedCornerShape(16.dp))) { Button(...) } -> Option D

4. Quick Check:

   Buttons use medium shape slot [OK]

Hint: Buttons use medium shape in MaterialTheme [OK]

Common Mistakes:

• Changing small or large shapes instead of medium
• Using non-existent shape categories like extraLarge
• Forgetting to wrap Button inside MaterialTheme