Develop Reference

How to mix styles from different themes in Android?

I am new to Android themes, so this is probably a beginners question but I just can't figure it out.
<style name="MyAppTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
</style>
I want to use the new Material theme, so I used Theme.Material with my own colorPrimary and primaryDark colors to get the action bar the way I want it. But for the context menu (the one that opens when you press the 3-dots icon in the top right corner) I want to use the Theme.Material.Light version. So I want the context menu with black text on a white background instead of white text on a gray background.
How can I do this?

I would advise against using the "Material" theme. It's not supported on older devices. However if you use AppCompat then it will achieve the same effect but with backwards compatibility.
If you create a new Activity using the template it will work as you want. Nevertheless, this is the code:
<!--Application-->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="popupTheme">#style/NewAppTheme.PopupOverlay</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

Add this theme to your Toolbar:
app:popupTheme="#style/myStyle"
Define backgroundcolor and textColor in your custom theme for the pop-up menu:
<style name="myStyle" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">yourBackgroundColor</item>
<item name="android:textColor"yourTextcolor></item>
</style>
If you are using ActionBar then use ActionBar Generator and use the generated files in your res folder.
Hope this helps.

How to specify dark action mode with my theme

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.

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.

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>

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.

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

Theming Android ActionBar: Change TabBar Background

I followed this Guide to style my ActionBar. I use fixed tabs in my app so I want to theme the tabs too.
(Note: I'm using the appcompat theme to ensure some backwards compatibility)
So I used
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
<item name="android:actionBarStyle">#style/CustomActionBar</item>
<item name="actionBarStyle">#style/CustomActionBar</item>
<item name="android:actionBarTabStyle">#style/CustomActionBarTabs</item>
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
as my theme.
I set the ActionBar background without problems, but then I tried theming the tabs with:
<style
name="CustomActionBarTabs"
parent="#style/Widget.AppCompat.ActionBar.TabView" >
<item name="android:background">#drawable/customtheme_actionbar_tab_indicator</item>
<item name="background">#drawable/customtheme_actionbar_tab_indicator</item>
</style>
The background points to a StateList where I set different drawables for different contexts, which works kind of as expected. Except it works just for the tabs. Not for the ActionBar.
The separator and the background of the tab bar is not themed.
How can I theme those ? (The grey part)
Theme Creation Guidelines
I wonder if there are any guidelines for creating a theme that looks good ?
(good = similar to default theme, so the app fits into the android ecosystem)
Because If you look closely at the default themes you can see a small line at the bottom of the ActionBar drawable. (The part which is light green in my theme)
There may be other things which you should consider when creating a theme that looks similar to the default themes, so it would be nice to some guideline.
Also: Should the TabBar always be darker than the ActionBar ?
(If so, how much darker?)
How much brighter/darker than the ActionBar color should the image color (like the color of the overflow button in the image) be ?
Thanks in advance,
Uriel

Add this
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
.
.
.
<item name="android:actionBarTabBarStyle">#style/TabBar</item>
</style>
And then
<style name="TabBar" parent="#style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:background">/** Whatever color you want, like #ffff00 **/</item>
</style>

Just incase, it may help somebody
This below worked for me
<style name="Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Theme.MyActionBarTab</item>
<item name="actionBarTabTextStyle">#style/Theme.MyActionBarTabText</item>
</style>
<style name="Theme.MyActionBarTab" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#color/gray_mask</item>
</style>
<style name="Theme.MyActionBarTabText" parent="Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textColor">#color/black</item>
<item name="android:textSize">#dimen/size_28</item>
<item name="android:gravity">center</item>
<item name="textAllCaps">false</item>
</style>

ActionBarSherlock Change Text Color of Overflow Action Items

I'm working on an android app and I am using ActionBarSherlock for compatibility. Everything works great so far, except the fact that I want to change the text color of the overflow menu items.
Here's the way they currently look:
Now, the reason for this is that I am usign Holo.Light.DarkActionBar as the Base theme since that way the icons are white, the text is white on the ActionBar's Title and SubTitle, and some other things.
To my knowledge, and per this question, I should be able to simply change the following:
<!-- For Values -->
<style name="Theme.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<!-- For Values-v14 -->
<style name="Theme.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
And the SpinnerItemStyle is:
<style name="SpinnerItemStyle" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:textColor">#android:color/black</item>
</style>
Now, that doesn't seem to be working, so I added
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
To the children theme too:
<style name="ActionBar.Solid.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Widget.Sherlock.Light.ActionBar.Solid.Inverse">
It's still a no-go.
The Answer I referenced stated that i should make sure that I am using the correct adapter layout, but in reality, I am not inflating any code myself manually, it's the regular onCreateOptionsMenu implementation.
Any ideas on what could I change to make the text black? And you should know that changing actionMenuTextColor is for items hosted on the action bar itself, and doesn't change the overflow menu items
EDIT As per Matthias' answer, I tried the following style:
<style name="TextAppearance.Styled.Widget.PopupMenu.Large" parent="TextAppearance.Sherlock.Widget.PopupMenu.Large">
<item name="android:textColor">#android:color/black</item>
</style>
and used it on the main theme:
<style name="Theme.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="textAppearanceLargePopupMenu">#style/TextAppearance.Styled.Widget.PopupMenu.Large</item>
</style>
But the text is still non-visible.

<style name="AppTheme" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:textAppearanceLargePopupMenu">
#style/TextAppearance.Styled.Widget.PopupMenu.Large</item>
</style>
<style name="TextAppearance.Styled.Widget.PopupMenu.Large"
parent="TextAppearance.Sherlock.Widget.PopupMenu.Large">
<item name="android:textColor">?attr/textColorPrimaryInverse</item>
</style>

Styling ActionBar dropdown menu

I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.
I've been able to change the background to white using:
<style name="MyTheme" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
<item name="android:background">#drawable/spinner_background_white</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_whyite</item>
<item name="android:dropDownSelector">#drawable/selectable_background_white</item>
</style>
But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.

I answer myself after some investigation.
In addition to question's styling you need to:
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
Then final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio

Try setting itemTextAppearance. That should achieve what you want.

I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.
<style name="ApplicationTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
</style>

My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.
I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:
<item name="android:actionMenuTextColor">#color/White</item>
<item name="actionMenuTextColor">#color/White</item>
<item name="android:homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">#drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">#drawable/abs__list_divider_holo_dark</item>
That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.