Develop Reference

Material design: Where to place elevation in android styles?

I want to set item elevation in some of my app's styles. Now elevation is only 21 and higher with no support library, so my natural inclination was to just create a styles-v21 xml and place it in there:
<style name="Widget.MyApp.Drawer" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:elevation">4dp</item>
</style>
The problem with this is any changes I make to Widget.MyApp.Drawer in the regular styles.xml file will be overwritten by this completely. What I'd want is for elevation to just be tacked on to the bottom of the list of style changes I made for the v21 version of this style listed in styles.xml.
So I took to creating base styles which the style I use in the views inherits from:
<style name="BaseListElement">
<item name="android:background">#drawable/listitem_background</item>
<item name="android:layout_height">#dimen/list_item_height</item>
</style>
<style name="BaseListElement.ListItem">
</style>
I leave the style blank in styles.xml, and in styles-v21, I add elevation and it works.
However this get's kind of tricky when I want to use some advanced styles:
<style name="BaseListElement">
<item name="android:background">#drawable/listitem_background</item>
<item name="android:layout_height">#dimen/list_item_height</item>
</style>
<style name="BaseListElement.BaseItem">
<item name="android:padding">#dimen/list_item_padding</item>
</style>
<style name="Widget.MyApp.ListItem" parent="#style/BaseListElement.BaseItem">
</style>
<style name="BaseListElement.BaseHeader">
</style>
In this case, BaseItem is just one style that inherits from BaseListElement, styles such as BaseHeader inherit from it as well. This is getting kind of ridiculous as you can see.
Am I overthinking this? The way I see it I have 3 choices here:
1) Continue as is and feel like an idiot
2) On the BaseListElement level, create a child style with some goofy name which is the point at which I apply the elevation, which would then (hopefully) trickle down to all the children. As soon as I have a difference between v21 children of the base however, this wouldn't work.
3) Just throw android:elevation into the styles.xml file (don't use a v21 file) and place an ignore flag on the element. I only have 5.0 devices here, so I can't easily test at the moment if this will cause a crash on older versions.
Any thoughts?

To accomplish something like this you could just create a BaseListElement.BaseItem in both styles.xml and syles-v21.xml the first one without the elevation and the second one with it. Then just extend Widget.MyApp.ListItem from BaseListElement.BaseItem which should get updated in v21 to use the elevation.
styles.xml
<style name="BaseListElement.BaseItem">
</style>
<style name="Widget.MyApp.ListItem" parent="#style/BaseListElement.BaseItem">
</style>
styles-v21.xml
<style name="BaseListElement.BaseItem">
<item name="android:padding">#dimen/list_item_padding</item>
</style>
Method 3 you can safely implement as follows:
<item name="android:elevation" tools:ignore="NewApi">4dp</item>

Styling the popup menu in Android 5.0

I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
</resources>
(The ActionBar color is being set programmatically.)
Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:
I have tried setting the popupMenuStyle but it didn't work.
How can I make the popup menu darker?

Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.
It actually mentions your use case at Dark Action Bar and provides this code:
<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" />

Not a full answer but what I found so far:
In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)
Apparently, now that is a color. To modify it you need to do specify the following theme:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:actionBarPopupTheme">#style/popupNew</item>
</style>
<style name="popupNew" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#color/red</item>
</style>
</resources>
This works correctly if the theme applied to the app is just this.
If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.

Solved my problem by using this style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
<item name="actionModeBackground">#color/actionmode_bg</item>
</style>
<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
<item name="elevation">2dp</item>
<item name="displayOptions">homeAsUp|showTitle</item>
<!--showHome-->
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
</style>
I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle

Add the property popupTheme to your toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:theme="#style/Theme.AppCompat.Light"
app:popupTheme="#style/Theme.AppCompat" />
Or define a new style for your toolbar:
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/Theme.AppCompat.Light</item>
<item name="theme">#style/Theme.AppCompat</item>
</style>

This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.
First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:
<style name="Theme.MyTheme" parent="#style/Base.Theme.AppCompat.Light.DarkActionBar">
...other stuff here
<item name="actionBarPopupTheme">#style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>
<style name="Theme.MyTheme.ActionBarPopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#android:color/black</item>
</style>
Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):
Open your App's style.xml in Android Studio
On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in #style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.
Within this style I saw this line:
< item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light< /item>
This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor
Android developers documentation and found "Reference to a theme that should be used to
inflate popups shown by widgets in the action bar". So this was worth playing with.
I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.
In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.

