xamlxamarinxamarin.formsxamarin.androidcustom-renderer

Unable to change the background color(Accent) of DatePicker widget in Xamarin Project for Android


Unable to change the background color(Accent) of DatePicker widget in Xamarin Forms Project for Android. TimePicker is working fine.

Pink DatePicker Issue

Correct TimePicker Color

Here are the files I know to change. I've practically tried every possible solution. Xamarin Project is up to date. Tried on multiple devices , real and virtual.

Color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#004193</color>
    <color name="colorAccent">#004193</color>
    <color name="colorWhite">#FFFFFF</color>
</resources>

Styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MainTheme" parent="MainTheme.Base">
        <item name="android:textAllCaps">false</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="MainTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

Custom Renderer

public class OKCancelDatePickerRenderer : DatePickerRenderer
    {
        public OKCancelDatePickerRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);

            if (Control != null) // also tried e.NewElement etc.
            {
                Control.SetBackgroundColor(Android.Graphics.Color.Blue);
                Control.SetHighlightColor(Android.Graphics.Color.Orange);
                Control.SetHintTextColor(Android.Graphics.Color.Green);
                Control.SetLinkTextColor(Android.Graphics.Color.Yellow);
                Control.SetOutlineAmbientShadowColor(Android.Graphics.Color.Red);
                Control.SetOutlineSpotShadowColor(Android.Graphics.Color.DeepSkyBlue);
            }
        }
    }

Solution

  • Please add the following code to file styles.xml of folder Resources\values on your android project.

         <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    
          <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog"> 
                <item name="colorAccent">#2196F3</item>
          </style>
    

    You can refer to the code of my styles.xml:

    <?xml version="1.0" encoding="utf-8"?> 
    <resources>
        <style name="MainTheme" parent="MainTheme.Base">
        </style>
        <!-- Base theme applied no matter what API -->
        <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
            <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
            <item name="windowNoTitle">true</item>
            <!--We will be using the toolbar so no need to show ActionBar-->
            <item name="windowActionBar">false</item>
            <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
            <!-- colorPrimary is used for the default action bar background -->
            <item name="colorPrimary">#2196F3</item>
            <!-- colorPrimaryDark is used for the status bar -->
            <item name="colorPrimaryDark">#1976D2</item>
            <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
            <item name="colorAccent">#FF4081</item>
            <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight and colorSwitchThumbNormal. -->
            <item name="windowActionModeOverlay">true</item>
            <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
                
        </style>
    
          <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
                <item name="colorAccent">#2196F3</item>
          </style>
    
    </resources>