How to remove the title background from a transparent ActionBar? - android

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);

Related

How to set textColorSecondary on toolbar theme

I have tried for several days to fix a problem where multiple of my UI elements in my toolbar is the wrong color. If you take a look at the picture below you can see what I mean:
Elements that should be white are black and I just can't figure out how to fix this through my theme.
Here's my themes.xml (sry about the mess in there, but theming is really difficult):
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.GuidelinesCompat.Light.DarkToolbar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/colorBackground</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="toolbarStyle">#style/AppTheme.NoActionBar.ToolbarStyle</item>
<item name="actionModeStyle">#style/AppTheme.NoActionBar.ActionModeStyle</item>
<item name="searchViewStyle">#style/AppTheme.NoActionBar.SearchViewStyle</item>
<!--<item name="android:actionModeBackground">#color/bg_action_mode</item>-->
<!--<item name="android:textColorSecondary">#color/white</item>-->
</style>
<style name="AppTheme.ActionBar">
<item name="android:windowActionModeOverlay">true</item>
</style>
<!-- Base toolbar theme. -->
<style name="AppTheme.NoActionBar.ToolbarStyle" parent="Widget.GuidelinesCompat.Toolbar">
<item name="titleTextAppearance">#style/AppTheme.NoActionBar.ToolbarTitleTextAppearance</item>
</style>
<style name="AppTheme.NoActionBar.ToolbarTitleTextAppearance" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<!-- Base Action Mode styles -->
<style name="AppTheme.NoActionBar.ActionModeStyle" parent="Widget.GuidelinesCompat.ActionMode">
<item name="background">#color/bg_action_mode</item>
<!--<item name="android:actionModeBackground">#color/bg_action_mode</item>-->
<!--<item name="android:actionOverflowButtonStyle">#style/ActionModeTitleTextStyle</item>-->
<!--<item name="statusBarColor">#color/grey_100</item>-->
</style>
<style name="ActionModeTitleTextStyle" parent="Widget.GuidelinesCompat.ActionButton.Overflow">
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<style name="AppTheme.NoActionBar.SearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Sets the search icon -->
<item name="searchIcon">#drawable/ic_search_white_24dp</item>
<!-- Gets rid of the "underline" in the text -->
<!--<item name="queryBackground">#color/white</item>-->
<!-- Gets rid of the search icon when the SearchView is expanded -->
<!--<item name="searchHintIcon">#null</item>-->
<!-- The hint text that appears when the user has not typed anything -->
<!--<item name="queryHint">#string/menu_examination_search_hint</item>-->
<item name="android:textAppearance">#style/SearchViewTextAppearance</item>
</style>
<style name="SearchViewTextAppearance">
<item name="android:textColorHint">#color/white</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<!-- Theme applied to LoginActivity and SignUpActivity -->
<style name="AppTheme.Login" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">#color/colorPrimary</item>
<item name="android:textColorHint">#color/iron</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorControlNormal">#color/iron</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="colorButtonNormal">#color/colorPrimaryDarker</item>
</style>
<style name="AppTheme.NavigationView">
<item name="android:textColorSecondary">#color/colorTextSecondary</item>
</style>
<!-- Theme applied to Textview in LoginActivity and SignUpActivity -->
<style name="WhiteText" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/white</item>
</style>
<!-- Animations applied to dialog when entering or exiting -->
<style name="DialogAnimation">
<item name="android:windowEnterAnimation">#anim/slide_up</item>
<item name="android:windowExitAnimation">#anim/slide_down</item>
</style>
I've found out that if I set textColorSecondary in my AppTheme.NoActonBar all my controls are correctly coloured white, but this gives me trouble in all my dialogs, that now also have textColorSecondary set to white.
I hope someone out there can show me a solution, cause I'm out of ideas.

Try this here .
In your 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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ToolBarPopupStyle"
android:background="#color/actionbar/>
In your styles:
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<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="actionOverflowButtonStyle">#style/ActionButtonOverflowStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>

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

Changing menu background of toolbar with material design

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"/>

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