How to change dialog Colors of DatePickerDialog/TimePickerDialog when Material Visual is enabled?

KaiEhret

Hi,

i was playing around with David Ortinaus "TheLittleThingsPlayground" to try out the Material Visuals.
What I noticed is, that the DatePickerDialog does not use the colorAccent defined in the styles.xml

<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#FF4081</item>
</style>

but just uses black as header color.

When i remove the Visual="Material" property from the ContentPage Tag, the picker that gets opend uses the defined Color.

So how to change the Accent Color for the DatePickerDialog (and TimePicker as well) when the Material Visual is enabled?

Thanks & Cheers

Kai

Yelinzh

The Visual property can be set to any type that implements IVisual, with the VisualMarker class providing the following IVisual properties:

• Default – indicates that the view should render using the default renderer.
• MatchParent – indicates that the view should use the same renderer as its direct parent.
• Material – indicates that the view should render using a material renderer.

Check the Tutorial and sample code.
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/material-visual
https://docs.microsoft.com/zh-cn/samples/xamarin/xamarin-forms-samples/userinterface-visualdemos/

KaiEhret

Thanks for the Links, but they don't give me any hint on how to customize the color of the DatePickerDialog when using Visual="Material" which I wan't to do to have consistent look of the UI Elements on the Page.

From what I learned via google research it that it should be possible to customize the color of the DatePickerDialog by creating a Style in the styles.xml file in the Android Project but it seems like this style isn't working anymore when using a Material Renderer. I guess the parent property of the style needs to be set to something else but I have no idea to which value...

Yelinzh

To set style for datePickerDialogThemes, you should set Visual to Default. Default indicates that the views should render using the default renderer, it'll renderer the view in native style. But for Visual.Material, the views will render material style. The style code set for the views in styles.xml will not be called.

<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#FFFF00</item>
</style>

KaiEhret

I understud that I could use Visual="Default" to have the DatePicker using the Style "AppCompatDialogStyle" but in that case i lose the Material Style of the control itself.

I just created an Image to show what I want to Achive

Don't get me wrong. I don't insist on the "style" Tag, I'm just looking for a Way to change the Dialogs AccentColor when using Material Visual.

CamiloGomez

@KaiEhret did you find how to do that?

KaiEhret

The only workaround I found at this time was to create a custom control with a custom Render and to use the context from the constructor and pass it to the new DatePickerDialog called in CreateDatePickerDialog. For whatever reason this was working to use the color defined in the styles

CustomMaterialDatePicker.cs

namespace App.Common.Controls
{
    public class CustomMaterialDatePicker : DatePicker
    {
        public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(CustomMaterialDatePicker), default(string));

        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

        public static readonly BindableProperty TitleColorProperty = BindableProperty.Create(nameof(TitleColor), typeof(Color), typeof(CustomMaterialDatePicker), Color.Black);

        public Color TitleColor
        {
            get { return (Color)GetValue(TitleColorProperty); }
            set { SetValue(TitleColorProperty, value); }
        }
    }
}

CustomMaterialDatePickerRenderer.cs

[assembly: ExportRenderer(typeof(CustomMaterialDatePicker), typeof(CustomMaterialDatePickerRenderer))]
namespace App.Droid.CustomRenderer
{
    public class CustomMaterialDatePickerRenderer : MaterialDatePickerRenderer
    {
        private readonly Context _context;
        private DatePickerDialog _dialog;

        public CustomMaterialDatePickerRenderer(Context context) : base(context)
        {
            _context = context;
        }

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

            if (e.NewElement is CustomMaterialDatePicker customMaterialDatePicker)
            {
                Control.EditText.Hint = customMaterialDatePicker.Title;
                Control.HintEnabled = true;
                Control.EditText.SetHintTextColor(customMaterialDatePicker.TitleColor.ToAndroid());
            }
        }

        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
            _dialog = new DatePickerDialog(_context, (o, e) =>
            {
                Element.Date = e.Date;
                ((IElementController)Element).SetValueFromRenderer(Xamarin.Forms.VisualElement.IsFocusedPropertyKey, false);
                Control.ClearFocus();

                _dialog = null;
            }, year, month, day);

            return _dialog;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CustomMaterialDatePicker.DateProperty.PropertyName || e.PropertyName == CustomMaterialDatePicker.FormatProperty.PropertyName)
            {
                SetDate(Element.Date);
            }
        }

        void SetDate(DateTime date)
        {
            Control.EditText.Text = date.ToString(Element.Format);
        }
    }
}