How to specify a dark mode of action with my theme

Question

I know that there are several questions about styling the ActionMode of the action bar, but they are not exactly what I need.

I use a toolbar with a light theme and a dark action bar. The toolbar looks like I want, but the action mode looks like a normal dark theme. What do I need to change in my style to get a dark thematic mode of action (and not just the action bar)? It seems I have to do it quickly by clicking on Theme.AppCompat , as it shows the CAB as I want it, but I don't want the rest of the application to be dark.

I'm only interested in API 14+ and I use the support toolbar instead of the action bar.

Here is my basic 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 (installing popupTheme here seems to have no 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 is my toolbar (this is how I want it)

Here is my ActionMode (which I need to invert)

This is what I want the ActionMode to look like (what I got by changing my style to inherit from Theme.AppCompat instead of Theme.AppCompat.Light.DarkActionBar . The problem is that the rest of the application has darkened, which I don't want.

Answer 1

Start with the overriding attribute actionModeStyle in the 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 the specified text color for the title and subtitles (if necessary).

The overflow button remains. Run any image editing software that supports color swapping. Use the png overflow menu from the AppCompat res/drawable-XXXX folder. Draw it white. Then override actionOverflowButtonStyle in your base theme and specify the just modified png:

 <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 are not many explanations / tutorials that I can provide regarding topic customization. The only way to get this is to go through the [styles] [themes] .xml files from the framework. Reading the source code also helps - you will find out which attributes are used and where / if they can be configured.

Table of contents:

I want to be able to expand the style to get the same behavior that is built into the dark theme.

Yes, but this may not be desirable. The part above regarding changing the overflow menu icon can be replaced with the overridden colorControlNormal attribute. TintManager ( Link ) uses the color value from colorControlNormal to display the overflow popup menu (among other drawings). Take a look at the contents of the TINT_COLOR_CONTROL_NORMAL array in the source code. But overriding colorControlNormal to fix a single drawable can degrade the overall look of the application.

Answer 2

Check out this blog post explaining how to style a toolbar darker:

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 the "style" of the toolbar. What I think you are missing is the theme property with application names, which applies style to the toolbar and all 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> 

Answer 3

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

The colorControlNormal element, which determines the coloring of these buttons in action mode, should be placed in the theme of the action theme , not the action mode style. Only then will it be used to overflow, execute, close and return buttons in action mode.

Answer 4

Try using

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

instead.