Any easy way to change Android Action Bar "selected" color?

I'm able to change a lot of colors through using the Android style documentation from here and looking at the source here and here.
Using what I learned above, I was able to change the ActionBar.TabBar, ActionBar.TabText, and ActionBar.TabView, but I don't know what that little highlight is called. Searching for a holo blue in the android source code from above also didn't help.
I still don't know if there is any way in styles.xml to specify that "blue" highlight color to be changed.
EDIT:
I know that I can use the the action bar style generator, but I'm looking at if I can set the color of it in code (whether it be java or xml). I would not like to have to generate a new drawable for this purpose.

The easiest way You can have is to use Android Action Bar Style Generator to easily theme your action bar and tabs.
You can also refer ActionBar Documents for a customized ActionBar.Something like
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- other activity and action bar styles here -->
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/ab_background</item>
<item name="android:backgroundStacked">#drawable/ab_background</item>
<item name="android:backgroundSplit">#drawable/ab_split_background</item>
</style>
</resources>
Alternatively you can try ActionBarSherlock.There is one sample available in the library named "Style ActionBar".Using this you can change ActionBar tabs underline color.
I also see a useful link in a comment to your question.You are good to go after referring all these links.
Hope this helps.

Light.DarkActionBar menu item text colour unchangeable?

The application I've been developing uses ActionBarSherlock, and the main theme inherits from Theme.Sherlock.Light.DarkActionBar. The design requires that the overflow menu popups have a dark coloured background and white text. This works fine for devices without a physical menu button, and the text appears white as intended. However, if the device DOES have a physical menu button, the text shown in the menu displayed remains black.
My main theme contains
<item name="android:panelBackground">#drawable/menu_hardkey_panel</item>
...Where #drawable/menu_hardkey_panel is a dark coloured 9patch.
The resulting appearance of the menu popup is...
I'm unable to determine why this is happening, or how to manually change the colour of the text. In my main theme, I've tried all of the following...
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="android:textAppearanceLargePopupMenu">#style/MyMenuTextAppearance.Large</item>
<item name="android:textAppearanceSmallPopupMenu">#style/MyMenuTextAppearance.Small</item>
I've even tried
<item name="android:actionBarWidgetTheme">#style/Theme.MyApp.Dark</item>
...Where Theme.MyApp.Dark is...
<style name="Theme.MyApp.Dark" parent="#style/Theme.Sherlock">
<item name="android:dropDownListViewStyle">#style/DropDownListView</item>
<item name="dropDownListViewStyle">#style/DropDownListView</item>
</style>
None have let me change the text to white. If I make my base theme inherit from Theme.Sherlock, the problem is solved and the text is white, but unfortunately that's not an option.

Not entirely sure about this, but I believe the pop-up menu uses the same styling as the overflow menu. In which case you'd just do something like this.
<item name="android:itemTextAppearance">#style/your_new_text_appearance</item>
<style name="your_new_text_appearance">
<item name="android:textColor">#android:color/white</item>
</style>

Giving it a chance: there is a text appearance called actionMenuTextAppearance. Have you tried that?
Update: I did some more digging and I believe that this file is the layout And there they refer to textAppearanceListItemSmall and textAppearanceSmall. However, it takes this value from a special theme which is specified as following in Theme.Holo.Light
<item name="panelMenuListTheme">#android:style/Theme.Holo.Light.CompactMenu</item>
And like this in Theme.Holo:
<item name="panelMenuListTheme">#android:style/Theme.Holo.CompactMenu</item>
The problems comes from the fact that the parent of Sherlock.__Theme.DarkActionBar is Theme.Sherlock.Light. This is not valid for the dark action bar. Taking the line from Theme.Holo should do the trick.

In my research I haven't found a way to change the text color, but you can at least handle hardkey menus gracefully.
This link provided me with a passable solution to the problem:
https://github.com/jgilfelt/android-actionbarstylegenerator/issues/30
Commenting out the "android:panelBackground" item from my generated theme allowed the text to at least be visible on hardkey menus, even if it doesn't perfectly match the theme.
You could also try replacing the "menu_hardkey_panel_whatever.9.png" drawable with something that will work for your theme and the black text.

