Android Support Toolbar colorControlNormal color

Question

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?

Solution 1

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

Solution 2

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

Comments

[ianhanniballake]

What happens when you remove colorControlNormal from ToolbarTheme.Base entirely?

[James Cross]

No difference, the spinner stays grey.

[tyczj]

I had the same problem, it seems to work on some devices and not others stackoverflow.com/questions/26739022/…

[James Cross]

Thanks for this, I will give it a try as soon as I can.

[Rajat kumar]

I have tried the same but I am not able to see any change on my spinner arrow ,,It remain same white color.. I want to change it to Black color. do you think there is any other way to resolve this problem?

[yyunikov]

@JamesCross, did this help you?

[nitrobuster]

OKay, I've looked through a lot of tutorials and stackoverflow answers, this is definitely the one I think that addresses this problem the best.

[Damian Walczak]

This didn't work for me, although the @yuriy-yunikov answer, with setting the colors for Spinner through the android:theme works like a charm.

[Damian Walczak]

Please keep in mind, that it's crucial to set the style on the Spinner itself with style attribute, because setting it through application theme doesn't seem to propagate the theme attribute for Spinner.

[reVerse]

@DamianWalczak Post is a little bit old and I have to check this. But I think my approach should still work. Furthermore since Appcompat v22 I think you can set android:theme for every view element - so the style stuff is obsolete as well.