androidmaterial-designandroid-stylesmaterial-components-androidandroid-actionmode

How to change inflated toolbar item icon color in Actionmode from App Theme


This is the main theme we use for all our apps:

<resources>
    <!-- Learn more about theming: https://m2.material.io/design/material-theming/implementing-your-theme.html#color -->
    <!-- Base application theme -->
    <style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Custom toolbar style -->
        <item name="toolbarStyle">@style/CustomToolbar</item>
        <!-- Background color for application windows -->
        <item name="android:windowBackground">@color/grey_200</item>
        <!-- Default text color throughout the app -->
        <item name="android:textColor">@color/default_text</item>
        <!-- Color for text/icons over the background -->
        <item name="colorOnBackground">@color/default_text</item>

        <!-- Primary branding color for the app -->
        <item name="colorPrimary">@color/primary</item>
        <!-- Dark variant of the primary color for depth/elevation -->
        <item name="colorPrimaryDark">?colorPrimary</item>
        <!-- Primary color variant for differentiation -->
        <item name="colorPrimaryVariant">?colorPrimary</item>
        <!-- Text/icon color on primary surfaces -->
        <item name="colorOnPrimary">@android:color/white</item>

        <!-- Color used to indicate errors in components -->
        <item name="colorError">@color/red_500</item>
        <!-- Text/icon color on error surfaces -->
        <item name="colorOnError">@android:color/white</item>

        <!-- Accent color for highlighting interactive elements -->
        <item name="colorSecondary">@color/secondary</item>
        <!-- Variant of the secondary color for differentiation -->
        <item name="colorSecondaryVariant">?colorSecondary</item>
        <!-- Text/icon color on secondary surfaces -->
        <item name="colorOnSecondary">@android:color/white</item>

        <!-- Color for component surfaces like cards/menus -->
        <item name="colorSurface">@android:color/white</item>
        <!-- Text/icon color on surface elements -->
        <item name="colorOnSurface">@color/default_text</item>

        <!-- Enable activity transition animations -->
        <item name="android:windowActivityTransitions">true</item>
        <!-- Transition animation for entering activities -->
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <!-- Transition animation for exiting activities -->
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
        <!-- Overlay for the action mode bar -->
        <item name="windowActionModeOverlay">true</item>
    </style>

    <!-- Custom toolbar styling -->
    <style name="CustomToolbar" parent="Widget.MaterialComponents.Toolbar">
        <!-- Toolbar background color -->
        <item name="android:background">?colorPrimary</item>
        <!-- Theme overlay for toolbar icons -->
        <item name="materialThemeOverlay">@style/CustomToolbarThemeOverlay</item>
        <!-- Theme for toolbar pop-up elements -->
        <item name="popupTheme">@style/CustomPopupTheme</item>
    </style>

    <!-- Theme overlay for toolbar -->
    <style name="CustomToolbarThemeOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
        <!-- Icon tint color in the toolbar -->
        <item name="iconTint">@android:color/white</item>
    </style>

    <!-- Pop-up theme for toolbar -->
    <style name="CustomPopupTheme" parent="ThemeOverlay.MaterialComponents.Light">
        <!-- Icon tint color for pop-up items -->
        <item name="tint">?colorPrimary</item>
    </style>
</resources>

This is how we implement the toolbar:

<com.google.android.material.appbar.MaterialToolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp" />

The Theme will set the toolbar icons to white without needing to specify app:iconTint="@android:color/white" for each menu item or drawable individually.

The issue is that when I start the default Android action mode, the inflated menu item icons are black, and I dont want to change the icon color from the drawable itself or the inflated menu items. I want to change it from my theme, which already worked for my toolbar without action mode, but doesn't seem to work for it in action mode.

Current Look

I attempted to apply the action mode styling through my theme, similar to how I styled the toolbar, but this approach did not worked.


Solution

  • You can set the icon tint for the Action Mode by overriding the actionBarTheme attribute in the theme:

    <style name="BaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        ...
    
        <item name="actionBarTheme">@style/CustomActionMode</item>
    </style>
    
    <style name="CustomActionMode" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
        <item name="iconTint">@android:color/white</item>
    </style>