Skip to content

The Slider Form Cell

The slider form cell represents a key value cell in which the value is an Integer object that is controlled by a Seekbar. This cell also supports facilities to set helper or error texts. A user interacts with the cell using Seekbar.

Using the Slider Form Cell

This form cell can be used within your activity like any traditional Android view:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
        <com.sap.cloud.mobile.fiori.formcell.SliderFormCell
                    android:id="@+id/slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:displayValue="10"
                    app:endLabelEditControl="false"
                    app:endLabelText="100"
                    app:key="Estimated Distance"
                    app:label="10 miles"
                    app:maximumValue="100"
                    app:minimumValue="1"
                    app:startLabelText="1"
                    app:value="10" />

Editable and Non-Editable Modes

For the slider form cell, editable and enabled attributes are the same: a non-editable form cell is not enabled (not clickable, not focusable and 50% alpha). By default, the slider form cell is editable and enabled. You can control the editability of the cell by using XML attribute "app:editable="false", You can also fetch the view in your activity and set it to be editable:

1
2
       SliderFormCell mSliderFormCell = findViewById(R.id.slider);
       mSliderFormCell.setIsEditable(false);

For more information about the editable attribute, see FormCell.

Error and Helper Texts

To set the error and helper text on the view, enable the feature on the view by calling setErrorEnabled and setHelperEnabled respectively. You can also use "app:errorEnabled" and "app:helperEnabled" XML attributes to enable the support for these features. Once enabled, you can call setError(CharSequence) to set the error text and setHelperText to set the helper text. Once set, the error/helper text remains enabled until setErrorEnabled(false)/setHelperEnabled(false) is called.

Listening for Cell Value Changes

To listen for updates to a cell value, attach a CellValueChangeListener\ using setCellValueChangeListener:

1
2
3
4
5
6
mSliderFormCell.setCellValueChangeListener(new FormCell.CellValueChangeListener<Integer>() {
            @Override
            protected void cellChangeHandler(@NonNull Integer value) {
                // App level logic
            }
        });

Also see FormCell

Start and End Labels

The slider form cell supports two UI components known as the start and end labels. These labels are used for providing additional textual or visual aids to a user. By default, the start and end labels show the minimum and maximum values of the cell. You can replace the label text with custom text or informative icons such as volume low and volume high.

The following attributes and APIs are available to help you control different aspects of the start and end labels:

XML Attribute Java API Description
startLabelEnabled setStartLabelEnabled(boolean) Enable or disable the start label. Default: Enabled
endLabelEnabled setEndLabelEnabled(boolean) Enable or disable the end label. Default: Enabled
startLabelText setStartLabelText(CharSequence) Set the text on the start label, such as minimum possible value.
endLabelText setEndLabelText(CharSequence) Set the text on the end label, such as maximum possible value.
startLabelIcon setStartLabelIcon(@DrawableRes int) Set the icon on the start label, such as volume low control.
endLabelIcon setEndLabelIcon(@DrawableRes int) Set the icon on the end label, such as volume high control.
startLabelSingleLine setStartLabelSingleLine(boolean) Set the start label text to single line only.
endLabelBackground setEndLabelBackground(@Nullable Drawable res) Set the background of the end label. This is useful when using endLabelIcon.
endLabelEms setEndLabelEms(int) Set the Ems on the end label element. This controls the width of the end label.

Editable End Label

The end label of the cell can be converted into an editable text view to control the value of the cell using keypad. Using XML attribute "app:endLabelEditControl" or API setEndLabelEditControl(boolean), enable or disable the editability of the end label view: