I have got the following action menu:
As you can see all of these action menu items are having a
background. i guess it is the same background like the parent.
How can i remove this background?
My style.xml is the following:
<resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorAccent">#color/accentColor</item>
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:actionModeBackground">#color/primaryColor</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:activatedBackgroundIndicator">#drawable/custom_background_listview_item</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="actionMenuTextColor">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/primaryColorDark</item>
<item name="android:background">#drawable/custom_background_blue</item>
</style>
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#color/primaryColor</item>
</style>
</resources>
My Toolbar:
<?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/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:elevation="2dp"
android:focusable="false"
app:popupTheme="#style/AppTheme.Toolbar.PopupMenu"
app:theme="#style/AppTheme.Toolbar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#null"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
The following line is the problem
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/custom_background_blue</item>
</style>
Since the above is applied not as style but as a theme (presumably via popupTheme attribute on your Toolbar element), all the widgets inside the toolbar inherit these settings. What you want is android:popupBackground instead of android:background.
Edit: OP stated the above is not sufficient. For styling toolbar's popup menu (not the toolbar itself) use the app:popupTheme attribute. The theme is going to be similar to this:
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#drawable/custom_background_blue</item>
</style>
You're setting the action background color explicitly in your style.xml same as the primary color.
<item name="android:actionModeBackground">#color/primaryColor</item>
Try removing this from your XML or changing it to a color that seems appropriate for your UI and it should work. If you don't choose to manually specify a color for the android:actionModeBackground, it will simple derive it's default value from the parent theme (in your case, Theme.AppCompat.Light.NoActionBar).
Related
In my activity, I use default ActionBar
<style name="AppTheme" parent="Theme.AppCompat"> and getSupportActionBar()
How can I custom the style of this ActionBar?
Change ActionBar color and title color
Align title to center
Add more top padding to ActionBar
For the color, I tried these two style, but it also change color of whole Activity, I just want to change ActionBar
<item name="colorPrimary"></item>
<item name="android:textColorPrimary"></item>
I alo tried actionBarStyle, but it is not working
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/darkgray</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/gold</item>
<item name="android:textColorPrimary">#color/gold</item>
<item name="android:textColorSecondary">#color/darkgray</item>
<item name="android:windowBackground">#color/black</item>
<item name="android:colorBackground">#color/black</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/gray</item>
<item name="android:textColor">#color/black</item>
</style>
I suggest you to include the Toolbar in your layout and use the Theme.AppCompat.NoActionBar theme for your Activity :
Layout :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/yourColor">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/yourColor"
android:text="yourTitle" />
</android.support.v7.widget.Toolbar>
Manifest :
<activity
android:name="yourActivity"
android:theme="#style/Theme.AppCompat.NoActionBar" />
I've created a new activity and for some reason, when it is used, it uses a different color in the status bar. What's strange is that in the "design" preview it renders the correct color.
Below are two screen shots, the darker color is the correct color.
Incorrect
Correct
The themes are the same as the other .xml layouts, so I'm having trouble really figuring out where this error is coming from. Below is the code for the layout:
activity_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.brewguide.android.coffeebrewguide.MenuActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/myfragment"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm not sure what other code would be useful to include for diagnosing this.
Edit:
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="DescriptionTextView">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:background">#color/mainBackground</item>
</style>
<!--style for the start button in the clock view layout-->
<style name="AppTheme.Button.Start" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/complimentaryLeft</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the stop button in the clock view layout-->
<style name="AppTheme.Button.Stop" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the reset button in the clock view layout-->
<style name="AppTheme.Button.Reset" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorAccent</item>
<item name="android:textColor">#color/cardview_light_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
I had the same issue. For me it was an issue with a second styles.xml file (still not sure why I had two). The specific line that was causing the issue was:
<item name="android:statusBarColor">#android:color/transparent</item>
I don't see this in your posted styles.xml, but perhaps it will help someone else.
Check your colors.xml for color named primary_dark and change it to be the same to primary, because Android use that(primary_dark) color to colorize status bar.
Managed to programatically set the color using the following line:
getActivity().getWindow().setStatusBarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
I would prefer to have this done in the .xml however.
I'm trying to change my Toolbar's menu item text color here, but it doesn't work. Here's my style:
<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="toolbarStyle">#style/AppTheme.ToolbarStyle</item>
<item name="buttonStyle">#style/AppTheme.ButtonStyle</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
<style name="AppTheme.ToolbarStyle" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/colorPrimary</item>
<item name="titleTextColor">#android:color/white</item>
<item name="titleTextAppearance">#style/TextAppearance.AppCompat.Widget.ActionBar.Title
</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
layout xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name"
app:titleMarginStart="#dimen/margin_l"
/>
I have tried to set the Toolbar theme directly in xml, but the menu item is still back. Is there a solution to this?
Add these lines in your AppTheme style
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
Having a material toolbar you can play with styling modifying text title and menu texts as follows:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#android:color/white"
android:elevation="6dp"
android:theme="#style/App.ToolbarStyle"
app:titleTextAppearance="#style/App.ToolbarTitleTex"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/create_item_menu"
app:titleTextColor="#android:color/black" />
Where this style lets you change the color of the icon of the left:
<style name="App.ToolbarStyle" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">#color/colorPrimary</item>
</style>
Also you can change the title text appearance with another style:
<style name="App.ToolbarTitleTex" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">18sp</item>
<item name="fontFamily">#font/roboto_bold</item>
</style>
And finally to change the menu item style you need to add this item property to the main style/theme of the app (the one you set in the AndroidManifest file:
<item name="actionMenuTextAppearance">#style/App.ToolbarMenuItem</item>
With:
<style name="App.ToolbarMenuItem" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">14sp</item>
<item name="fontFamily">#font/roboto_bold</item>
<item name="textAllCaps">true</item>
<item name="android:textStyle">bold</item>
</style>
The final result would be something like this:
You need to declare a Theme like this
<style name="Theme.PopupOverlay.Menu" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:textColor">#android:color/white</item>
</style>
And then, in your Toolbar in layout view you must specify to use that theme
<androidx.appcompat.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.PopupOverlay.Menu" />
Modern way under Material3 theming.
<style name="AppTheme" parent="Theme.Material3.Dark">
<item name="toolbarStyle">#style/ToolBarStyle</item>
...
</style>
<style name="ToolBarStyle" parent="#style/Widget.Material3.Toolbar">
<item name="titleTextColor">#android:color/holo_green_light</item>
<item name="navigationIconTint">#android:color/holo_blue_light</item>
<item name="materialThemeOverlay">#style/ToolbarThemeOverlay</item>
</style>
<style name="ToolbarThemeOverlay" parent="">
<item name="actionMenuTextColor">#android:color/holo_red_light</item>
</style>
materialThemeOverlay - is the key to apply the colors to action menu items
In your theme file you have to put this :
<style name="AppTheme.ActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="actionMenuTextColor">#color/text_color</item>
...
</style>
and apply above theme to Toolbar view as like this android:theme="#style/AppTheme.ActionBar"
detailed example:
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/AppTheme.ActionBar"/>
When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:
Here is my layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#0099cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"/>
</FrameLayout>
And my styles.xml:
<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="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!--For compatibility-->
<item name="actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/black_overlay</item>
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">50sp</item>
</style>
</resources>
"black_overlay" color value is #66000000
I am using AppCompat and Support libraries v24.2.1.
Do you have any idea on how to get rid of this text background?
Cheers.
As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate.
Replace app:theme by style:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work.
As #apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.
Encapsulate a TextView inside the Toolbar and set the value of that.
<android.support.v7.widget.Toolbar
...>
<TextView ... />
</android.support.v7.widget.Toolbar>
I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?
Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose