Xamarin.Forms Timepicker IsVisible property vs. Custom Renderer

Question

Within Xamarin.Forms, I use a TimePicker control to let the user pick a time for scheduling purposes. I use a custom renderer for this purpose, because I need to set the Minute Interval to e.g. 30 minutes and the 24-hour clock. This all works perfect, except for styling issues. My TimePicker needs to be shown without a border on the label element (I don't really care about the style from the dialog)

Native Implementation from iOS causes the TimePicker to appear with a full border around. Native Implementation from Android causes the TimePicker to appear with a bottom-border.

Because Xamarin.Forms TimePicker does not have a border property and both Custom Renderers I created are unable to hide the border, I've chosen to initially hide the TimePicker by setting the property IsVisible=false and show a label control instead. This works as desired for the style issue, but setting this property causes the Android implementation to omit the Interval and 24-hour settings. The iOS implementation works as desired.

Any suggestions on how to resolve this? Seems like an Android bug or undesired implementation here, but still... Only other option I see would be to create my own implementation of a picker, which is possible and not hard, but not my first choice...

Answer 1

I had an implementation of this you can try with this approach:

using Android.Views;
using Android.Widget;
using Android.Content;
using Android.App;
using Android.Runtime;

[assembly: ExportRenderer (typeof (Xamarin.Forms.TimePicker), typeof (CustomTimePicker))]

namespace Consulta_Medica_Medico.Droid
{
    public class CustomTimePicker : TimePickerRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<Xamarin.Forms.TimePicker> e)
        {
            base.OnElementChanged (e);

            TimePickerDialogIntervals timePickerDlg = new TimePickerDialogIntervals (this.Context, 
                new EventHandler<TimePickerDialogIntervals.TimeSetEventArgs> (UpdateDuration), 
                Element.Time.Hours, Element.Time.Minutes, true);

            var control = new EditText (this.Context);
            control.Focusable = false;
            control.FocusableInTouchMode = false;
            control.Clickable = false;
            control.Click += (sender, ea) => timePickerDlg.Show ();
            control.Text = Element.Time.Hours.ToString ("00") + ":" + Element.Time.Minutes.ToString ("00"); 

            SetNativeControl (control);
        }

        void UpdateDuration(object sender, Android.App.TimePickerDialog.TimeSetEventArgs e)
        {
            Element.Time = new TimeSpan (e.HourOfDay, e.Minute, 0);
            Control.Text = Element.Time.Hours.ToString ("00") + ":" + Element.Time.Minutes.ToString ("00"); 
        }
    }

    public class TimePickerDialogIntervals : TimePickerDialog
    {

        public static int TimePickerInterval = App.curUser.TimeInterval.Minutes;
        //private bool _ignoreEvent = false;

        public TimePickerDialogIntervals(Context context, 
            EventHandler<TimePickerDialog.TimeSetEventArgs> callBack, int hourOfDay, int minute, bool is24HourView)
            : base(context, (sender, e) => {

                try{

                    switch (App.curUser.TimeInterval.Minutes) {
                    case 15:
                        TimePickerInterval = 15;
                        callBack (sender, new TimePickerDialog.TimeSetEventArgs (e.HourOfDay, e.Minute * TimePickerInterval));
                        break;
                    case 20:
                        TimePickerInterval = 20;
                        callBack (sender, new TimePickerDialog.TimeSetEventArgs (e.HourOfDay, e.Minute * TimePickerInterval));
                        break;
                    case 30:
                        TimePickerInterval = 30;
                        callBack (sender, new TimePickerDialog.TimeSetEventArgs (e.HourOfDay, e.Minute * TimePickerInterval));
                        break;
                    case 45:
                        TimePickerInterval = 45;
                        callBack (sender, new TimePickerDialog.TimeSetEventArgs (e.HourOfDay, e.Minute * TimePickerInterval));
                        break;
                    case 0:
                        callBack (sender, new TimePickerDialog.TimeSetEventArgs (e.HourOfDay, e.Minute));
                        break;
                    }

                }

                catch (Exception ex){
                    Console.WriteLine(ex.Message);
                }

            }, hourOfDay, TimePickerInterval == 0 ? minute : minute/TimePickerInterval, is24HourView)
        {
        }

        protected TimePickerDialogIntervals(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
        {
        }

        public override void SetView(Android.Views.View view)
        {
            SetupMinutePicker (view);
            base.SetView(view);
        }

        void SetupMinutePicker (Android.Views.View view)
        {
            var numberPicker = FindMinuteNumberPicker (view as ViewGroup);
            if (numberPicker != null) {
                numberPicker.MinValue = 0;
                if (App.curUser.TimeInterval.Minutes != 0) {
                    numberPicker.MaxValue = (60 / App.curUser.TimeInterval.Minutes) - 1;
                    if(App.curUser.TimeInterval.Minutes == 45)
                        numberPicker.MaxValue = 3;
                } else {
                    numberPicker.MaxValue = 0;
                }

                switch (App.curUser.TimeInterval.Minutes) {
                case 15:
                    numberPicker.SetDisplayedValues (new String[] {"00","15","30","45"});
                    break;
                case 20:
                    numberPicker.SetDisplayedValues (new String[] {"00","20","40"});
                    break;
                case 30:
                    numberPicker.SetDisplayedValues (new String[] {"00","30"});
                    break;
                case 45:
                    numberPicker.SetDisplayedValues (new String[] {"00","15","30","45"});
                    break;
                case 0:
                    numberPicker.SetDisplayedValues (new String[] {"00"});
                    break;
                }
            }
        }

        protected override void OnCreate (Android.OS.Bundle savedInstanceState)
        {
            base.OnCreate (savedInstanceState);
            GetButton((int)DialogButtonType.Negative).Visibility = Android.Views.ViewStates.Gone;
            this.SetCanceledOnTouchOutside (false);

        }

        private NumberPicker FindMinuteNumberPicker(ViewGroup viewGroup)
        {
            for (var i = 0; i < viewGroup.ChildCount; i++)
            {
                var child = viewGroup.GetChildAt(i);
                var numberPicker = child as NumberPicker;
                if (numberPicker != null)
                {
                    if (numberPicker.MaxValue == 59)
                    {
                        return numberPicker;
                    }
                }

                var childViewGroup = child as ViewGroup;
                if (childViewGroup != null)
                {
                    var childResult = FindMinuteNumberPicker (childViewGroup);
                    if(childResult !=null)
                        return childResult;
                }
            }

            return null;
        }
    }
}