How to specify dark action mode with my theme

Question

I know there are a couple of questions about styling the contextual action bar (ActionMode) piece of the action bar, but they don't quite seem to address what I'm after.

I'm using the Toolbar with a light theme and dark action bar. The Toolbar looks like I want it, but the action mode looks like the regular dark theme. What do I need to change in my style to get the dark themed action mode (not just action bar)? It seems I should be able to do this quickly by tapping into Theme.AppCompat since that shows the CAB how I want it, but I don't want the rest of the application to be dark.

I'm only concerned about API 14+ and am using the support Toolbar in place of action bar.

Here is my base style

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:actionModeBackground">@color/colorActionMode</item>
    <item name="android:windowActionModeOverlay">true</item>
</style>

Toolbar style

<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item>
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item>
    <item name="android:textColorSecondary">@color/abc_primary_text_material_dark</item>
    <item name="android:background">@color/colorPrimaryDark</item>
</style>

Toolbar layout file (setting popupTheme here doesn't seem to have any effect).

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:theme="@style/AppTheme.Toolbar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    android:elevation="2dp"
    android:focusable="false"/>

Here's my Toolbar (which is how I want it)

Here's my ActionMode (which I need to invert)

Here's what I want the ActionMode to look like (which I got by changing my style to inherit from Theme.AppCompat instead of Theme.AppCompat.Light.DarkActionBar. The problem being that the rest of the application goes dark, which I don't want.

Adscription

Answer 1

Start with overriding attribute actionModeStyle in your base theme:

<item name="actionModeStyle">@style/LStyled.ActionMode</item>

Define LStyled.ActionMode as:

<style name="LStyled.ActionMode" parent="@style/Widget.AppCompat.ActionMode">
    <item name="titleTextStyle">@style/LStyled.ActionMode.Title</item>
    <item name="subtitleTextStyle">@style/LStyled.ActionMode.Subtitle</item>
</style>

Finally:

<style name="LStyled.ActionMode.Title" parent="@style/TextAppearance.AppCompat.Widget.ActionMode.Title">
    <item name="android:textColor">@color/color_action_mode_text</item>
</style>

<style name="LStyled.ActionMode.Subtitle" parent="@style/TextAppearance.AppCompat.Widget.ActionMode.Subtitle">
    <item name="android:textColor">@color/color_action_mode_text</item>
</style>

This will override theme specified text color(s) for title & subtitle(if needed).

What's left is the overflow button. Fire up any image editing software that supports color-replacement. Use the overflow menu png from AppCompat's res/drawable-XXXX folder. Paint it white. Next, override actionOverflowButtonStyle in your base theme and specify the png you've just modified:

<item name="actionOverflowButtonStyle">@style/LStyled.OverFlow</item>

<style name="LStyled.OverFlow" parent="@style/Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/modified_overflow_icon</item>
</style>

There's not much of an explanation/tutorial that I can provide regarding customization of themes. The only way to get a hang of it is to go through [styles][themes].xml files from the framework. Reading the source code also helps - you'll get to know what attributes are being used and where/if they can be customized.

Point of mention:

I want to be able to extend a style to get the same behavior that's built into the dark theme.

Yes, but this might not be desired. The part above that deals with modifying overflow menu icon can be substituted with an overridden colorControlNormal attribute. TintManager (Link) uses the color value from colorControlNormal to tint the overflow menu drawable (among other drawables). Take a look at the contents of array TINT_COLOR_CONTROL_NORMAL in the source code. But overriding colorControlNormal to fix one drawable may change the overall look & feel of the app for worse.

Passkey

Thanks for the answer, but I'm looking for a way to extend the built in style. I know I can replace the overflow icon (and the home as up icon) in the action mode, but I was hoping to avoid doing that and just use the built in style. – Adscription

@Adscription I only know of this 'workaround'. I'll update my answer (and leave a comment) if I do find something elegant. But, I did research before posting the answer. It seems what you're looking for isn't supported by the system (yet?). – Passkey

The answer you gave here is basically what I did before I asked the question here (I also had to modify the "home as up" icon. I was hoping I could get the system to do all that as well as adding RTL support and so on, but I haven't figured out how either. Thanks for your thoughts though. – Adscription

Answer 2

Check out this blog post which explains how to style the Toolbar to be dark:

http://android-developers.blogspot.ie/2014/10/appcompat-v21-material-design-for-pre.html

<android.support.v7.widget.Toolbar
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”@dimen/triple_height_toolbar”
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

You specify a Toolbar "style". What I think you're missing is the app namespaced "theme" property which applies the style to the Toolbar and all of its children.

Edit: This should work for your specific case

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:actionModeBackground">@color/colorActionMode</item>
    <item name="android:windowActionModeOverlay">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item>
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item>
    <item name="android:textColorSecondary">@color/abc_primary_text_material_dark</item>
    <item name="android:background">@color/colorPrimaryDark</item>
</style>

Prado

I've already themed the toolbar, and I'll add my toolbar declaration to the question. Setting the popupTheme doesn't seem to have any effect. I've tried app.popupTheme as well as android:popupTheme. – Adscription

I have the same setup and my app theme inherits from Theme.AppCompat.Light.NoActionBar and my Toolbar theme inherits from ThemeOverlay.AppCompat.Dark.ActionBar as specified in my answer. – Prado

Unfortunately, those styles are essentially the same as what I already have. Theme.AppCompat.Light.NoActionBar only adds things I already had in the style and the Dark.ActionBar theme for the Toolbar doesn't change anything. When I tried what you have there I get the same result I originally had. – Adscription

Yeah I get your point on NoActionBar, but ThemeOverlay.AppCompat.Dark.ActionBar should really be the key here. Just checking you noticed it starts with ThemeOverlay and not just Theme right? ha – Prado

Yeah, I copied and pasted what you had there. It seems to me that the ActionMode part and the Toolbar are completely separate. The Toolbar looks great because of ThemeOverlay.AppCompat.Dark.ActionBar, but it doesn't seem to carry over when it flips to the ActionMode. – Adscription

Answer 3

I just want to add to Vikram's answer, specific to coloring the overflow button and other default controls in the action mode.

The 'colorControlNormal' item that defines the coloring of these buttons in the action mode has to be placed in the action bar theme, not the action mode style. Only then will it be used for overflows, done, close and back buttons within the action mode.

Solicitor

Answer 4

Try to use

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

instead.

Anthonyanthophore