Change ActionBar OverflowMenu Background color - android

Ive added a lot of properties to change to background color of the overflow menu, none seem to work.
Here are a few links i've refered (other than SO questions):
http://blog.stylingandroid.com/archives/1267
http://android-developers.blogspot.in/2011/04/customizing-action-bar.html
res>values>
style.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme.Light"></style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
</style>
<style name="MyPopupMenu" parent="#android:style/Widget.Holo.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#28bda9</item>
<item name="android:titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#28bda9</item>
</style>
<!-- style the items within the overflow menu -->
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">#28bda9</item>
</style>
<!-- style the list navigation -->
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#28bda9</item>
<item name="android:popupBackground">#28bda9</item>
<item name="android:dropDownSelector">#28bda9</item>
</style>
</resources>
Edit: I have changed the code to match the solution. This was the error:
<style name="MyPopupMenu" parent="#android:style/Widget.Holo.ListPopupWindow">
<item name="android:popupBackground">**#28bda9**</item>
</style>

You're on the right track, but the popupBackground is not merely a color.
You have to change the drawable.
Below is the default drawable for Holo Light (usually called menu_dropdown_panel).
Change the color using your favorite image editor, and put it your drawable-x folder.
The needed style will be as follows:
<style name="AppTheme" parent="AppBaseTheme">
...
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
</style>
<style name="MyPopupMenu" parent="#android:style/Widget.Holo.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel</item>
</style>

Related

Strange behavior of styles (Themes) in Android

I got this styles for my Android app:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/background_new</item>
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:textColorHint">#color/colorAccentHint</item>
<!-- Customize your theme here. -->
</style>
<style name="MyToolBar" parent="Widget.AppCompat.ActionBar">
<!-- Support library compatibility -->
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:textColorSecondary">#color/colorAccent</item>
<item name="colorControlNormal">#color/colorAccent</item>
</style>
<!-- Custom searchView may be used or not-->
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Gets rid of the search icon -->
<item name="searchIcon">#null</item>
<!-- Gets rid of the "underline" in the text -->
<item name="queryBackground">#null</item>
<!-- Gets rid of the search icon when the SearchView is expanded -->
<item name="searchHintIcon">#null</item>
<!-- The hint text that appears when the user has not typed anything -->
<!--<item name="closeIcon">#null</item> -->
</style>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">#style/MyCustomTabText</item>
</style>
<style name="MyCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="NavDrawerTextStyle" parent="Base.TextAppearance.AppCompat">
<item name="android:textSize">12sp</item>
</style>
<style name="MyCheckBox" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/colorPrimaryTransparent</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:background">#color/background1</item>
<item name="android:buttonStyle">#style/MyApp.BorderlessButton</item>
</style>
<style name="MyApp.BorderlessButton" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:textSize">12sp</item>
</style>
<style name="MyRadioButton" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
Normally i have transparent background on Toolbar of NavigationDrawler menu items click.
But sometimes theme in my app changes to Holo theme , and i can figure it out when its happens , so when i press menu items in Toolbar or in NavigationDrawler their background become blue, like in Holo theme
Where i have mistake and why its happens?
Can you publish your Android Manifest ? Maybe some activities override the base application style ?

Android : changing background for overflow menu in actionbar

I am trying to change the white background of overflow menu in action bar
I tried to assign a drawable that was generated using http://jgilfelt.github.io/android-actionbarstylegenerator/
I have defined the theme as below. But its not working and background is still white
Android 4.4.2
<style name="BoxTheme" parent="android:Theme.Holo.Light">
<!-- API 14 theme customizations can go here. -->
<item name="android:actionBarStyle">#style/BoxActionBar</item>
</style>
<style name="BoxActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/img_actionbar</item>
<item name="android:titleTextStyle">#style/colour.Text</item>
<item name="android:subtitleTextStyle">#style/colour.Text</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>
<style name="colour.Text" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/white</item>
</style>
<style name="SpinnerColor" parent="android:style/Widget.Spinner">
<item name="android:dropDownSelector">#color/white</item>
</style>
<style name="PopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel</item>
</style>
Try this,
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
<item name="android:panelBackground">#android:color/holo_green_light</item>
<item name="android:actionBarWidgetTheme">#style/AppTheme</item>
</style>
<style name ="MyPopupMenu" parent="android:Theme.Holo.Light">
<item name="android:popupBackground">#android:color/holo_green_light</item>
</style>
And it could look like this

