Shubham Office
Shubham Office

Reputation: 13

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

Upvotes: 1

Views: 68

Answers (1)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13899

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>

Upvotes: 0

Related Questions