I have a problem that frustrates me a lot. I can't get to the end of it. The menu items in the overflow menu in the Toolbar of my Android app are not highlighted properly. That is, only the background outside of the text changes color when the button is pressed, while the background behind the text does not. Here's a screenshot:
http://imgur.com/gqE9xbl
I've found questions with this exact problem, but with no answers. Please help me.
Regards,
Aleksandar
UPDATE
Here's the source for my styles and the Toolbar:
<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/converterColorPrimary</item>
<item name="colorPrimaryDark">#color/converterColorPrimaryDark</item>
<item name="colorAccent">#color/converterColorAccent</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#color/converterWindowBackground</item>
<item name="android:textColor">#color/converterWindowTextColor</item>
<item name="colorControlNormal">#color/converterControlColorNormal</item>
<item name="colorControlHighlight">#color/converterColorControlHighlight</item>
</style>
<style name="AppTheme" parent="BaseTheme"/>
<style name="ToolbarThemeOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/converterColorPrimary</item>
<item name="android:textColorPrimary">#color/converterToolbarTextColorPrimary</item>
</style>
<style name="ToolbarPopupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#color/converterWindowBackground</item>
<item name="android:textColorPrimary">#color/converterWindowTextColor</item>
</style>
<style name="ToolbarTitleTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/converterToolbarTextColorPrimary</item>
<item name="android:textSize">18sp</item>
</style>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:converter="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/app_bar"
converter:theme="#style/ToolbarThemeOverlay"
converter:popupTheme="#style/ToolbarPopupTheme"
converter:titleTextAppearance="#style/ToolbarTitleTextAppearance"/>
Related
On my main app theme I have:
<item name="android:popupMenuStyle">#style/MyApp.PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/MyTextAppearanceLargePopupMenu
</item>
<item name="android:textAppearanceSmallPopupMenu">#style/MyTextAppearanceSmallPopupMenu
</item>
And then I have
<style name="MyApp.PopupMenu" parent="Base.Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#color/white</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:textColorSecondary">#color/black</item>
<item name="android:textColor">#color/black</item>
<item name="android:background">#color/color_white</item>
<item name="overlapAnchor">true</item>
<item name="android:overlapAnchor">true</item>
<item name="android:textAppearanceLargePopupMenu">#style/MyTextAppearanceLargePopupMenu
</item>
<item name="android:textAppearanceSmallPopupMenu">#style/MyTextAppearanceSmallPopupMenu
</item>
</style>
<style name="MyTextAppearanceLargePopupMenu" parent="TextAppearance.AppCompat.Widget.PopupMenu.Large">
<item name="android:textColor">#color/black</item>
</style>
<style name="MyTextAppearanceSmallPopupMenu" parent="TextAppearance.AppCompat.Widget.PopupMenu.Small">
<item name="android:textColor">#color/black</item>
</style>
But my popup menu appears with a white background and white letters instead of black. I have tested this by changing the background and that works fine.
So what am I doing wrong?
Thanks.
Edit: Figured it out, my app theme has <item name="android:textColor">#color/primary_text</item> and that seems to override whatever I do on popup menu styles.
Here's an example:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="popupMenuStyle">#style/PopupStyle</item>
<item name="textAppearanceLargePopupMenu">#style/PopupTextAppearanceLarge</item>
<item name="textAppearanceSmallPopupMenu">#style/PopupTextAppearanceSmall</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#ff00ff</item>
</style>
<style name="PopupStyle" parent="Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#ff00ff</item>
</style>
<style name="PopupTextAppearanceLarge" parent="TextAppearance.AppCompat.Light.Widget.PopupMenu.Large">
<item name="android:textColor">#ffff00</item>
</style>
<style name="PopupTextAppearanceSmall" parent="TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
<item name="android:textColor">#ffff00</item>
</style>
</resources>
Toolbar example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
Its very late but the main reason is that the attribute android:textColor is applied to the popup menu which is defined in the main style (parent) and you can't control by defining your style for popup menu. Don't know the reason for this weird functionality but it as it is, its google .
So add <item name="android:textColor">#color/white</item> in the parent style.
I have a dummy app that I'm making just to get the hang of Android development. I managed to get a menu overflow icon to appear on my toolbar, but I can't seem to figure out how to change it to white.
I'm using a Toolbar widget (without support libraries; that's something I don't want to do).
Here is what I have:
I just want to make the overflow menu white.
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
You want to change android:textColorSecondary like so:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<!-- Here you go. This changes overflow icon colour. -->
<item name="android:textColorSecondary">#color/WHITE</item>
</style>
Just add android:theme="#style/ThemeOverlay.AppCompat.Dark" to the toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/ThemeOverlay.AppCompat.Dark"/>
This thing worked for me :)
<style name="AppThemeLL" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorBackground">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
I am implementing material design on my app, and I want to be able to change the color of the drawer icon to white, but I couldnt achieve what I am looking for..
This is my themes.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="AppTheme.Base" />
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="HeaderBar" parent="AppTheme.Base">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:background">#color/primary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#000</item>
</style>
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
</resources>
And this is my toolbar.xml file
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/jpe.serviguide.commobile"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
app:theme="#style/HeaderBar" />
All the colors that I wanted are just fine, but the drawer icon is black instead of white..
I have tried a lot of thing but with no desire result
Thank you so much
Finally made it by doing this on my theme.xml file
<style name="AppTheme" parent="Theme.AppCompat.Light">
....
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
You can do it 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/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" - is important part
I think your actionbar should have the following parent (ThemeAppCompat.Light):
<style name="HeaderBar" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:background">#color/primary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
Hi neteot always when I work with costume bars I create a custom layout as a bar, then in my case the bars button/burguer button is a ImageButton... Then you need to change color of the icon
If you want to create a perfect custom bar, u can see my last post:
https://stackoverflow.com/questions/27417923/android-add-custom-buttons-on-action-bar/27418306#27418306
Good luck and I wait than I helps you!!
PD: If you need more info or any doubt, advice me!
I'm facing this weird problem with the bar that appears when you select a text
I'm using Appcompat v7 library the last version. This is my theme defenition:
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/material_blue_grey_800</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="vpiTabPageIndicatorStyle">#style/TabStyle</item>
<item name="android:textAppearanceButton">#style/AppTheme.ButtonTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
</style>
<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:textColor">#color/text</item>
<item name="android:textColorLink">#color/colorPrimary</item>
</style>
<style name="AppTheme.ButtonTextAppearance" parent="#style/Base.TextAppearance.AppCompat.Button">
<item name="textAllCaps">false</item>
<item name="android:textAllCaps">false</item>
</style>
None of the colors are white, so I don't really know where it comes this white bar color and white icons.
Any clue?
In order to make the text selection actionMode background color, use the below in your style:
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#color/dodgerblue</item>
try using the following style
<style name="customToolbar" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#color/white</item>
<item name="android:textColorPrimary">#color/primary_dark</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
and in your toolbar add following attributes
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:popupTheme="#style/customToolbar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
</android.support.v7.widget.Toolbar>
I`m using new android support library 21.0.2 and when i call ActionMode for text selection i got this.
It seems than title textview background is transparent.
Redefining titleTextStyle of ActionMode has no effect.
Any suggestions? Thanks.
theme.xml
<item name="actionModeStyle">#style/ActionMode</item>
<item name="android:actionModeStyle">#style/ActionMode</item>
<style name="ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="titleTextStyle">#style/ActionModeTitleTextStyle</item>
</style>
<style name="ActionModeTitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionMode.Title">
<item name="android:background">#ff0000</item>
<item name="android:colorBackground">#ff0000</item>
</style>
I ran into this issue using the the AppBarLayout with the Toolbar and TabLayout. I had set the background color on the Toolbar and that caused the ActionMode title to display the background color of the Toolbar and not the actionModeBackground color that was set on the Theme.
I moved the background color to the AppBarLayout instead and this fixed the issue with the title having the background color of the Toolbar.
Hope this helps someone!
This problem happened here even when i upgraded to 22.2.0.
I solved adding items without "android:" prefix to styles and adding style attribute in Toolbar element.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/ToolbarTheme"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="6dp"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#color/window_background</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionModeStyle">#style/ActionModeTheme</item>
<item name="actionModeStyle">#style/ActionModeTheme</item>
</style>
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>>
<item name="colorAccent">#color/accent</item>
<item name="colorButtonNormal">#color/primary</item>
</style>
<style name="ToolbarTheme" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/primary</item>
<item name="background">#color/primary</item>
<item name="titleTextAppearance">#style/ToolbarTitleTheme</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
<style name="ToolbarTitleTheme">
<item name="android:textSize">#dimen/text_large</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
</style>