TimePicker with 15 minutes interval in xamarin forms - xamarin

Question

I need to set 15 minutes interval in Time Picker. I have done for iOS. But in Android it is not working.
For iOS I used following code and it is working:
public class CustomTimePickerRenderer : TimePickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
{
 base.OnElementChanged(e);
 var view = (TimePicker)Element;
if (view != null)
{
 var timePicker = (UIDatePicker)Control.InputView;
timePicker.MinuteInterval = 15;
 }
}
}
For Andoroid I am trying with following code:
public class CustomTimePickerRenderer : TimePickerRenderer
{
Context _context;
public CustomTimePickerRenderer(Context context) : base(context)
{
_context = context;
}
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 const int TimePickerInterval = 15;
private bool _ignoreEvent = false;
public TimePickerDialogIntervals(Context context, EventHandler<TimePickerDialog.TimeSetEventArgs> callBack, int hourOfDay, int minute, bool is24HourView)
: base(context, (sender, e) => {
callBack(sender, new TimePickerDialog.TimeSetEventArgs(e.HourOfDay, e.Minute * TimePickerInterval));
}, hourOfDay, 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;
numberPicker.MaxValue = 3;
numberPicker.SetDisplayedValues(new String[] { "00", "15", "30", "45" });
}
}
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;
}
}
But Android code is not working. I think the issue is with the number picker in SetupMinutePicker method. I am getting null in number picker.
Please let me know how I can fix this number picker issue or is there any alternate solution to set 15 minutes interval in time picker.

Answer 1

I have found a workaround for Android. The previous override SetView(...) method can not get the NumberPicker now, here we can change the minutes interval in override OnTimeChanged method as follow:
public override void OnTimeChanged(Android.Widget.TimePicker view, int hourOfDay, int minute)
{
if (_ignoreEvent) return;
if (minute % TimePickerInterval != 0)
{
int minuteFloor = minute - (minute % TimePickerInterval);
minute = minuteFloor + (minute == minuteFloor + 1 ? TimePickerInterval : 0);
if (minute == 60)
minute = 0;
_ignoreEvent = true;
view.CurrentMinute = (Java.Lang.Integer)minute;
_ignoreEvent = false;
}
}
The full android renderer code is as follow:
public class CustomTimePickerRenderer : 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 const int TimePickerInterval = 15;
private bool _ignoreEvent = false;
public TimePickerDialogIntervals(Context context, EventHandler<TimePickerDialog.TimeSetEventArgs> callBack, int hourOfDay, int minute, bool is24HourView)
: base(context, (sender, e) => {
callBack(sender, new TimePickerDialog.TimeSetEventArgs(e.HourOfDay, e.Minute * TimePickerInterval));
}, hourOfDay, minute / TimePickerInterval, is24HourView)
{
}
public override void OnTimeChanged(Android.Widget.TimePicker view, int hourOfDay, int minute)
{
base.OnTimeChanged(view, hourOfDay, minute);
if (_ignoreEvent) return;
if (minute % TimePickerInterval != 0)
{
int minuteFloor = minute - (minute % TimePickerInterval);
minute = minuteFloor + (minute == minuteFloor + 1 ? TimePickerInterval : 0);
if (minute == 60)
minute = 0;
_ignoreEvent = true;
view.CurrentMinute = (Java.Lang.Integer)minute;
_ignoreEvent = false;
}
}
}
The effect:

Answer 2

For me the solution from Junior Jiang did not work anymore in Xamarin.Forms 5.0. The reason for this is that the base renderer always calls its own TimePickerDialog. Fortunately you can override the necessary method.
I also changed the behaviour that the minutes jump to the next interval that is nearest to the current position. I think this is a liitle more snappy than pulling completely to the next interval. Also there was a minor calculation error on some specific values for the minute which caused a flickering of the pointer.
public class IntervalTimePickerRenderer : TimePickerRenderer
{
private Context _context;
public IntervalTimePickerRenderer(Context context) : base(context)
{
_context = context;
}
protected override TimePickerDialog CreateTimePickerDialog(int hours, int minutes)
{
return new TimePickerDialogIntervals(
Context,
UpdateDuration,
hours,
minutes,
DateFormat.Is24HourFormat(_context));
}
void UpdateDuration(object sender, TimePickerDialog.TimeSetEventArgs e)
{
Element.Time = new TimeSpan(e.HourOfDay, e.Minute, 0);
Control.Text = Element.Time.Hours.ToString("00") + ":" + Element.Time.Minutes.ToString("00");
Element.Unfocus();
}
}
public class TimePickerDialogIntervals : TimePickerDialog
{
public const int TimePickerInterval = 15;
private bool _ignoreEvent = false;
public TimePickerDialogIntervals(
Context context,
EventHandler<TimeSetEventArgs> callBack,
int hourOfDay,
int minute,
bool is24HourView)
: base(context,
(sender, e) =>
{
callBack(sender, new TimePickerDialog.TimeSetEventArgs(e.HourOfDay, e.Minute));
},
hourOfDay,
minute,
is24HourView)
{
}
public override void OnTimeChanged(Android.Widget.TimePicker view, int hourOfDay, int minute)
{
base.OnTimeChanged(view, hourOfDay, minute);
if (_ignoreEvent) return;
if (minute % TimePickerInterval != 0)
{
float minuteFactor = (float)minute / TimePickerInterval;
int intervalFactor = (int)Math.Round(minuteFactor, 0);
minute = intervalFactor * TimePickerInterval;
if (minute == 60)
{
minute = 0;
}
_ignoreEvent = true;
view.Minute = minute;
_ignoreEvent = false;
}
}
}