Skip to end of metadata
Go to start of metadata

Android Numeric Stepper is an advanced editor which provides a user interface for incrementing or decrementing a value. A stepper displays two buttons, one with a minus symbol and one with a plus symbol. A stepper is only used in situations where you need to adjust a value by a small amount, which gives a better user experience then using an EditText. Combined with the MVVM and data binding support, you can add a numeric stepper to your apps in just a few line of code.

On this page:

Adding NumericStepper Control to View

Same with the native approach, you can define NumericStepper easily through the layout resource file.


Alternatively, if you prefer to add the numeric stepper control at runtime, you can instantiate NumericStepper programmatically then add it to the view's hierarchy. Here's the code example.


Binding to NumericStepper Control

Binding a value to the numeric stepper is simple and straightforward. Consider that you have a simple view model with the following definition:

The above example shows how to define a simple reservation view model which contains an integer property which will be bound to NumericStepper.

Once you have the ViewModel ready, all you need to do is creating a binding provider that contains the binding information between the ViewModel and the View. See the example below.

The above code is pretty self explanatory. It binds the Quantity property of the ViewModel to a view named Stepper. With such minimal definition, you will now see the numeric stepper completely bound to the ViewModel.

For more information about data binding in Crosslight, see Understanding Binding Providers.

Customizing NumericStepper Control

Most of the NumericStepper's behaviour are customizable. You can easily customize it via layout resource or programmatically at runtime. The following table lists the supported XML attributes.

Attribute NameFormatDescription
android:valueintegerSets the initial value.
crosslight:minValueintegerSets the minimum value of stepper control.
crosslight:maxValueintegerSets the maximum value of stepper control.
crosslight:stepintegerSets the increment or decrement interval.

 

To find out the complete properties and methods of the control, see NumericStepper class.

Samples

Check out the comprehensive control samples here: Dialog Presenter Samples. Pay attention to the Add to Cart menu in the sample. Prior to running the samples, make sure to set the Android project as the startup project.