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.