Gathering user input is an important part of every application and with our Xamarin input controls you can do it in style. In our R2 2020 release we added a new TimePicker component to Telerik UI for Xamarin suite which will help in scenarios when users need to choose a time.
With our TimePicker for Xamarin you can allow your app users to easily pick a time within the range of a single day. The control is highly customizable to ensure consistency across the user experience of your Xamarin.Forms app. In this blog post I will get you familiar with the TimePicker control features in details. I am sure you will love it!
The sole purpose of the TimePicker control is to provide an easy and intuitive way for users to choose a time. It displays a list of time values in a popup where the individual time “elements” such as hours, minutes and seconds are visualized through spinners. What spinners are shown depends on the defined time format—we’ll look into this in the next section.
RadTimePicker supports standard as well as custom time formats—whether you need only the hours and minutes, or 12 or 24 hours format, all could be set through the SpinnerFormat property. Depending on the format you choose, the control visualizes spinner controls with prepopulated values to be picked.
In addition, through DisplayStringFormat you can apply a different format to the selected Time value when the popup is closed.
Check a quick example below on how both properties can be applied to the TimePicker control:
Here is the result on an Android emulator when the TimePicker is open as a popup and after a selection is made. For the purpose of the example I've been using a sample food delivery app.
In some cases, you may not want to show all hours of the day, for example, in the case of delivery service, it’s appropriate to show only the hours the service is available. This can be easily achieved through the MinimumTime and MaximumTime properties of the TimePicker which will allow to choose time only within the defined time range.
Let’s move on with our example and adjust min and max time values:
To illustrate the result better, I've created a short video that shows the popup with the available time values:
By default, the TimePicker shows all available values for the hours, minutes, seconds, etc. According to the scenario at hand, you may need to show only certain time values. To continue our example with the delivery service, when choosing a delivery time, it’s more convenient to show only 15 minutes intervals of each hour. This can be easily configured through the MinuteStep property of the control. HourStep and SecondStep are supported as well to give more flexibility when setting up the available time values.
Check the minute spinner now inside the popup:
Take advantage of the flexible styling API of the TimePicker control—you can modify the appearance of the popup, the spinners, header, footer, as well as the text that is displayed when time is picked. TimePicker is designed in a way that with some tweaks it can fit to any design. For detailed information on the styling capabilities of the control please refer to our documentation.
To finish the delivery app example, let's customize the TimePicker like this:
Add the referenced StaticResources to the page:
Here is the final result after completely modifying the look & feel of RadTimePicker control:
We would love to hear what you think about the Time Picker Xamarin control and how we can improve it. If you have any ideas for features to add, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.
Happy coding with our controls!
Yana Kerpecheva is a Senior Technical Support Engineer on the Telerik UI for Xamarin team. She has been working with Telerik products since 2008, when she joined the company. Apart from work, she likes skiing and travelling to new places.
Subscribe to be the first to get our expert-written articles and tutorials for developers!