Material Theme customization in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does changing the primary color affect the app UI?

You customize the Material Theme by changing the primary color in your theme XML. What visible effect will this have on your app's UI?

A Only the background color of the app changes, other elements remain the same.

B The app icon changes color to match the primary color.

C The color of the app bar and interactive elements like buttons will change to the new primary color.

D The text color in all TextViews changes to the primary color automatically.

💡 Hint

Think about which UI parts use the primary color by default in Material Design.

The primary color in Material Theme is used for the app bar background and interactive elements like buttons and switches. Changing it updates these colors.

📝 Syntax

intermediate

Which XML snippet correctly sets a custom secondary color in Material Theme?

You want to set a custom secondary color in your theme XML file. Which snippet is correct?

Android Kotlin

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- Your code here -->
</style>

A <item name="colorSecondary">#FF5722</item>

B <item name="colorSecondaryVariant">#FF5722</item>

C <item name="secondaryColor">#FF5722</item>

D <item name="colorSecondaryContainer">#FF5722</item>

💡 Hint

In Material 3, the secondary color attribute is colorSecondary.

In Material3 themes, colorSecondary defines the secondary color used for UI elements like outlined buttons and accents. colorSecondaryContainer is for secondary container backgrounds, and colorSecondaryVariant is from older Material2 themes.

❓ lifecycle

advanced

When should you apply Material Theme customizations in your Android app lifecycle?

At what point in your Android app lifecycle should you apply Material Theme customizations to ensure they affect all UI components?

A In the Application class's onCreate() method only.

B After setContentView() in the Activity's onCreate() method.

C Inside the onResume() method of the Activity.

D Before setContentView() in the Activity's onCreate() method.

💡 Hint

Think about when the UI is inflated and how themes affect it.

Material Theme customizations must be applied before setContentView() so that the inflated UI components use the theme styles.

🧠 Conceptual

advanced

What is the role of color roles like primary, secondary, and tertiary in Material Theme?

Why does Material Theme define color roles such as primary, secondary, and tertiary instead of just using fixed colors everywhere?

A To provide a consistent color system that adapts to light/dark modes and accessibility needs.

B To allow developers to use any random colors without restrictions.

C To force all apps to use the same colors regardless of branding.

D To reduce the number of colors used in the app to only three.

💡 Hint

Think about why design systems use roles instead of fixed colors.

Color roles help maintain consistency, support dynamic theming like dark mode, and improve accessibility by adapting colors appropriately.

🔧 Debug

expert

Why does your custom Material Theme color not apply to the app bar?

You set a custom primary color in your theme XML, but the app bar still shows the default color. What is the most likely cause?

Android Kotlin

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">#6200EE</item>
</style>

A The colorPrimary attribute is misspelled and ignored by the system.

B You are using a NoActionBar theme but still have an app bar, so the colorPrimary is ignored.

C You need to set colorPrimaryVariant instead of colorPrimary for the app bar.

D The app bar color is controlled by colorSecondary, not colorPrimary.

💡 Hint

Check if your theme supports the app bar you are using.

A NoActionBar theme means the system does not provide an app bar. If you add a Toolbar manually, you must set its color explicitly or use a theme that supports an app bar.

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