Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Support Toolbar colorControlNormal color

Tags:

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:

Toolbar and spinner

<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?

like image 364
James Cross Avatar asked Oct 23 '14 20:10

James Cross


People also ask

How do you change the color of your toolbar on Android?

Just go to res/values/styles.edit the xml file to change the color of action bar.

What is colorControlNormal?

boxme/Android Color Control Cheat Sheet For instance, "android:colorControlNormal" becomes "colorControlNormal". These attributes will be propagated to their corresponding attributes within the android namespace. for devices running Lollipop. Any exceptions to this will be noted by including the "android:" prefix.


2 Answers

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" /> 
like image 177
Yuriy Yunikov Avatar answered Oct 05 '22 23:10

Yuriy Yunikov


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

solution with different colors for spinner and checkbox

Note: I made the checkbox purple for demo purpose

like image 32
reVerse Avatar answered Oct 05 '22 23:10

reVerse