Forum Xamarin.Forms

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


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>

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



  • JarvanJarvan Member, Xamarin Team Xamurai

    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.

  • KaiEhretKaiEhret Member ✭✭

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

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited September 2019

    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>
  • KaiEhretKaiEhret Member ✭✭
    edited October 2019

    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.

Sign In or Register to comment.