question

WeiWen-3421 avatar image
0 Votes"
WeiWen-3421 asked WeiWen-3421 commented

DatePicker OK/Cancel buttons not visible on Android

I added DatePicker in my app. However, when I tested it, I found that on Android the calendar's OK/Cancel buttons were colored white and the background was also white. So the OK/Cancel buttons were not visible. Also, when I clicked a date, it was highlighted in white and this made the selected date not visible either. Is there a way to change the color of the buttons and the selected date? Do I need to create a custom renderer for Android date picker?

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

jcmanke avatar image
0 Votes"
jcmanke answered WeiWen-3421 commented

You can set the styling of the DatePicker dialog natively (without a renderer) by setting <item name="android:datePickerDialogTheme"> in your Android theme.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@jcmanke I found that the datePickerDialoTheme uses colorAccent with white color. I changed the color to another color and that solved the problem.

0 Votes 0 ·
LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered WeiWen-3421 commented

Hello,​

Welcome to our Microsoft Q&A platform!

Is there a way to change the color of the buttons and the selected date? Do I need to create a custom renderer for Android date picker?


Yes, I create a custom renderer for DatePicker in android to achieve it.

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using App117.Droid;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.DatePicker), typeof(FixedDatePickerRenderer))]
namespace App117.Droid
{
    public class FixedDatePickerRenderer : Xamarin.Forms.Platform.Android.DatePickerRenderer
    {
        public FixedDatePickerRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            //set color of selected date
            Control.SetTextColor(Android.Graphics.Color.Blue);
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.DatePicker> e)
        {
            base.OnElementChanged(e);

            //Disposing
            if (e.OldElement != null)
            {
                _element = null;
            }

            //Creating
            if (e.NewElement != null)
            {
                _element = e.NewElement;

              
               
            }

         
        }

        protected Xamarin.Forms.DatePicker _element;
        DatePickerDialog dialog;
        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
             dialog = new DatePickerDialog(Context, (o, e) =>
            {
                _element.Date = e.Date;
                ((IElementController)_element).SetValueFromRenderer(VisualElement.IsFocusedPropertyKey, false);
            }, year, month, day);

            dialog.SetButton((int)DialogButtonType.Positive, Context.Resources.GetString(global::Android.Resource.String.Ok), OnOk);
            dialog.SetButton((int)DialogButtonType.Negative, Context.Resources.GetString(global::Android.Resource.String.Cancel), OnCancel);

            dialog.Show();
            //set OK/Cancel buttons color
            dialog.GetButton((int)DialogButtonType.Positive).SetTextColor(Android.Graphics.Color.Green);
            dialog.GetButton((int)DialogButtonType.Negative).SetTextColor(Android.Graphics.Color.Purple);
            // CancelButton.SetTextColor(Android.Graphics.Color.HotPink);
            return dialog;
        }

        private void OnCancel(object sender, DialogClickEventArgs e)
        {
            _element.Unfocus();
            //((FixedDatePicker) _element)?.CallOnCancel();
        }
        private void OnOk(object sender, DialogClickEventArgs e)
        {
            //need to set date from native control manually now
            _element.Date = ((DatePickerDialog)sender).DatePicker.DateTime;
            _element.Unfocus();
            //((FixedDatePicker)_element)?.CallOnOk();
        }

    }

}



119740-image.png

119750-image.png

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (32.0 KiB)
image.png (5.4 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@LeonLu-MSFT Your method works, although a little more complicated than @jcmanke 's.

0 Votes 0 ·

Becuase your answer is Is there a way to change the color of the buttons and the selected date? , So, I think custom renderer is better

0 Votes 0 ·

Your answer is certainly better when it comes to style the two buttons and the highlighted date each to different colors, and it is more stylish. However, the most important thing for me is to make the buttons and the highlighted date visible. I am sorry I didn't make it clear and I also thought about using the more complicated renderer method. I would like to mark your and @jcmanke's answers as accepted answers, but I was only allowed to pick one.

0 Votes 0 ·