How do i fix this? The issue is simple, when the app is open the styling is fine. However, when i pull up the multitasking menu, the action bar does not retain its styling (mainly color) and appears the color of the parent theme.
You are using Lolipop maybe.
You can set color when you pull up the multitasking menu.
Add this in your app style (style.xml)
<item name="colorPrimary">yourColor</item>
<item name="colorAccent">AccentColor</item>
<item name="colorPrimaryDark">DarkColor</item>
Example :
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/favorite_color</item>
<item name="colorAccent">#color/favorite_color</item>
<item name="colorPrimaryDark">#color/favorite_dark_color</item>
<item name="android:actionBarStyle">#style/Widget.ActionBar</item>
<item name="actionBarStyle">#style/Widget.ActionBar</item>
</style>
I have my style defined as follows:
<style name="actionBarTheme" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/button_style</item>
<item name="android:titleTextStyle">#style/actionBarTitleText</item>
</style>
And the actionBar is actually of the color defined in button_style (correctly working in other parts of the code). The problem is that the items are not working correctly (the background color is too light).
Any idea on how to solve this? Thanks
EDIT:
In the picture there is the touch-feedback that I have now. The button_style has another touch effect (a darker one) since this is almost invisible.
You can have this affect with actionButtonStyle
<style name="appTheme">
<item name="android:actionBarStyle">#style/actionBarTheme</item>
<item name="android:actionButtonStyle">#style/actionButtonTheme</item>
</style>
and then place your button style as the background of that.
<style name="actionButtonTheme">
<item name="android:background">#drawable/button_style</item>
</style>
You will still need to set the background of your action bar but this only needs to be a colour or drawable image as that is all that will actually be used.
My app's theme looks like shown in the following screenshot:
As the theme is based on Theme.Holo.Light which contains dark action bar texts and overflow icon, I adjusted the overflow icon using the following style:
<style name="ActionBar.Light" parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">#color/highlight</item>
<item name="android:titleTextStyle">#style/TextAppearance.ActionBar.Title.Light</item>
<item name="android:subtitleTextStyle">#style/TextAppearance.ActionBar.Subtitle.Light</item>
</style>
...
<style name="Theme.Light" parent="#android:style/Theme.Holo.Light">
...
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<item name="android:actionOverflowButtonStyle">#android:style/Widget.Holo.ActionButton.Overflow</item>
...
</style>
When one or more list entries are checked I want to show a white contextual action bar, but unfortunately the white overflow icon isn't visible on the white background:
Any idea on how to change the overflow icon only for the contextual bar -- either via style or programatically?
Final Workaround (February 27 2014)
It seems as there isn't an option to change the overflow icon of the contextual action bar independent from the one of the standard action bar. So I had no other choice but changing the background color of the contextual bar to a dark gray, to make the white overflow button visible:
The icons on the right are under my control, so it was easy to change them. The "done" icon on the left and the text (check counter) can easily be changed using theme attributes. Only the thin separator between the "done" icon and the check counter cannot be changed using attributes. They would require a custom layout -- that's why I left it how it is for now.
Here's my contextual bar style and the relevant part from the theme:
<style name="TextAppearance.ActionBar.Title" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="TextAppearance.ActionBar.Title.Light">
<item name="android:textColor">#ffffff</item>
</style>
<style name="ContextualBar.Light" parent="android:style/Widget.Holo.ActionMode">
<item name="android:background">#666666</item>
<item name="android:titleTextStyle">#style/TextAppearance.ActionBar.Title.Light</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="Theme.Light" parent="#android:style/Theme.Holo.Light">
...
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<item name="android:actionModeStyle">#style/ContextualBar.Light</item>
<item name="android:actionModeCloseDrawable">#drawable/ic_action_done</item>
<item name="android:actionOverflowButtonStyle">#android:style/Widget.Holo.ActionButton.Overflow</item>
<item name="android:actionMenuTextColor">#ffffff</item>
...
</style>
Ads: You can see the full result in the final app "uPod" which is available at Google play!
On your theme and assuming your using Appcompat
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:actionOverflowButtonStyle">#style/OverFlowStyle</item>
</style>
<style name="OverFlowStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/your_selector_drawable_here</item>
</style>
I would like custom background & text color for my overflow menu. It works fine with devices without hardware menu button, but I'm not able to style devices with hardware menu button. See the screenshots:
I'm using these styles:
<style name="Theme.settleup" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:popupMenuStyle">#style/settleup_PopupMenu</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
<style name="settleup_PopupMenu" parent="#style/Widget.Sherlock.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_settleup</item>
</style>
I've looked into the problem. And there seems to be no way in changing textColor for the options menu for Android >= 4.0 devices with HW menu key. Not even changing primary, secondary or tertiary colors affected the text color.
The only "solution" that comes to my mind now is some pretty nasty use of java reflection API.
However, you can set the background of the bottom options menu of Android >= 4.0 HW key devices separately from the background of the non-HW key dropdown menu.
You already has the styling for non-HW key dropdown menu. The non-HW key dropdown menu is defined by android:popupMenuStyle (and popupMenuStyle):
<style name="Theme.settleup" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:popupMenuStyle">#style/settleup_PopupMenu</item>
</style>
But the background of the Android >= 4.0 HW key bottom options menu is defined with android:panelBackground item in the theme:
<style name="Theme.settleup" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:panelBackground">#drawable/mybackground</item>
</style>
Since it seems to be a problem to change the text color for bottom options menu on Android >= 4.0 HW key devices, I would suggest to leave this part to its default styling.
Been digging in the AppCompat theming but whatever I tried the textColor remains white. What I do now is just popup the Toolbar menu manually like this:
#Override
public boolean onKeyUp(int keycode, KeyEvent e) {
switch (keycode) {
case KeyEvent.KEYCODE_MENU:
if ( getSupportActionBar() != null ) {
getSupportActionBar().openOptionsMenu();
return true;
}
}
return super.onKeyUp(keycode, e);
}
Pressing the menu button while the menu is open magically closes it.
Who needs the ugly black bottom aligned menu anyway?
You can apply styles and Themes in Overflow MenuItem as per below. OverFlow Menu is ListView so, we can apply theme as per listview.
Apply below code in styles.xml
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/PopupMenuListView</item>
<item name="android:actionBarWidgetTheme">#style/PopupMenuTextView</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:listPreferredItemHeightSmall">40dp</item>
</style>
<!-- Change Overflow Menu ListView Divider Property -->
<style name="PopupMenuListView" parent="#android:style/Widget.Holo.ListView.DropDown">
<item name="android:divider">#color/app_navigation_divider</item>
<item name="android:dividerHeight">1sp</item>
<item name="android:listSelector">#drawable/list_selector</item>
</style>
<!-- Change Overflow Menu ListView Text Size and Text Size -->
<style name="PopupMenuTextView" parent="#android:style/Widget.Holo.Light.TextView">
<item name="android:textColor">#color/app_white</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">18sp</item>
<item name="android:drawablePadding">25dp</item>
<item name="android:drawableRight">#drawable/navigation_arrow_selector</item>
</style>
<!-- Change Overflow Menu Background -->
<style name="PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_overflow_bg</item>
</style>
For AppCompat theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="actionBarPopupTheme">#style/HardwareOptionMenu</item>
</style>
<style name="HardwareOptionMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorSecondary">#color/white</item>
<item name="android:colorBackground">#color/black</item>
</style>
try also adding the items without android prefix
<style name="Theme.settleup" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:popupMenuStyle">#style/settleup_PopupMenu</item>
<item name="popupMenuStyle">#style/settleup_PopupMenu</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="settleup_PopupMenu" parent="#style/Widget.Sherlock.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_settleup</item>
<item name="popupBackground">#drawable/menu_dropdown_panel_settleup</item>
</style>
what you can do if you really have to change the text color of the menu from the right picture could be the following "hack":
SpannableStringBuilder text = new SpannableStringBuilder();
text.append("MenuItem1");
text.setSpan(new ForegroundColorSpan(Color.WHITE), 0, text.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
menu.add(Menu.NONE, MENU_ITEM_1, Menu.NONE, null).setTitle(text);
I agree it's not the cleanest way (I would say it's quite ugly because you have to pay attention in each activity where you have such a menu and the title of each menu item needs to be changed using this logic) but it's something that displays the expected result.
Let me know if it helped you.
Cheers!
I'm struggling with styling the ActionBar. My app has an ActionBar with three tabs. I'm trying to get the selected tab to have a background color, and the unselected tabs to show a different color. I'm following this reference: Customizing Action Bar. But all the TABs are showing the Selected color.
My styles.xml file is as follows:
<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/tab_background</item>
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
<style name="MyActionBarTabBarStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/red</item>
</style>
<style name="AppTheme.Light" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/MyActionBarTabBarStyle</item>
</style>
tab_background is just a 9 patch. I'm also not sure if I'm inheriting the action bar tab from the correct parent (parent="android:style/Widget.Holo.Light.ActionBar.TabBar). I've looked through the references & find it very difficult to understand the style hierarchy
Why wont my tabs show selected or no? Thanks in advance for your assistance.
I solved my problem. I didn't use State List Drawables initially. I used the background image directly instead of going via the StateListDrawable. Using StateListDrawable, you can set a different background based on whether the tag is selected or not.
So I added the file tab_background_select.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/tab_background" />
</selector>
and I referenced this from my styles.xml:
<item name="android:background">#drawable/tab_background_select</item>