For me this solves the problem, try this instead:
<style name="MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">
...
<item name="actionBarWidgetTheme">#null</item>
<item name="android:actionBarWidgetTheme">#null</item>
...
</style>

I found the solution, use:
getSupportActionBarContext()
e.g.
ArrayAdapter<CharSequence> list =
ArrayAdapter.createFromResource(getSupportActionBarContext(), R.array.navigation, layout.simple_spinner_item);
list.setDropDownViewResource(layout.simple_spinner_dropdown_item);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
getSupportActionBar().setListNavigationCallbacks(list, this);

I think that due to the fact that Theme.Sherlock.Light.DarkActionBar don't style its contents right is due to the actionWidgetTheme attribute is used with a ContextThemeWrapper for inflating the action bar views (Jake Wharton's own words), thus something like the following (not tested) will be needed to fulfill your needs, though breaking your need of not using Theme.Sherlock as parent in one way:
<style name="MyColorTheme" parent="Theme.Sherlock">
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="YourMainTheme" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="android:actionMenuTextAppearance">#style/MyColorTheme</item>
<item name="actionMenuTextAppearance">#style/MyColorTheme</item>
</style>
Might work or not work. That's the question :)

Change the line color used in listSeparatorTextViewStyle

I have the following code
<TextView
android:text="#string/hello"
style="?android:attr/listSeparatorTextViewStyle" />
and I will get the following effect.
However, I am not happy with the color line. I would like to have something like
I would like it to have blue color line as in holo. I try the following custom style.
<style name="MyOwnListSeperatorTextViewStyle">
<item name="android:background">#android:drawable/list_section_divider_holo_light</item>
<item name="android:textAllCaps">true</item>
<!-- Copy from Widget.TextView.ListSeparator -->
<item name="android:background">#android:drawable/dark_header_dither</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?textColorSecondary</item>
<item name="android:textSize">14sp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingLeft">8dip</item>
</style>
But it won't work, as I get the following error.
error: Error: Resource is not public. (at 'android:background' with value '#android:drawable/dark_header_dither').
Have idea how can I change the line color used in listSeparatorTextViewStyle?

I needed to do this to override the typical Holo Spinner style (I didn't want the underlined item - i just wanted the arrow), and I think this can be overridden in precisely the same manner:
First off, you want to find the item you wish to override in the android styles source. There is an incredibly useful SO answer that contains all of the styles (and the names to override them) right here: Set Dialog theme to parent Theme in Android
I believe yours is the following line:
<item name="listSeparatorTextViewStyle">#android:style/Widget.Holo.Light.TextView.ListSeparator</item>
This takes us on a journey to find the style Widget.Holo.Light.TextView.ListSeparator which should live somewhere on your very own computer! But I'll make it easy and just c&p it:
<style name="Widget.Holo.Light.TextView.ListSeparator" parent="Widget.TextView.ListSeparator">
<item name="android:background">#android:drawable/list_section_divider_holo_light</item>
</style>
Now, you probably want to leave well enough alone, and just look at that background drawable. You will find it is a grey 9patch file that looks like the sinister grey line you seek to avoid.
We need to override this. I am sure there are a number of ways to do this, but I do so by customizing the theme of the application. Here is the themes.xml file:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light.NoActionBar">
<item name="android:listSeparatorTextViewStyle">#style/MyOwnListSeperatorTextViewStyle</item>
</style>
<style name="MyOwnListSeperatorTextViewStyle" parent="Widget.TextView.ListSeparator">
<item name="android:background">#drawable/make_your_own_blue_9_patch_here</item>
</style>
Notice how we used the listSeparatorTextViewStyle from that previous SO post? And the parent of the custom style is the Widget.TextView.ListSeparator from android's style source? All very important.
Now you just need to apply this theme to your app, but I am assuming you have a theme already. If you haven't already, you will need to make your own 9patch but I would just look at the list_section_divider_holo_light.9.png file on your computer, and make the grey parts blue, and then make a copy and place it into your own drawables folder.
Hope this works and is helpful!