How to use light Action Mode with DarkActionBar?

Question

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.

Have you tried setting `actionModeStyle`? Take a look at the accepted answer here: http://stackoverflow.com/questions/27458421/how-to-customize-the-contextual-action-bar-using-appcompat-in-material-design — Daniel Nugent, Feb 09 '16 at 01:26
Whoops! Forgot to add `actionMenuTextColor` to my `values-v21\styles.xml` override. So, all those attempts at changing the color, only the first one was necessary `@android:color/black`. I didn't need `titleTextStyle` etc. Looks like I would have to package clipart icons into my project though because they are still white on white. Seems like Android would have a more direct solution, but maybe not. — 700 Software, Feb 09 '16 at 03:01
Nice! You should write up an answer with your final configuration. Note, you can find icons for most things here, in both light and dark options: https://design.google.com/icons/ — Daniel Nugent, Feb 09 '16 at 03:11

score 0 · Accepted Answer · edited Nov 17 '17 at 06:01

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!

Thanks. There's a very nice Image Resource from Clipart tool within android Studio, so it wouldn't be that time-consuming. I was just hoping that Android provided a more straight-forward mechanism for this. — 700 Software, Feb 09 '16 at 02:36
Maybe I should focus on changing the Foreground of the regular Action Bar, so I can remove the `.DarkActionBar` option. That way there are only two images to replace (Back, Overflow), not counting my custom icons. (which are already light foreground anyway) — 700 Software, Feb 09 '16 at 02:37
Looks like Roman Nurik has more clipart than Android Studio does. :-) — 700 Software, Feb 09 '16 at 03:19
@GeorgeBailey That is one option or you could use Toolbar only and the tinting options available in styles for that widget — kandroidj, Feb 09 '16 at 04:05

How to use light Action Mode with DarkActionBar?

1 Answers1