How to change visual material DatePickerDialog and TimePickerDialog background color in xamarin forms

Question

We are using the visual material DatePicker and TimePicker for our project.

<DatePicker  x:Name="dateIn" Visual="Material" WidthRequest="1" Format="dd/MM/yyyy" Opacity="0" />

How to change visual material DatePickerDialog and TimePickerDialog background color in xamarin forms(Android and IOS)?

Answer 1

Changing the background color of the dateTimepicker when visual is set to Material only worked for me when I overwrite the XamarinFormsMaterialTheme. In styles.xml add this:

<style name="XamarinFormsMaterialTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="materialButtonStyle">@style/XamarinFormsMaterialButton</item>
    <item name="materialOutlinedButtonStyle">@style/XamarinFormsMaterialButtonOutlined</item>
    <item name="materialSliderStyle">@style/XamarinFormsMaterialSlider</item>
    <item name="materialProgressBarHorizontalStyle">@style/XamarinFormsMaterialProgressBarHorizontal</item>
    <item name="materialProgressBarCircularStyle">@style/XamarinFormsMaterialProgressBarCircular</item>
    <item name="materialCheckBoxStyle">@style/XamarinFormsMaterialCheckBox</item>
    <item name="android:datePickerDialogTheme">@style/MaterialDialogStyle</item>
</style>

<style name="MaterialDialogStyle" parent="Theme.MaterialComponents.DayNight.Dialog">
    <item name="colorAccent">#FF4081</item></style>

Have not figured out the timepicker yet, but this might be something to explore further

Answer 2

Android

You have to add a couple of lines in the styles.xml file:

<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
<item name="android:timePickerStyle">@style/AppCompatDialogStyle</item>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
    <item name="android:background">#CCA3F4(YOUR COLOR HERE)</item>
</style>

Whole file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowActionBar">true</item>
    </style>

<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 https://aka.ms/material-colors -->
    <!-- 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>
    <item name="android:timePickerStyle">@style/AppCompatDialogStyle</item>
    <item name="android:textAllCaps">false</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
    <item name="android:background">#CCA3F4</item>
</style>
</resources>

iOS:

I created a custom renderer where I added a UIDatePicker with the desired background color:

using System;
using carstuff.iOS.Renderers;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

[assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(DateTimeRenderer))]
namespace carstuff.iOS.Renderers
{
    public class DateTimeRenderer : DatePickerRenderer
    {
        private UIDatePicker _picker;
        bool _disposed;

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

        if (Control != null)
        {
            _picker = new UIDatePicker { Mode = UIDatePickerMode.Date, TimeZone = new NSTimeZone("UTC") };
            
            if (UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
            {
                _picker.PreferredDatePickerStyle = UIKit.UIDatePickerStyle.Wheels;
            }

            _picker.BackgroundColor = Color.AliceBlue.ToUIColor(); // YOUR COLOR HERE
            _picker.ValueChanged -= HandleValueChanged;
            _picker.ValueChanged += HandleValueChanged;
            Control.InputView = _picker;
        }
    }

    void HandleValueChanged(object sender, EventArgs e)
    {
        if (Element != null && Element.OnThisPlatform().UpdateMode() == UpdateMode.Immediately)
        {
            UpdateElementDate();
        }
    }

    void UpdateElementDate()
    {
        Element?.SetValueFromRenderer(Xamarin.Forms.DatePicker.DateProperty, _picker.Date.ToDateTime().Date);
    }

    protected override void Dispose(bool disposing)
    {
        if (_disposed)
            return;

        _disposed = true;

        if (disposing)
        {

            if (_picker != null)
            {
                _picker.RemoveFromSuperview();
                _picker.ValueChanged -= HandleValueChanged;
                _picker.Dispose();
                _picker = null;
            }
        }

        base.Dispose(disposing);
    }
}
}