androidthemesandroid-actionmode

How to use light Action Mode with DarkActionBar?


This is my theme. I am using DarkActionBar so that the Title, Back Button, and overflow icon are white instead of black.

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

However, when text is selected, the ActionMode / Contextual Action Bar is white text on a 'black' background.

When I remove .DarkActionBar, then the contextual action bar switches to black on light gray, which is much more pleasing for this app. So if I'm going that route I'd need to find a different way to make the main action bar to use white foreground.

How do I get a light background / dark foreground on the ActionMode / Contextual Action Bar while still having a light foreground on my main ActionBar?


Here is what I tried per Daniel's suggestion in the comments:

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="actionModeStyle">@style/MyTheme.ActionMode</item>
    <item name="actionMenuTextColor">@android:color/black</item>
</style>

<style name="MyTheme.ActionMode" parent="Widget.AppCompat.ActionMode">
    <item name="background">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/black</item>
    <item name="android:titleTextStyle">@style/MyTheme.ActionMode.TitleText</item>
    <item name="android:subtitleTextStyle">@style/MyTheme.ActionMode.TitleText</item>
</style>

<style name="MyTheme.ActionMode.TitleText">
    <item name="android:textColor">@android:color/black</item>
</style>

Unfortunately, all I have been able to change is the background. All ActionMode text and icons are still white.

I'm going to use <item name="background">@color/colorPrimary</item> for now. It's better than black background.

Still it seems there would be a way to change the foreground to black allowing me to use Android's typical light-gray background.


Solution

  • I have worked my way to an answer but its very manual:

    It's possible to add all your own graphics for each image in a style for your theme:

    <resources>
    
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
    
            <!-- Override the ActionMode Style -->
            <item name="actionModeStyle">@style/ActionMode</item>
    
            <item name="actionModeCloseDrawable">@drawable/ic_action_navigation_close</item>
    
            <!-- Styles inherited from the Base Theme -->
            <item name="android:actionModeCutDrawable">@drawable/ic_action_content_content_cut</item>
            <item name="android:actionModeCopyDrawable">@drawable/ic_action_content_content_copy</item>
            <item name="android:actionModePasteDrawable">@drawable/ic_action_content_content_paste</item>
            <item name="android:actionModeSelectAllDrawable">@drawable/ic_action_content_select_all</item>
    
        </style>
        <!-- Action Mode -->
        <style name="ActionMode" parent="Widget.AppCompat.ActionMode">
            <item name="background">@android:color/white</item>
            <item name="titleTextStyle">@style/TitleTextStyle</item>
    
        </style>
    
        <!-- Title text of Contextual action bar-->
        <style name="TitleTextStyle">
            <item name="android:textColor">@android:color/darker_gray</item>
            <item name="android:textSize">18sp</item>
        </style>
    
    </resources>
    

    Luckily for us Roman Nurik put together a nice tool to get all the assets we need:

    http://romannurik.github.io/AndroidAssetStudio/icons-actionbar.html#source.space.trim=1&source.space.pad=0&name=ic_action_example&theme=light&color=33b5e5%2C60

    Just use the clip-art option (search for cut, copy, past, select all, & close)

    Good luck and happy coding!