change android toolbar popup menu theme from dark to light - android

I am using the appcompat v22 toolbar widget
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
I want a light themed popup menu ( white background with black text ) Problem is the popup menu is always turning out be dark themed (looks like it is picking the styles from ThemeOverlay.AppCompat.Dark.ActionBar and setting android:popupTheme="#style/ThemeOverlay.AppCompat. Light" is not making any difference.
The problem occurred when I moved from app:theme to android:theme ( that's what is recommended if we need to use appcompat v22 version
I tried overriding the style and setting many values within the style
<style name="ToolBarPopUpTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#ffffff</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textColorPrimary">#ffffff</item>
<item name="android:colorForeground">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="android:windowBackground">#ffffff</item>
</style>
But in vain, any idea how to get a light themed Popup menu in the ActionBar ?
Thanks,

You want to go back to app:popupTheme.
If you look at the source code for Toolbar.java you'll see the following on line 263.
setPopupTheme(a.getResourceId(R.styleable.Toolbar_popupTheme, 0));
R in this case is android.support.v7.appcompat.R (check out line 32), so the Toolbar is using the app: namespace for its attributes and not the android: namespace.
Out of curiosity, where did you read that you should be using the android:theme attribute?

As far as i see you are using the wrong parent style.
Give this a try:
<style name="ToolBarPopUpTheme" parent="#style/ThemeOverlay.AppCompat.Light" />

Related

android appcompat style for toolbar to match actionbar

I am using the android support library ToolBar and would like to use the same background color to match the ActionBar.
I looked in the support library souce code and found the ActionBar style I want to use:
<style name="Base.Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">?attr/colorPrimary</item>
<item name="backgroundStacked">?attr/colorPrimary</item>
<item name="backgroundSplit">?attr/colorPrimary</item>
</style>
But when I put it in my layout as a style to the toolbar, it doesn't work:
<android.support.v7.widget.Toolbar
android:id="#+id/actiontoolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Light.ActionBar.Solid"
/>
However, if I just use "android:background" instead of "style" then it works:
android:background="?attr/colorPrimary"
Does anyone know why it doesn't work when I reference the support library style in the toolbar layout. I am using appcompat 22.2.0 in AndroidStudio.
I've also tried the following and they don't work either:
android:theme="#style/Base.Widget.AppCompat.Light.ActionBar.Solid"
app:theme="#style/Base.Widget.AppCompat.Light.ActionBar.Solid"
It is because the toolbar requires a theme. Firstly define your color attributes in a theme with appcompat parent.
<style name="MyTheme" parent="Theme.AppCompat">
<item name="background">#color/colorPrimary</item>
<item name="backgroundStacked">#color/colorPrimary</item>
<item name="backgroundSplit">#color/colorPrimary</item>
</style>
Just to make sure, make use of color values.
In toolbar
app:theme="#style/MyTheme"
Also, make sure you have
xmlns:app="http://schemas.android.com/apk/res-auto"
IDE may ask you to auto correct this
The final look of your toolbar will be
<android.support.v7.widget.Toolbar
android:id="#+id/actiontoolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:theme="#style/MyTheme"
/>
And as for an update from Gabriele: With appcompat 22.1.0 you can use
android:theme

Android menu background black with Theme.AppCompat?

For some reason in my application, when using "Theme.AppCompat" as my style, it makes my Menus black text (which I set since I want black text) on a dark grey background, as shown here:
I have tried manually setting the menu's background color using a few online resources but none seem to be working. Does anyone know what might be causing the issue? Below is my style.xml, and as you can see, the two bottom elements in the main app theme entry are me trying to change the background color using things I've found online.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowBackground">#color/white_primary</item>
<item name="android:textColor">#color/text_primary</item>
<item name="android:textSize">#dimen/text_size_medium</item>
<item name="colorAccent">#color/black_primary</item>
<item name="android:popupMenuStyle">#style/PopupMenuStyle</item>
<item name="android:panelFullBackground">#drawable/menu_full_bg</item>
</style>
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:popupBackground">#android:color/white</item>
</style>
<drawable name="menu_full_bg">#FFFFFF</drawable>
You can change the background color of the popup menu as below.
Create a style in your styles.xml
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:background">#android:color/white</item>
</style>
Set this theme as your toolbar popup theme in your toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
// Your code here
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenuStyle" />
Hope this helps.
You can just use appNS to define the popupTheme as shown below.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
What I did was I change my popUpTheme to DayNight so use
app:popupTheme="#style/ThemeOverlay.AppCompat.DayNight">
Refer this link
The accepted answer here worked for me. I am just repeating the same answer here again.
Add the following to your Toolbar xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/toolbarbackground"
android:elevation="4dp"
app:popupTheme="#style/YOUR_THEME_HERE"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
In your styles.xml:
<style name="YOUR_THEME_HERE" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#000000</item>
<item name="android:textColor">#ffffff</item>
</style>
The above style gives white font on a black background.
Credit to #Eugen Pechanec
I discourage this line:
<item name="android:background">#android:color/white</item>
as on my device the menu popup animation behaved rather ugly. Instead it was sufficient to just use this:
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
</style>
I tried to add this into Toolbar:
app:popupTheme="#style/Theme.AppCompat.Light"
BUT at the Night mode the background will be white, and the text white too.
(this will helpful in only Day mode, or your app does not follow Day/Night switch)
Another tried, I add this style for menu popup, as Pojaa said above:
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:background">#android:color/white</item>
</style>
BUT this create an effect: when you click the menu, it show the white background of popup menu first (the white background), and then show up the items, this very not good for user experience. Maybe Android change by time, the experience will different!
You SHOULD just try this for your wish:
app:popupTheme="#style/Theme.AppCompat.DayNight"
This is late answer, but hope it will help someone else!
Not sure if this's help. It may be a simpler solution. Within AppCompat - themes_base.xml you will find the section below.
<!-- Panel attributes -->
<item name="panelMenuListWidth">#dimen/abc_panel_menu_list_width</item>
<item name="panelMenuListTheme">#style/Theme.AppCompat.CompactMenu</item>
<item name="panelBackground">#drawable/abc_menu_hardkey_panel_mtrl_mult</item>
<item name="android:panelBackground">#android:color/transparent</item>
<item name="listChoiceBackgroundIndicator">#drawable/abc_list_selector_holo_dark</item>
Create a theme within your app and apply the colour.
<style name="Theme.Base" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:panelBackground">#android:color/black</item>
</style>

Unable to override actioinBarWidgetTheme for Theme.AppCompat.Light, using AppCompat v21

I try to style my v7.widget.Toolbar's menu radio buttons to use a custom drawable.
This works
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:listChoiceIndicatorSingle">#drawable/my_drawable</item>
</style>
But I guess this will change all of my apps radio buttons while I'd like to limit it to Toolbar only, so I am extracting to a custom theme and arrive to this:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionBarWidgetTheme">#style/MyAbTheme</item>
</style>
<style name="MyAbTheme" parent="Theme.AppCompat.Dark">
<item name="android:listChoiceIndicatorSingle">#drawable/my_drawable</item>
</style>
Now, the above doesn't work - I have material-ish radio buttons which are default.
I also tried to do this:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/primary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/MyAbTheme"
/>
(+ in styles.xml change parent to overlay like this)
<style name="MyAbTheme" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:listChoiceIndicatorSingle">#drawable/my_drawable</item>
</style>
but this doesn't do anything too.
Any hints of how I would style only radio buttons in a Toolbar?
Regards the second attempt:
AppCompat does not have the Theme.AppCompat.Dark, or am I wrong?
can be related to property's value null <item name="actionBarWidgetTheme">#null</item> in values/theme_base.xml of AppCompat, but i cannot explain because. Maybe this property is not longer used.
have you tried with and without android: prefix?

appcompat-v7 Toolbar menu - selection color doesn't effect text background

I customized the toolbar in my app to be dark action bar and light menu.
It all seems to be fine except for the 'selection background' of the menu items.
Here is how it looks, notice there is a light gray background (which appears on click) and the background behind the text remains white like it overrides the onClick color. (the menu is total white)
Here is the theme used for the toolbar :
<style name="Theme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/primary_color</item>
<item name="android:textColorPrimary">#color/primary_light</item>
</style>
<style name="Theme.Toolbar.Menu" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#color/primary_light</item>
<item name="android:textColorPrimary">#color/primary_dark</item>
<item name="android:selectedWeekBackgroundColor">#color/primary_dark</item>
</style>
And the toolbar layout :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/Theme.Toolbar"
app:popupTheme="#style/Theme.Toolbar.Menu"/>
In your popupTheme set
<item name="android:colorBackground">#color/your_color</item>
instead of "android:background" (and remove that completely).
I found this solution at this post and it worked for me:
Style appcompat-v7 Toolbar menu background

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.

Categories

Resources