Context
Using the AppCompat v7 21.0.0 / 21.0.2 / 21.0.3
Problem
The popupTheme of the ToolBar is not applied to the ShareAction
Style on the toolbar:
<style name="MyActionBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
The overflow menu item is using the popupTheme properly
The ShareAction on the other hand does not receive the popupTheme. After some testing I noticed it received the app:theme of the ToolBar thus being dark.
<item name="android:colorBackground">#color/white</item>
In order to get the black text on the ShareAction I tried setting many attributes and by setting "android:textColorPrimary" (on the ToolBar theme) I get what I want BUT then my icons on the ToolBar also takes this color which is weird...
The menu xml is the following:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cycle="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_share"
android:icon="#drawable/abc_ic_menu_share_holo_dark"
android:title="#string/media_share"
cycle:showAsAction="ifRoom"
cycle:actionProviderClass="android.support.v7.widget.ShareActionProvider" />
<item
android:icon="#drawable/abc_ic_menu_share_holo_dark"
android:showAsAction="ifRoom"
android:title="br">
<menu>
<item
android:id="#+id/menuSortNewest"
android:title="Sort by newest" />
<item
android:id="#+id/menuSortRating"
android:title="Sort by rating" />
</menu>
</item>
</menu>
I would expect both the ShareAction & the overflow to have the popupTheme but it's not the case
Workaround
I'll edit this post once I got a workaround
Ref: https://code.google.com/p/android/issues/detail?id=87285&thanks=87285&ts=1419254842
So, here's what worked for me.
Here's my Toolbar xml:
<?xml version="1.0" encoding="utf-8"?>
<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/action_bar_main"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
app:theme="#style/Toolbar"
app:popupTheme="#style/Toolbar_Popup"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Notice that I set both theme and popupTheme, and I also override background to be colorPrimary.
Here's the main app theme description with themes for Toolbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#color/white</item>
<!-- Support library compatibility -->
<item name="actionMenuTextColor">#color/white</item>
<item name="actionBarSize">#dimen/actionbar_height</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/dark_blue</item>
<item name="android:textColorPrimary">#607d8b</item>
</style>
<style name="Toolbar" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="android:background">#color/dark_blue</item>
</style>
<style name="Toolbar_Popup" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="android:background">#color/dark_blue</item>
</style>
So, as a result, Share action background is set to the value of background in the main Toolbar theme. And the background of Toolbar itself is overriden.
I was scratching my head for ages trying to solve this. I found a solution to my problem. Hopefuully this will help others also:
In my toolbar definition I was setting a custom theme like so:
<android.support.v7.widget.Toolbar
...
app:theme="#style/ActionBarThemeOverlay"
... />
In my styles.xml, my theme was defined as:
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
I wanted white action icons in my toolbar, so I was setting these values to white. Unfortunately it was also making my ShareActionProvider menu text white (on a white background).
The solution for me was to remove the style setting for textColorPrimary. My toolbar icons were still white but I now had the desired dark text in the popup share provider menu.
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
This page may helps to solve your problem: http://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
One difference I noticed in your XML is that you once use the property android:showAsAction="ifRoom" and once cycle:showAsAction="ifRoom".
Related
I try to change drop-down menu background, but can't find right decision. http://i.stack.imgur.com/OqO4j.png
That is ../values-v21/styles.xml I used
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#009688</item>
<item name="colorPrimaryDark">#00796B</item>
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
Explain, please, how I can change background color there.
Since you are using a Toolbar you can use something like this:
<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/action_bar_main"
app:popupTheme="#style/popupTheme"
...../>
where popupTheme is:
<style name="popupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/myTextColor</item>
<item name="android:colorBackground">#color/myPopupBackgroundColor</item>
</style>
Bigger question I have now, is how do I color the toolbar icons on kitkat / jellybean. On lollipop I can use the
<item name="android:textColorSecondary">#color/ttdPrimaryColor</item>
and that seems to do the trip but no such luck on kitkat.
I am trying to figure out how to theme the menu icon on the Toolbar. I need to keep the title white, but I want the menu icon to be a different color.
This is my current style:
<style name="ToolBarStyle" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">?colorPrimary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
the toolbar looks like:
<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_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/abc_action_bar_default_height_material"
app:popupTheme="#style/Theme.AppCompat.Light.NoActionBar"
app:theme="#style/ToolBarStyle" />
Another problem is that on most activities I want the drawer toggle to be the apps primary color but on certain activities I want it to be white. What is the best way to handle that.
Thanks,
Nathan
You can define a Theme for your Activities (not the Toolbar).
Something like this:
<style name="MyTheme" parent="Theme.AppCompat">
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
</style>
<style name="MyDrawerArrowToggle"
parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_color</item>
</style>
I'm using new android appcompat toolbar. I need to set the same custom color to both burger icon and back arrow icons. Using drawerArrowStyle allows me to change burger icon but not the arrow. The issue is only on Lollipop devices, anything pre-lollipop is fine.
Here is the code:
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/my_primary"
local:theme="#style/My.Toolbar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Style.xml:
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/black</item>
</style>
<style name="My.Theme" parent="Theme.Base">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="My.Toolbar" parent="Theme.AppCompat.NoActionBar">
<!-- color of the title text in the Toolbar, in the Theme.AppCompat theme: -->
<item name="android:textColorPrimary">#color/my_actionbartext</item>
<!-- necessary to support older Android versions.-->
<item name="actionMenuTextColor">#color/my_actionbartext</item>
<item name="android:textColorSecondary">#color/my_actionbartext</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_actionbartext</item>
</style>
I've tried using solution from here but it didn't work. Anyone has any ideas?
Just do this in your Activity/Fragment:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha, null));
else
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
The path to the right solution for the problem I found here
However this still didn't 100% work due to our use of DrawerLayout. My colleague wrote an excellent post on the solution here
I am also not able to update back arrow button after upgrading to 23.2.0 support library
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
It is the color of actionMenuTextColor. Add this line to your theme.
<item name="actionMenuTextColor">your color</item>
I'm implementing Material Design into my app and I'm stuck on style of my DrawerToggle with windowActionBarOverlay.
I'm setting the DrawerArrowStyle in my styles.xml and when running on device I have a different color in whole ToolBar:
Transparent ToolBar:
With title and action:
This is only happening on pre-Lollipop devices. I suspect that it's some compatibility on my styles, but until now I couldn't figure out what it's.
In my other style (without windowActionBarOverlay) it works perfectly in any device.
Here's my styles:
<style name="StyleOverlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
<item name="android:dialogTheme">#style/translucentDialog</item>
</style>
<style name="ThemeWithoutOverlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
<item name="android:dialogTheme">#style/translucentDialog</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="drawableSize">40dp</item>
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="ThemeToolbar" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
</style>
My layout toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeToolbar" />
In my Activity:
...
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
...
Does anyone know whats happening?
Thanks!
According to the Google Android Docs, from the link
To avoid resizing your layout when the action bar hides and shows, you can enable overlay mode for the action bar. When in overlay mode, your activity layout uses all the space available as if the action bar is not there and the system draws the action bar in front of your layout. This obscures some of the layout at the top, but now when the action bar hides or appears, the system does not need to resize your layout and the transition is seamless.
Setting the windowactionbaroverlay to true will create a 60% transparent black gradient over the action bar. Hence you can see a color of BLUE + (60% TRANSPARENT BLACK) = BLUISH GREEN. Sorry about my color definitions.
You need to set an extra property here on your activity's parent layout i.e.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize">
...</RelativeLayout>
as mentioned in the docs. Please refer them.
I am Using Overlay Action Bar By Using the Following Style to my Activity
style.xml
<style name="CustomActionBarTheme" parent="#style/Theme.AppCompat" >
<item name="windowActionBarOverlay">true</item>
<item name="android:background">#00f3ead8</item>
<item name="android:windowBackground">#drawable/logo1024</item>
</style>
I have only one menu item that is to be displayed Always
menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menusettings"
android:orderInCategory="100"
android:icon="#drawable/settings"
android:title="Menu"
yourapp:showAsAction="always"
/>
<menu>
The Icon i.e the settings.png is getting padded by 8dp
But I want 0 padding on the top and bottom so that it covers the Entire Actionbar
Please Help me out in deep trouble very close to the deadline of the project
Thanks in advance
One year later...
Removing padding on v7.Toolbar's action buttons is still challenging.
After a lot of experimentation here is a working solution, tested on API 15 and up (theoretically should be working > API 7).
First of all, toolbar style (theme) should be applied like so
<android.support.v7.widget.Toolbar
app:theme="#style/AppTheme.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
Next, values/styles.xml
<style name="AppTheme.Toolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="actionButtonStyle">#style/AppTheme.Toolbar.ActionButton</item>
</style>
<!-- this will be applied regardless api version -->
<style name="Base.AppTheme.Toolbar.ActionButton" parent="#style/Widget.AppCompat.ActionButton">
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>
</style>
<!-- this will be applied on < API 17 -->
<style name="AppTheme.Toolbar.ActionButton" parent="#style/Base.AppTheme.Toolbar.ActionButton">
<item name="android:padding">0dp</item>
</style>
And the final move, values-v17/styles.xml
<!-- this will be applied on >= API 17 -->
<style name="AppTheme.Toolbar.ActionButton" parent="#style/Base.AppTheme.Toolbar.ActionButton">
<item name="android:paddingStart">0dp</item>
<item name="android:paddingEnd">0dp</item>
</style>
Well your question was about a year ago, but it may help to other peoples.
Check the solution here :
how to add padding between menu items in android?
Setting the padding alone may not help. You must use minWidth attribute too.
I'm using AppCompat too, absolutely works.
<style name="Theme.Styled" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionButtonStyle">#style/Widget.Styled.Base.ActionButton</item>
</style>
<style name="Widget.Styled.Base.ActionButton" parent="#style/Widget.AppCompat.Base.ActionButton">
<item name="android:minWidth">20dp</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">15dp</item>
</style>