Mastering Android Themes: Inheriting from AppCompat & MaterialComponents

When developing Android applications using Kotlin and XML, it’s common to inherit from platform themes like AppCompat or Material Components. This approach allows you to create a consistent look and feel that aligns with modern Android design guidelines. However, understanding the proper way to inherit and customize these themes is crucial for avoiding common pitfalls. This post will cover how to inherit from platform themes effectively, providing clear code samples and explanations.

Why Inherit from Platform Themes?

• Consistency: Ensures your app looks and feels consistent with the Android ecosystem.
• Up-to-date Design: Provides modern design elements, leveraging the latest features and improvements.
• Reduced Development Effort: Reduces the need to define every design aspect from scratch.
• AppCompat Compatibility: Enables backward compatibility with older Android versions.

Inheriting from AppCompat or MaterialComponents

Step 1: Set Up Your Project

First, ensure that your project includes the necessary dependencies in your build.gradle file. For Material Components, you need the following:

dependencies {
    implementation("com.google.android.material:material:$material_version")
    implementation("androidx.appcompat:appcompat:$appcompat_version")

    // Optional: To get access to EdgeToEdge API insets, etc.
    implementation("androidx.core:core-ktx:1.13.0-alpha02")
}

Make sure to define the versions for $material_version and $appcompat_version.

Step 2: Update the Theme Definition in styles.xml

Next, modify your styles.xml file to inherit from either AppCompat or MaterialComponents.

<resources>
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Customize your theme attributes here. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize the font family. -->
        <item name="fontFamily">@font/your_custom_font</item>
    </style>
</resources>

In this example:

• Theme.MyApp is your custom theme name.
• parent="Theme.MaterialComponents.DayNight.NoActionBar" specifies that your theme inherits from Material Components. The DayNight variant allows for automatic light/dark theme switching based on system settings. The NoActionBar suffix removes the default action bar.
• We customize colorPrimary, colorPrimaryVariant, colorSecondary, statusBarColor, and fontFamily to match our app’s branding.

You can choose different parent themes based on your specific needs:

• Theme.MaterialComponents.DayNight: Includes the action bar.
• Theme.MaterialComponents.Light: A light theme with the action bar.
• Theme.MaterialComponents.Light.NoActionBar: A light theme without the action bar.
• Theme.AppCompat.DayNight or Theme.AppCompat.Light: AppCompat themes are alternatives that also provide a consistent look.

Step 3: Apply the Theme to Your Application

In your AndroidManifest.xml file, apply the custom theme to your application or specific activities.

<application
    android:name=".YourApplicationClass"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.MyApp">
    <activity
        android:name=".MainActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

The line android:theme="@style/Theme.MyApp" applies the custom theme defined in styles.xml to your application.

Customizing Theme Attributes

You can override attributes defined in the parent theme to customize your app’s appearance. Here are a few common examples:

Changing Primary and Secondary Colors

Override colorPrimary, colorPrimaryVariant, and colorSecondary to define your app’s color scheme.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/my_primary_color</item>
    <item name="colorPrimaryVariant">@color/my_primary_variant</item>
    <item name="colorSecondary">@color/my_secondary_color</item>
</style>

Customizing Text Appearance

Override textAppearanceHeadline6 or other text appearance attributes to define custom text styles.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="textAppearanceHeadline6">@style/TextAppearance.MyApp.Headline6</item>
</style>

<style name="TextAppearance.MyApp.Headline6" parent="TextAppearance.MaterialComponents.Headline6">
    <item name="android:textSize">20sp</item>
    <item name="android:textColor">@color/my_text_color</item>
</style>

Customizing Buttons

Customize button styles by overriding the materialButtonStyle attribute.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="materialButtonStyle">@style/Widget.App.Button</item>
</style>

<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/my_button_color</item>
    <item name="android:textColor">@color/my_button_text_color</item>
</style>

Best Practices and Common Pitfalls

• Consistent Naming: Use consistent and descriptive names for your theme and style attributes.
• Avoid Hardcoding: Don’t hardcode colors or dimensions directly in XML layouts. Use theme attributes instead.
• Understand Theme Overlays: Theme overlays can be used to change specific attributes in certain contexts (e.g., within a particular activity).
• Check Compatibility: Ensure your chosen themes and styles are compatible with your minimum SDK version.
• Use Color Resources: Always define colors in colors.xml rather than using raw hex values directly in styles.
• Avoid Mixing Styles: Don’t mix styles from AppCompat and MaterialComponents unless you know what you are doing. This can lead to unexpected results.

Example: Dark Theme Implementation

To implement a dark theme, define a separate theme in styles.xml that inherits from a dark Material Components theme.

<style name="Theme.MyApp.Dark" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/dark_primary_color</item>
    <item name="colorPrimaryVariant">@color/dark_primary_variant</item>
    <item name="colorOnPrimary">@color/dark_on_primary_color</item>
    <item name="colorSecondary">@color/dark_secondary_color</item>
    <item name="colorSecondaryVariant">@color/dark_secondary_variant</item>
    <item name="colorOnSecondary">@color/dark_on_secondary_color</item>
    <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
</style>

To switch themes dynamically in your app:

import androidx.appcompat.app.AppCompatDelegate

fun switchTheme(isDarkMode: Boolean) {
    if (isDarkMode) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
    } else {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
    }
}

Conclusion

Inheriting from platform themes such as AppCompat and MaterialComponents is a fundamental aspect of modern Android development. By properly setting up and customizing these themes, you can ensure your app is consistent, up-to-date, and visually appealing. Remember to avoid hardcoding values, maintain a clear naming convention, and always test your theme on various devices and Android versions. With the guidance and code samples provided, you’ll be well-equipped to create stunning Android applications that adhere to modern design standards.