Simplifying Number Data Entry in Xamarin Applications

Developers often must create inputs for numbers in their mobile apps. In this article, learn how to easily create data entry for numbers in your cross-platform Xamarin apps with the NumericInput control in Telerik UI for Xamarin.

In every mobile developer's life there comes a moment when he needs to build an input for numbers. It could be the checkout receipt or the registration page or even a simple calculator. And you may think – wouldn’t it be great if we had a control that could handle all the hassle? To this I will say: "Let me introduce the NumericInput in Telerik UI for Xamarin."

It is a very simple control, yet easily customizable, either by providing a ControlTemplate, or by simply tweaking its properties. It works with double values of any range, i.e. you can specify the step used to increment/decrement the value.

The component consists of two buttons and an entry. The buttons offer commands that make the NumericInput MVVM friendly. The entry allows end-users to directly type the needed value.

What is the Main Functionality of the NumericInput Control?

This component is designed to provide an option to easily select or enter a single value that fits a predefined range.

Other functionalities come in addition to this main requirement. For example, the feature to swiftly modify the text of the buttons. By setting the IncreaseButtonText and DecreaseButtonText properties, such customization can be done right away.

Allowing the end-user to change the value of the control in multiple ways could be confusing in some scenarios. Therefore, we provided the option to disable direct text input into the entry. The IsReadOnly property gets this job done in a convenient way. The property also hides the border of the entry so it looks more like a label. This should discourage the end-user from tapping it to try typing.

Using the NumericInput Control in your Xamarin Apps

Let’s see how useful  the features of the component can be. Let’s pretend we must create a calorie calculator application with the following requirements.

This app should allow the end-user to enter:

• Age
• Height
• Weight
• Number of sport activities per week

Based on this information, an algorithm should be used to calculate the average calories needed per day. However, the algorithm has specific requirements for the range as well as for the accuracy of the parameters it works with:

• Age { range: [1 – 52], accuracy: 1 }
• Height { range: [4 – 7], accuracy: 0.1 }
• Weight { range: [150 – 210], accuracy: 10 }
• Number of sport activities per week { range: [1 – 5], accuracy: 1 }

Lastly, the design of the separate input components should be different to avoid confusion in the end-user when providing the data.

Here is how this scenario was achieved with the NumericInput. We used the Minimum and Maximum properties to define the range and the Step to set the accuracy. Finally, a custom ControlTemplate was applied to each component to fit the last requirement. Here is how the calculator looks.

The code of this setup is available in our Demo application. You can refer to the NumericInput / First Look example for more details.

Wrap-Up and Next Steps

In this blog post, we unpacked the Telerik UI for Xamarin NumericInput control. This is only one of the controls available for application development. I would encourage you check out our online documentation for more details about the suite.

If you are new or have not tried our Xamarin suite, you can do so by clicking on the button below. 

Download Telerik UI for Xamarin

Additionally, we are excited to hear what you think about it to help us improve, so feel free to share your feedback through our Forums or through the Feedback Portal.

Thanks for reading and I hope you find the new NumericInput control valuable to your projects.