Pick a Time Quickly and Easily with Our New Xamarin TimePicker Control

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!

Pick a Time

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.

Choose the Time Format

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:

<telerikInput:RadTimePicker x:Name="timePicker"
                    SpinnerFormat="HH:mm"
                    DisplayStringFormat="hh:mm tt" />

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.

Apply Min/Max Time Values

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:

<telerikInput:RadTimePicker x:Name="timePicker"
                    SpinnerFormat="HH:mm"
                    DisplayStringFormat="hh:mm tt"
                    MinimumTime="11:00"
                    MaximumTime="22:00" />

To illustrate the result better, I've created a short video that shows the popup with the available time values:

Choose the Time Intervals

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.

<telerikInput:RadTimePicker x:Name="timePicker"
                    SpinnerFormat="HH:mm"
                    DisplayStringFormat="hh:mm tt"
                    MinimumTime="11:00"
                    MaximumTime="22:00"
                    MinuteStep="15" />

Check the minute spinner now inside the popup:

Style it per Your Own Requirements

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:

<telerikInput:RadTimePicker x:Name="timePicker" Grid.Row="1" Grid.Column="1"
                    SpinnerFormat="HH:mm"
                    DisplayStringFormat="hh:mm tt"
                    MinimumTime="11:00" MaximumTime="22:00"
                    MinuteStep="15"
                    SpinnerHeaderStyle="{StaticResource spinnerHeaderStyle}"
                    SpinnerStyle="{StaticResource spinnerStyle}"
                    SelectionHighlightStyle="{StaticResource selectionHighlightStyle}">
    <telerikInput:RadTimePicker.SelectorSettings>
        <telerikInput:PickerPopupSelectorSettings PopupOutsideBackgroundColor="#D9D9D9CC"
                        PopupViewStyle="{StaticResource popupViewStyle}"
                        HeaderStyle="{StaticResource headerStyle}"
                        HeaderLabelText="Choose Delivery Time"
                        HeaderLabelStyle="{StaticResource headerLabelStyle}"
                        FooterStyle="{StaticResource footerStyle}"
                        AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                        CancelButtonStyle="{StaticResource cancelButtonStyle}"/>
    </telerikInput:RadTimePicker.SelectorSettings>
</telerikInput:RadTimePicker>

Add the referenced StaticResources to the page:

<ResourceDictionary>
    <Style TargetType="Label" x:Key="spinnerHeaderStyle">
        <Setter Property="TextColor" Value="#7F7F7F"/>
        <Setter Property="FontAttributes" Value="Bold"/>
        <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
        <Setter Property="VerticalOptions" Value="FillAndExpand"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="VerticalTextAlignment" Value="Center"/>
    </Style>
     
    <Style TargetType="telerikDataControls:RadSpinner" x:Key="spinnerStyle">
        <Setter Property="ItemStyle">
            <Setter.Value>
                <Style TargetType="telerikDataControls:SpinnerItemView">
                    <Setter Property="TextColor" Value="#797979" />
                    <Setter Property="BackgroundColor" Value="#F2F2F2" />
                    <Setter Property="CornerRadius" Value="10" />
                    <Setter Property="Margin" Value="6, 4" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="SelectedItemStyle">
            <Setter.Value>
                <Style TargetType="telerikDataControls:SpinnerItemView">
                    <Setter Property="TextColor" Value="#00B5DC" />
                    <Setter Property="BackgroundColor" Value="#E4F3F9" />
                    <Setter Property="CornerRadius" Value="10" />
                    <Setter Property="Margin" Value="6, 4" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style TargetType="telerikPrimitives:RadBorder" x:Key="selectionHighlightStyle">
        <Setter Property="BorderColor" Value="#00B5DC"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="0,6,0,6"/>
        <Setter Property="HeightRequest" Value="40"/>
        <Setter Property="VerticalOptions" Value="Center"/>
    </Style>
     
    <Style TargetType="Label" x:Key="displayLabelStyle">
        <Setter Property="TextColor" Value="Black"/>
        <Setter Property="VerticalTextAlignment" Value="Center"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="HeightRequest" Value="50"/>
    </Style>
     
    <Style TargetType="Label" x:Key="placeholderLabelStyle">
        <Setter Property="TextColor" Value="#4A4949"/>
        <Setter Property="VerticalTextAlignment" Value="Center"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="HeightRequest" Value="50"/>
    </Style>
     
    <Style TargetType="telerikInput:PickerPopupHeaderView" x:Key="headerStyle">
        <Setter Property="BackgroundColor" Value="#00B5DC"/>
        <Setter Property="HeightRequest" Value="60"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
        <Setter Property="VerticalOptions" Value="FillAndExpand"/>
    </Style>
 
    <Style TargetType="Label" x:Key="headerLabelStyle">
        <Setter Property="TextColor" Value="White"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
        <Setter Property="VerticalOptions" Value="Center"/>
        <Setter Property="FontSize" Value="Medium"/>
    </Style>
     
    <Style TargetType="telerikInput:PickerPopupFooterView" x:Key="footerStyle">
        <Setter Property="BackgroundColor" Value="Transparent"/>
    </Style>
     
    <Style TargetType="telerikInput:PickerPopupContentView" x:Key="popupViewStyle">
        <Setter Property="BackgroundColor" Value="White"/>
        <Setter Property="WidthRequest" Value="270"/>
    </Style>
     
    <Style TargetType="Button" x:Key="acceptButtonStyle">
        <Setter Property="BackgroundColor" Value="Transparent"/>
        <Setter Property="Text" Value="OK"/>
        <Setter Property="TextColor" Value="#00B5DC"/>
    </Style>
     
    <Style TargetType="Button" x:Key="cancelButtonStyle">
        <Setter Property="BackgroundColor" Value="Transparent"/>
        <Setter Property="Text" Value="X"/>
        <Setter Property="TextColor" Value="#00B5DC"/>
    </Style>
</ResourceDictionary>

Here is the final result after completely modifying the look & feel of RadTimePicker control:

Let Us Know What You Think

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.

Don’t forget to check out the various demos of the control in our SDK Sample Browser and the Telerik UI for Xamarin Demos application.

If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.

Happy coding with our controls!