Develop Reference

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>

How do I customize menu item's background color?

I'm trying to customize Toolbar's popup menu. Now I can not set background color of menu item.
My styles.xml looks like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:actionMenuTextColor">#color/actionbar_text_color</item>
<item name="android:dropDownListViewStyle">#style/AppTheme.DropDown</item>
<item name="android:itemTextAppearance">#style/menuItemColor</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionMenuTextColor">#color/actionbar_text_color</item>
<item name="dropDownListViewStyle">#style/AppTheme.DropDown</item>
<item name="itemTextAppearance">#style/menuItemColor</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">\
<item name="titleTextColor">#color/actionbar_text_color</item>
<item name="subtitleTextColor">#color/actionbar_text_color</item>
<item name="android:background">#color/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
</style>
<style name="AppTheme.DropDown" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:background">#color/background_color</item>
<!-- Support library compatibility -->
<item name="background">#color/background_color</item>
</style>
<style name="menuItemColor">
<item name="android:textColor">#color/inactive_text_color</item>
</style>
</resources>
I added ActionBar to activity layout with code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/AppTheme.ActionBar"/>
Note: I'm using AppCompat, not Holo or other.

This may help you,create a style like,
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
and add it to your main themes..
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item> <! added it here
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:actionMenuTextColor">#color/actionbar_text_color</item>
<item name="android:textColor">#color/text_color</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionMenuTextColor">#color/actionbar_text_color</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">\
<item name="titleTextColor">#color/actionbar_text_color</item>
<item name="subtitleTextColor">#color/actionbar_text_color</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item> <! added it here
<item name="android:background">#color/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
</style>

You have to define style for Overflow Menu too like this :
<!-- OverFlow menu Styles -->
<style name="PopupMenuListView" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:divider">#color/sp_red_500</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:background">#color/white</item>
</style>
and in your parent theme style( Base application theme.) define drop down menu style like this :
<item name="dropDownListViewStyle">#style/PopupMenuListView</item>

How to change ActionBar Colour

I am trying to change my App ActionBar colour to no success. I am using the this library https://github.com/neokree/MaterialNavigationDrawer;
Here is the style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="colorControlActivated">#color/color_c</item>
<item name="toolbarStyle">#style/Widget.Toolbar</item>
</style>
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="contentInsetStart">5dp</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/color_a</item>
<item name="background">#color/color_a</item>
<!-- Support library compatibility -->
</style>
<style name="FullscreenTheme" parent="android:Theme.NoTitleBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#null</item>
</style>
<style name="MyNavigationDrawerTheme" parent="MaterialNavigationDrawerTheme.Light.DarkActionBar">
<item name="colorPrimary">#color/color_a</item>
<item name="colorPrimaryDark">#color/color_a</item>
<item name="colorAccent">#FFFFFF</item>
<item name="rippleBackport">true</item>
<item name="singleAccount">true</item>
<item name="multipaneSupport">true</item>
<!--<item name="learningPattern">false</item>-->
</style>
<style name="MySubheaderTheme">
<item name="subheaderTitleColor">#000000</item>
</style>
<style name="MySectionTheme" >
<item name="sectionColorIcon">#000000</item>
<item name="sectionColorText">#000000</item>
<item name="sectionColorNotification">#000000</item>
<item name="sectionBackgroundColorPressed">#160000FF</item>
<item name="sectionBackgroundColorSelected">#0A0000FF</item>
<item name="sectionBackgroundColor">#000000FF</item>
</style>
</resources>
I use the MyNavigationDrawerTheme theme for my activities.

You should be able to set the action bar color using the android:colorPrimary attribute:
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">#color/accent</item>
</style>
</resources>
Based on information here

You should create your styles also for v21 and above with a small change (because they natively support material theme).
And in values-v21/style.xml add android:colorPrimary and others attributes with android: prefix to your style:
<style name="MyNavigationDrawerTheme" parent="MaterialNavigationDrawerTheme.Light.DarkActionBar">
<item name="android:colorPrimary">#color/color_a</item>
<item name="android:colorPrimaryDark">#color/color_a</item>
<item name="android:colorAccent">#FFFFFF</item>
<!--...-->
</style>

Android : Customize Zendesk Rate My APP UI

