Material Theme customization in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the Material theme in the activity.

Android Kotlin

setTheme(R.style.[1])

Drag options to blanks, or click blank then click option'

ATheme_MaterialComponents_DayNight

BTheme_AppCompat

CTheme_Holo

DTheme_DeviceDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppCompat or Holo themes which are not Material Components themes.

Forgetting to set the theme before super.onCreate.

The Material Components theme is set using Theme_MaterialComponents_DayNight to enable Material theming.

2fill in blank

medium

Complete the code to apply a custom colorPrimary in the Material theme XML.

Android Kotlin

<color name="[1]">#6200EE</color>

Drag options to blanks, or click blank then click option'

AcolorAccent

BcolorPrimary

CcolorBackground

DcolorSurface

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing colorPrimary with colorAccent or other colors.

Using invalid hex color codes.

colorPrimary defines the main brand color in Material themes.

3fill in blank

hard

Fix the error in the theme XML to correctly inherit from a Material Components theme.

Android Kotlin

<style name="AppTheme" parent="[1]">
    <!-- Customize your theme here. -->
</style>

Drag options to blanks, or click blank then click option'

ATheme.MaterialComponents.Light.DarkActionBar

BTheme.DeviceDefault.Light.DarkActionBar

CTheme.Holo.Light.DarkActionBar

DTheme.AppCompat.Light.DarkActionBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppCompat or Holo themes as parent which breaks Material theming.

Misspelling the theme name.

Material Components themes start with Theme.MaterialComponents to enable Material theming features.

4fill in blank

hard

Fill both blanks to define a custom Material theme color and apply it in colors.xml.

Android Kotlin

<color name="[1]">#03DAC5</color>
<color name="[2]">#018786</color>

Drag options to blanks, or click blank then click option'

AcolorSecondary

BcolorPrimaryVariant

CcolorSecondaryVariant

DcolorPrimary

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing primary and secondary color names.

Using incorrect hex codes for variants.

colorSecondary and colorSecondaryVariant define the secondary colors in Material themes.

5fill in blank

hard

Fill all three blanks to create a theme overlay with a custom font family and apply it in styles.xml.

Android Kotlin

<style name="CustomFontTheme" parent="[1]">
    <item name="fontFamily">@font/[2]</item>
    <item name="textAppearanceHeadline1">@style/[3]</item>
</style>

Drag options to blanks, or click blank then click option'

ATheme.MaterialComponents.DayNight.NoActionBar

Bcustom_font

CTextAppearance.MaterialComponents.Headline1

DTheme.AppCompat.Light.NoActionBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppCompat theme as parent which lacks Material support.

Incorrect font resource name or missing textAppearance style.

Use a MaterialComponents DayNight theme as parent, specify the custom font resource, and apply the Material headline text style.

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