Changing menu background of toolbar with material design - android

Hi I want to change the style of my menu background, with the popupTheme it doesnt change
My toolbar code
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/fondoNavigation"
android:theme="#style/CustomToolbar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
My Style
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/fondoNavigation</item>
<item name="colorAccent">#color/letraNavigation</item>
</style>
<style name="CustomToolbar" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/letraNavigation</item>
<item name="android:textColorSecondary">#color/letraNavigation</item>
</style>
My v21 Style
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/fondoNavigation</item>
<item name="android:colorAccent">#color/letraNavigation</item>
<item name="android:textColorPrimary">#color/fondoNavigation</item>
</style>

<style name="Theme.Dbtools_style" parent="#style/Theme.AppCompat.Light">
<!-- Title Text Color -->
<item name="actionMenuTextColor">#color/DimGray</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:dropDownListViewStyle">#style/PopupMenuListView</item>
</style>
<style name="PopupMenuListView" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:divider">#color/DarkGray</item>
<item name="android:dividerHeight">0.5dp</item>
<item name="android:background">#color/White</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/title_bar</item>
<item name="background">#color/title_bar</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="android:subtitleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="subtitleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>

With this one I changed the background and others things
<style name="CustomToolbar" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/letraNavigation</item>
<item name="android:textColorSecondary">#color/letraNavigation</item>
<item name="android:popupBackground">#color/fondoNavigation</item>
<item name="android:background">#color/fondoNavigation</item>
</style>

Solution for people not using Support Library
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:paddingTop="30dp"
android:background="#e53935"
android:elevation="4dp"
android:theme="#style/ToolbarTheme"
android:popupTheme="#style/ToolbarPopUpTheme"/>
styles.xml
<style name="ToolbarTheme" parent="android:Theme.Material" />
<style name="ToolbarPopUpTheme" parent="android:Theme.Material.Light"/>

Related

Popup menu text color is not working, background color working fine

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.

How to change background for Toolbar

I have a big problem. I cant set background for ToolBar when I start ActionMode.
I got this:
I try much variants, but I didn't find answer for me (
This is my style:
<style name="DriverNotesAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/material_bg</item>
<item name="colorPrimaryDark">#color/status_bar</item>
<item name="colorAccent">#color/edittext_primary</item>
<item name="android:windowBackground">#color/light_blue</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorPrimaryInverse">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:actionModeBackground">#color/material_light_bg</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="drawerArrowStyle">#style/WhiteDrawerIconStyle</item>
<item name="textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge</item>
<item name="textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall</item>
<item name="android:actionModeStyle">#style/LStyled.ActionMode</item>
<item name="popupMenuStyle">#style/ThemeOverlay.AppCompat.Light</item>
<item name="android:popupMenuStyle">#style/myPopupMenuStyle</item>
</style>
<style name="myPopupMenuTextAppearanceLarge" parent="#style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Large">
<item name="android:textColor">#000000</item>
</style>
<style name="LStyled.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="background">#color/material_light_bg</item>
</style>
try this one,
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
Theme / Style
<style name="MyToolbarStyle">
<item name="android:maxHeight">#dimen/abc_action_bar_default_height_material</item>
<item name="android:background">#color/primary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="titleTextAppearance">#style/Theme.Toolbar.Title</item>
<!-- No need for colorPrimary, colorPrimaryDark, colorAccent here
this should go to the AppTheme -->
</style>
for more detail visit this

How to remove the title background from a transparent ActionBar?

I'm using a transparent ActionBar with a white title. Unfortunately the title has its own background.
This is my styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorPrimary">#color/app_color</item>
<item name="android:colorPrimaryDark">#ff077fb1</item>
<item name="android:colorAccent">#color/app_color</item>
<item name="android:windowActionModeOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/app_color</item>
<item name="colorPrimaryDark">#ff077fb1</item>
<item name="colorAccent">#color/app_color</item>
<item name="windowActionModeOverlay">true</item>
</style>
<style name="MyActionBar" parent="Theme.AppCompat.NoActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:background">#drawable/actionbar_background</item>
<item name="background">#drawable/actionbar_background</item>
</style>
Here is the toolbar used:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
sothree:theme="#style/MyActionBar">
How can I get rid of that blue title background?
I'm doing this when defining textAppearance in toolbar
sothree:titleTextAppearance="#style/MyToolbar.TextAppearance"
style
<style name="MyToolbar.TextAppearance">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/toolbar_title_text_color</item>
<item name="android:background">#color/mytransparentcolor</item>
</style>
I solved this by removing
<item name="android:background">#drawable/actionbar_background</item>
<item name="background">#drawable/actionbar_background</item>
from styles.xml and adding the background color programatically to the toolbar using
toolbar.setBackgroundColor(myColor);

Change the text color of the popup menu

I am using Theme.AppCompat.Light.NoActionBar theme. I am getting a white background for popup menu and also the color of menu item is white that makes it invisible. I tried many solutions with no success.
This is my styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#000000</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall</item>
<!-- Customize your theme here. -->
</style>
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
<item name="android:textColor">#000000</item>
<item name="android:textSize">12sp</item>
</style>
<style name="myPopupMenuTextAppearanceSmall" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Small" tools:ignore="NewApi">
<item name="android:textColor">#000000</item>
<item name="android:textSize">15sp</item>
</style>
<style name="myPopupMenuTextAppearanceLarge" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Large" tools:ignore="NewApi">
<item name="android:textColor">#000000</item>
<item name="android:textSize">25sp</item>
</style>
This is the 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/toolbar"
android:elevation="8dp"
app:theme="#style/AppTheme"
app:title="Troll Cricket" />
Add these lines to your Toolbar.xml file.
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
This will allow you to have a dark toolbar and light-themed overflow menu.

Android Select text toolbar options color issue

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>

Categories

Resources