Change color of menu font on ActionBar

I wish to change the color of the menu font:
<!-- Base application theme. -->
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/dark_gray</item>
<item name="android:color">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
but the menu font color is still black. What item should I add/remove?
Try this instead
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
</style>
Use this Style
<style name="MyTheme" parent="Theme.Sherlock.ForceOverflow">
<item name="android:actionBarWidgetTheme">#style/MyActionWidgetTheme</item>
<item name="actionBarWidgetTheme">#style/MyActionWidgetTheme</item>
</style>
<style name="MyActionWidgetTheme" parent="Widget">
<item name="android:textColor">#f00</item>
</style>

Android styles: how to change colors in styles.xml

I want to change some colors of android UI elements. But I would prefer to set a default tint color, which applies to all UI elements. I am not sure if this is possible.
If not, I want to set the "tint"-color of some UI elements, as shown below. Can anybody enlighten me?
EDIT
Based on what Entreco suggested:
My styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:textColorPrimary">#color/brown</item>
<item name="android:textColorSecondary">#color/brown</item>
<item name="android:textColorTertiary">#color/brown</item>
<item name="android:textColorPrimaryInverse">#color/brown</item>
<item name="android:textColorSecondaryInverse">#color/brown</item>
<item name="android:textColorTertiaryInverse">#color/brown</item>
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="android:subtitleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="android:background">#color/brown</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="subtitleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="background">#color/brown</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/brown_light</item>
<item name="android:textSize">24sp</item>
</style>
</resources>
And my values-v21/styles.xml:
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/blue</item>
<item name="android:colorPrimaryDark">#color/blue</item>
<!-- <item name="android:colorAccent">#color/white</item> -->
</style>
</resources>
And in my Manifest:
<application android:theme="#style/AppTheme.Base" >
...
</application>
But the primary color is still the same...???
Starting from Lollipop this is straight-forward thanks to the colorPrimary attribute:
file values/styles.xml:
<!-- Base application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
</style>
file values-v21/styles.xml:
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/white</item>
</style>
Basically, you can define a color pallete for your app, and I believe for your case your want to set the colorPrimary (unverified).
More info on Material colors

Overflow Menu Items Text

I went through enough samples and tried many combinations for entire two days, i have missed to grasp something. please correct me...
I Want to change the Color of Menu items Text present in overflow menu.
Thank you
my style file
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBarTheme</item>
<item name="android:popupMenuStyle">#style/PopupMenuTheme</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="android:actionOverflowButtonStyle">#style/MenuButtonTheme</item>
</style>
<!-- action bar -->
<style name="ActionBarTheme" parent="#android:Widget.Holo.Light.ActionBar">
<item name="android:background">#color/SmugeBlue</item>
<item name="android:titleTextStyle">#style/ActionBarTitle</item>
</style>
<!-- action bar title -->
<style name="ActionBarTitle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse">
<item name="android:textColor">#android:color/white</item>
</style>
<!-- pop up menu background color -->
<style name="PopupMenuTheme" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#color/SmugeBlue</item>
<item name="android:textStyle">#style/MenuText</item>
</style>
<style name="MenuText">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="MenuButtonTheme" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/overflow_menu_button</item>
</style>
</resources>
---- updating with solution i found handy for my case
<style name="overflow_menu_text_color">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
....
<item name="android:itemTextAppearance">#style/overflow_menu_text_color</item>
.....
</style>

Categories

Resources