How can I customize rate my app dialog of Zendesk. In sample app a style is added in style.xml file and it is working. But I don't know how to apply that style for Rating dialog. Please help me. Thanks in advance.
style.xml:
<!-- +++++++++++++++++++++++++++++++++ -->
<!-- Start rate my app dialogue styles -->
<!-- +++++++++++++++++++++++++++++++++ -->
<style name="rma_button">
<item name="android:background">#color/light_background</item>
<item name="android:gravity">center</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_weight">1</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<style name="rma_title" parent="rma_button">
<item name="android:textSize">22sp</item>
<item name="android:background">#android:color/white</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<style name="rma_divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1px</item>
<item name="android:background">#color/divider</item>
</style>
<!-- +++++++++++++++++++++++++++++++ -->
<!-- End rate my app dialogue styles -->
<!-- +++++++++++++++++++++++++++++++ -->
<!-- ++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Start rate my app dialogue feedback styles -->
<!-- ++++++++++++++++++++++++++++++++++++++++++ -->
<style name="rma_feedback_issue_cancel_button" parent="_rma_feedback_issue_cancel_button">
<item name="android:background">#drawable/white_gradient_btn</item>
<item name="android:textColor">#color/grey_text</item>
</style>
<!--
This style overrides the parent style to change the background colour of the button
depending on the state
-->
<style name="rma_feedback_issue_send_button" parent="_rma_feedback_issue_send_button">
<item name="android:layout_marginLeft">8dp</item>
<item name="android:background">#drawable/green_gray_btn_selector</item> <!-- Button colour will change -->
<item name="android:textColor">#color/green_gray_txt_selector</item>
</style>
<style name="rma_feedback_message_title" parent="_rma_feedback_message_title">
<item name="android:textColor">#color/grey_text</item>
</style>
<style name="rma_feedback_message_subtitle" parent="_rma_feedback_message_subtitle">
<item name="android:textColor">#color/grey_text</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<!--
In this example we are overriding the parent style using a selector to control the colour
of the text differently whether the edittext is enabled or disabled.
-->
<style name="rma_feedback_issue_edittext" parent="_rma_feedback_issue_edittext">
<item name="android:textColor">#color/enabled_disabled_grey_selector</item>
<item name="android:textColorHint">#color/text_hint</item>
</style>
<style name="rma_feedback_divider" parent="_rma_feedback_divider">
<item name="android:background">#color/divider</item>
</style>
<style name="rma_feedback_progress" parent="_rma_feedback_progress">
<item name="android:indeterminateDrawable">#drawable/progress_green_small_holo</item>
</style>
<!-- ++++++++++++++++++++++++++++++++++++++++ -->
<!-- End rate my app dialogue feedback styles -->
<!-- ++++++++++++++++++++++++++++++++++++++++ -->

Issue resolved by creating a separate theme for the activity that is using RateMyApp dialog and applied styles for button, title and divider of dialog as below
<style name="CustomTheme" parent="Theme.AppCompat">
<item name="RateMyAppPaddingTop">#dimen/rma_padding_top</item>
<item name="RateMyAppPaddingBottom">#dimen/rma_padding_bottom</item>
<item name="RateMyAppButtonStyle">#style/rma_button_style</item>
<item name="RateMyAppTitleStyle">#style/rma_title_style</item>
<item name="RateMyAppDividerStyle">#style/rma_divider_style</item>
<item name="RateMyAppDividerHeight">#dimen/rma_divider_height</item>
</style>
<dimen name="rma_padding_top">24dp</dimen>
<dimen name="rma_padding_bottom">24dp</dimen>
<style name="rma_button_style">
<item name="android:background">#color/light_background</item>
<item name="android:gravity">center</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_weight">1</item>
<item name="android:textColor">#color/black</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<style name="rma_divider_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1px</item>
<item name="android:background">#color/divider</item>
</style>
<style name="rma_title_style" parent="rma_button">
<item name="android:textSize">22sp</item>
<item name="android:background">#android:color/white</item>
<item name="android:lineSpacingMultiplier">1.25</item>
<item name="android:textColor">#color/black</item>
</style>

Android Status Bar Prevent Coloring

I am having a problem preventing the status bar from taking on the primaryColor. I want to leave the status bar unstyled but on lollipop it is always taking on the color of the primaryColor defined in my styles.xml
Excerpt from styles:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
<item name="colorPrimaryDark">?attr/colorPrimary</item>
<item name="colorAccent">?attr/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/primary_text_light</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme.TransparentActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">?attr/colorPrimary</item>
<item name="colorAccent">?attr/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/primary_text_light</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="android:windowBackground">#color/white</item>
</style>
<!-- START Market Themes -->
<style name="AppTheme.Blue" parent="AppTheme">
<item name="colorPrimary">#color/primaryColorBlue</item>
</style>
styles/v21
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
<item name="colorPrimaryDark">?attr/colorPrimary</item>
<item name="colorAccent">?attr/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/primary_text_light</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme.TransparentActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">?attr/colorPrimary</item>
<item name="colorAccent">?attr/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/primary_text_light</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/black</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="android:windowBackground">#color/white</item>
<item name="android:windowContentTransitions">true</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="ToolBarStyle" parent="">
<item name="android:elevation">#dimen/toolbar_elevation</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

You're telling it to be your primary colour.
The status bar gets its colour form your colorPrimaryDark so change
<item name="colorPrimaryDark">?attr/colorPrimary</item>
to
<item name="colorPrimary">?attr/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/black</item>
I think this should only be necessary in your styles-v21 but I'm not close enough to anything to test it.
Docs here
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">#color/accent</item>
</style>
</resources>