/ Picker

Android custom view that uses ruler for picking the number from given range

Android custom view that uses ruler for picking the number from given range

Android Ruler Picker

Android custom view that uses ruler for picking the number from given range.

Screenshots:

Sample 1 Sample 2
ruler-view-profile-demo-small ruler-view-demo-small

Features:

  • Easy to integrate. All you have to do is add the view into your XML and listen for the value changes.
  • Highly customizable. Change width, height, color, distance between indicators. Change the color and sze of the texts in the ruler in XML or dynamically from your java or kotlin code.
  • Extremely lightweight 🏋.

How to use this library?

  • Gradle dependency:

    • Add below dependency into your build.gradle file.
      compile 'com.kevalpatel2106:ruler-picker:1.0'
      
    • For other build systems see Import.md.
  • Add RulerValuePicker inside your XML layout.

<com.kevalpatel2106.rulerpicker.RulerValuePicker
    android:id="@+id/ruler_picker"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/holo_orange_dark"
    app:indicator_color="@android:color/white"
    app:indicator_interval="14dp"
    app:indicator_width="2dp"
    app:max_value="120"
    app:min_value="35"
    app:notch_color="@android:color/white"
    app:ruler_text_size="6sp"/>

  • Library provides XML attributes to customize the RulerValuePicker or you can customize it dynamically using Java/Kotlin code.
Attribute Type Java/Kotlin Description
indicator_color Color setIndicatorColor() Change the color of the indicator in the ruler.
indicator_interval Dimensions setIndicatorIntervalDistance() Change the distance between two indicators in the ruler.
indicator_width Dimensions setIndicatorWidth() Change the width (thickness) of the indicator.
notch_color Color setNotchColor() Change the color off the notch at the top of the ruler.
ruler_text_size Dimensions setTextSize() Change the size of the text that displays the values in the ruler.
ruler_text_color Color setTextColor() Change the color of the text that displays the values in the ruler.
long_height_height_ratio Fraction setIndicatorHeight() Change the height of the long indicator. The value is between 0 to 1 where 1 indicates the height of the ruler. This value must be greater than or equal to long_height_height_ratio.
short_height_height_ratio Fraction setIndicatorHeight() Change the height of the short indicator. The value is between 0 to 1 where 1 indicates the height of the ruler. This value must be less than or equal to short_height_height_ratio.
max_value Integer setMinMaxValue() Maximum possible value to display in the ruler. This value must be greater than min_value.
min_value Integer setMinMaxValue() Minimum possible value to display in the ruler. This value must be greater than max_value.
  • Set the initially selected value.
rulerValuePicker.selectValue(55 /* Initial value */);
  • Set up a RulerValuePickerListener callback listener to get notify when the selected value changes. Application will receive the final selected value in onValueChange() callback.

Java:

rulerValuePicker.setValuePickerListener(new RulerValuePickerListener() {
    @Override
    public void onValueChange(final int selectedValue) {
        //Value changed and the user stopped scrolling the ruler.
        //Application can consider this value as final selected value.
    }

    @Override
    public void onIntermediateValueChange(final int selectedValue) {
        //Value changed but the user is still scrolling the ruler.
        //This value is not final value. Application can utilize this value to display the current selected value.
    }
});

Kotlin:

rulerValuePicker.setValuePickerListener(object : RulerValuePickerListener {
    override fun onValueChange(value: Int) {
        //Value changed and the user stopped scrolling the ruler.
        //You can consider this value as final selected value.
    }

    override fun onIntermediateValueChange(selectedValue: Int) {
        //Value changed but the user is still scrolling the ruler.
        //This value is not final value. You can utilize this value to display the current selected value.
    }
})

GitHub