How to change action mode color in Android?

To change the action mode (Contextual Action Bar or CAB) color in Android, you primarily modify your app's theme by editing the res/values/styles.xml file, setting specific attributes like actionModeBackground and actionModeStyle. This allows you to customize its background, text, and icon colors.

Understanding Action Mode Styling

Action Mode, often referred to as the Contextual Action Bar (CAB), is a temporary action bar that appears at the top of the screen when a user selects items or performs an action that requires a contextual menu. While related to the regular ActionBar, its styling is handled through specific theme attributes to provide a distinct user experience.

Step-by-Step Guide to Customizing Action Mode Colors

Customizing the action mode color involves defining or modifying your app's theme in styles.xml and specifying the desired color and style attributes.

1. Navigate to res/values/styles.xml

This is the primary location for defining your application's visual themes and styles. You will find or create this file within your Android project's app/src/main/res/values directory.

2. Edit Your App's Main Theme

Within your main application theme (e.g., AppTheme or Theme.MaterialComponents.Light.NoActionBar), you will add or modify specific XML attributes to control the action mode's appearance. While general action bar styling can influence some elements, direct action mode customization requires specific attributes.

3. Insert the Necessary Code

Below is an example of the XML code you would add to your styles.xml file to define a custom action mode background and style.

<!-- res/values/themes.xml or res/values/styles.xml -->
<resources>
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <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 your theme here. -->

        <!-- Action Mode Styling -->
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/custom_action_mode_background</item>
        <item name="actionModeStyle">@style/Widget.MyApp.ActionMode</item>

        <!-- For older Android versions or AppCompat compatibility -->
        <item name="android:actionModeBackground">@color/custom_action_mode_background</item>
        <item name="android:actionModeStyle">@style/Widget.MyApp.ActionMode</item>
    </style>

    <!-- Style for the Action Mode (Contextual Action Bar) -->
    <style name="Widget.MyApp.ActionMode" parent="@style/Widget.AppCompat.ActionMode">
        <item name="background">@color/custom_action_mode_background</item>
        <item name="android:background">@color/custom_action_mode_background</item>
        <item name="titleTextStyle">@style/ActionModeTitleTextStyle</item>
        <item name="subtitleTextStyle">@style/ActionModeSubtitleTextStyle</item>
        <item name="android:textColorPrimary">@color/action_mode_text_color</item>
        <item name="actionMenuTextColor">@color/action_mode_text_color</item>
        <!-- For action icons tint -->
        <item name="actionButtonStyle">@style/ActionModeButton</item>
    </style>

    <!-- Custom style for Action Mode title text -->
    <style name="ActionModeTitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionMode.Title">
        <item name="android:textColor">@color/action_mode_text_color</item>
        <item name="android:textSize">18sp</item>
    </style>

    <!-- Custom style for Action Mode subtitle text -->
    <style name="ActionModeSubtitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionMode.Subtitle">
        <item name="android:textColor">@color/action_mode_text_color</item>
        <item name="android:textSize">14sp</item>
    </style>

    <!-- Custom style for Action Mode buttons (icons) -->
    <style name="ActionModeButton" parent="@style/Widget.AppCompat.ActionButton">
        <item name="android:tint">@color/action_mode_icon_color</item>
    </style>

</resources>

And define your colors in res/values/colors.xml:

<!-- res/values/colors.xml -->
<resources>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="white">#FFFFFFFF</color>
    <color name="black">#FF000000</color>

    <!-- Custom Action Mode Colors -->
    <color name="custom_action_mode_background">#FF00796B</color> <!-- A deep teal -->
    <color name="action_mode_text_color">#FFFFFF</color>         <!-- White text -->
    <color name="action_mode_icon_color">#FFFFFF</color>         <!-- White icons -->
</resources>

4. Apply the Theme

Ensure that the theme you've modified (e.g., Theme.MyApp) is applied to your application or specific activities in your AndroidManifest.xml file:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp"
    ...>
    <!-- Your activities -->
</application>

Explanation of Key Attributes

Attribute Name	Description
windowActionModeOverlay	Set to true to make the action mode overlay the activity's content rather than push it down. This prevents layout shifts when the CAB appears.
actionModeBackground	Specifies the drawable or color for the background of the Contextual Action Bar. This is the primary attribute for changing the background color.
actionModeStyle	References a custom style resource (@style/Widget.MyApp.ActionMode in the example) that allows for more granular control over the CAB's appearance, including text, subtitle, and action button styles.
android:textColorPrimary	Within the actionModeStyle (or a sub-style for title/subtitle), this sets the default primary text color for the action mode's title.
actionMenuTextColor	Also within actionModeStyle, this sets the color for action items (menu text) displayed in the action mode.
android:tint	Applied to actionButtonStyle, this can be used to tint the action icons (e.g., the close button, overflow menu icon, etc.) in the action mode.
titleTextStyle	Within actionModeStyle, references a style for the action mode's title text (e.g., "1 selected").
subtitleTextStyle	Within actionModeStyle, references a style for the action mode's subtitle text (e.g., "Delete items?").

Customizing Action Mode Text and Icon Colors

The actionModeStyle attribute is crucial for refining the appearance of text and icons within the Contextual Action Bar. By defining a custom style for actionModeStyle, you can then set specific text and tint colors.

• Title and Subtitle Text: Use titleTextStyle and subtitleTextStyle within your Widget.MyApp.ActionMode style to point to separate styles where you can define android:textColor, android:textSize, and other text attributes.
• Action Menu Text: The actionMenuTextColor attribute within Widget.MyApp.ActionMode will set the color for any text-based actions (though most actions are typically icons).
• Action Icons: To change the color of icons (like the "Done" checkmark or other menu item icons), you can apply a tint attribute within an actionButtonStyle that you apply to your Widget.MyApp.ActionMode.

Best Practices

• Use Theme Attributes: Always prefer defining colors and styles in your themes and styles.xml rather than hardcoding them in layouts or programmatically, for consistency and easier maintenance.
• Maintain Consistency: Ensure your action mode colors complement your app's overall branding and other UI elements for a cohesive user experience.
• Test Across Versions: Test your custom styles on different Android versions and device types to ensure they render as expected, as some attributes might behave slightly differently.