B4A Library Ruler Picker

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

Easy to integrate:
  • Add the attached libraries to your Additional Library folder. Refresh the library pane and select the library.
  • Add the view in your designer as a custom view.
  • Add properties, functions in your code
  • Add events in your code to listen for value changes.
  • A sample project is included too.
Highly customizable:
  • Change width, height, color, distance between indicators.
  • Change the color and size of the texts in the ruler dynamically from your code.
MinSdkVersion: 14

An Android library written by kevalpatel2106.
Source: https://github.com/kevalpatel2106/android-ruler-picker

b4arulerpicker.gif


Library docs (thanks to @Informatix for the libdoc-generator):
B4ARulerPicker

Author: Github: kevalpatel2106, Wrapped by: moster67/Mikael Osterhed
Version: 0.2
  • B4ARulerPicker
    • Events:
      • OnIntermediateValueChanged (value As Int)
      • OnValueChanged (value As Int)
    • Fields:
      • ba As BA
    • Functions:
      • BringToFront
      • DesignerCreateView (base As Panel, lw As Label, props As Map)
      • GetCurrentValue As Int
        get current value
      • GetIndicatorIntervalWidth As Int
        Get distance between two indicator.
      • GetIndicatorWidth As Float
        Width of the indicator.
      • GetLongIndicatorHeightRatio As Float
        Ratio of long indicator height to the ruler height.
      • GetRulerTextSize As Float
        Size of the text of ruler in pixels.
      • GetShortIndicatorHeightRatio As Float
        Ratio of short indicator height to the ruler height.
      • Initialize (arg1 As String)
      • Invalidate
      • Invalidate2 (arg0 As android.graphics.Rect)
      • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
      • IsInitialized As Boolean
      • RemoveView
      • RequestFocus As Boolean
      • SendToBack
      • SetBackgroundImage (arg0 As android.graphics.Bitmap) As BitmapDrawable
      • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
      • SetIndicatorHeight (longHeightRatio As Float, shortHeightRatio As Float)
        Set the height of the long and short indicators.
        -longHeightRatio: Ratio of long indicator height to the ruler height. This value must be between 0 to 1.
        The value should greater than mShortIndicatorHeight. Default value is 0.6 (i.e. 60%). If the value is 0, indicator
        won't be displayed. If the value is 1, indicator height will be same as the ruler height.
        -shortHeightRatio: Ratio of short indicator height to the ruler height. This value must be between 0 to 1.
        The value should less than mLongIndicatorHeight. Default value is 0.4 (i.e. 40%). If the value is 0, indicator
        won't be displayed. If the value is 1, indicator height will be same as the ruler height.
      • SetIndicatorIntervalDistance (indicatorIntervalPx As Int)
        Set the spacing between two vertical lines/indicators. Default value is 14 pixels.
        Distance in pixels. This cannot be negative number or zero.
        ex: 14dip
      • SetIndicatorWidth (width As Int)
        Set the width of the indicator line in the ruler
        Use dip (ex: 2dip)
      • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
      • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
      • setMinMaxValue (minValue As Int, maxValue As Int)
        Set the maximum value to display on the ruler. This will decide the range of values and number of indicators that ruler will draw.
        minValue - Value to display at the left end of the ruler. This can be positive, negative or zero. Default minimum value is 0.
        maxValue - Value to display at the right end of the ruler. This can be positive, negative or zero. This value must be greater than min value. Default minimum value is 100.
      • setRulerTextColor As Int
      • SetRulerTextSize (textSize As Int)
        Set the size of the text that displays the values in the ruler.
        (Text size dimension)
      • SetRulerValue (value As Int)
        set ruler (initial) value
      • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • Properties:
      • Background As android.graphics.drawable.Drawable
      • Color As Int [write only]
      • Enabled As Boolean
      • Height As Int
      • IndicatorColor As Int
        Color integer value of the indicator color in the ruler.
      • Left As Int
      • MaxValue As Int [read only]
        Get the maximum value displayed on the ruler.
      • MinValue As Int [read only]
        Get the minimum value displayed on the ruler.
      • NotchColor As Int
        Change the color off the notch at the top of the ruler.
      • Padding As Int()
      • Parent As Object [read only]
      • RulerTextColor As Int [write only]
        Change the color of the text that displays the values in the ruler.
      • Tag As Object
      • Top As Int
      • Visible As Boolean
      • Width As Int

Hope you like it.
 

Attachments

  • libs.zip
    34.8 KB · Views: 287
  • B4ARulerPickerSample.zip
    34.9 KB · Views: 307
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Very nice, I saw her on GitHub last week and I had the crazy idea to do it again in B4A.
But then I thought about it and I did well, you did for me :p
 

moster67

Expert
Licensed User
Longtime User
Well, I am "cheating" since I am only wrapping the code. :)
I wish I was as good as you are so I could code it directly in B4A but unfortunately that is beyond my (current) skills :(
On the other hand, why reinvent the wheel? :D
 

Star-Dust

Expert
Licensed User
Longtime User
I agree with you because it reinvents something that already exists.

The only reason could be to understand how it works and make it a better one, perhaps shock-absorbing, of a resistant and soft, biodegradable and possibly edible material :p

i joke ;)
 

moster67

Expert
Licensed User
Longtime User
The only reason could be to understand how it works and make it a better one, perhaps shock-absorbing, of a resistant and soft, biodegradable and possibly edible material
-Start Offtopic-
That is not stupid.
One of the principle ideas of patents (industrial property) is just that. This is the reason why a patent can only be in force for 20 years before it becomes public domain...in this way, one encourages new research and to always make better products.
-end of OffTopic-
 

derez

Expert
Licensed User
Longtime User
Anyway, nothing wrong in having numerous options...
That is why I added the link so people can see one of the other options.

They are different, yours is a wheel, that of GITHUB is a linear meter.
The "wheel" is just an illusion, if you don't use the cover image it looks "linear".
As it is a class - you can control it yourself by modifications.
 

Star-Dust

Expert
Licensed User
Longtime User
The "wheel" is just an illusion, if you don't use the cover image it looks "linear".
As it is a class - you can control it yourself by modifications.
Obviously it's an illusion, I never imagined that the screen would bend to become curved :p

I meant that the final graphic result is different, we do not try to simulate a wheel but a linear meter.
Then the code to achieve that result could be similar, as well as many other occasions. ;)

I've seen at least a dozen bookstores for reading QR and barcodes, and many Dialogs library, ProgressBar, etc ... I think it is quite normal :)
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
Obviously it's an illusion, I never imagined that the screen would bend to become curved :p

I meant that the final graphic result is different, we do not try to simulate a wheel but a linear meter.
Then the code to achieve that result could be similar, as well as many other occasions. ;)

I've seen at least a dozen bookstores for reading QR and barcodes, and many Dialogs library, ProgressBar, etc ... I think it is quite normal :)
if you don't use the cover image it looks "linear".
E' sufficiente togliere l'immagine sovrastante ed ottieni il normale metro.

Inoltre, essendo una classe, puoi modificarla a tuo piacimento.

E' vero che ci sono molte librerie simili tra loro ma alcune di queste sono appunto classi B4a - B4X.

----

Moreover, it is a class, so you can modify it as you wish.

It is true that there are many libraries similar to each other but some of these are B4a - B4X classes (source code) !
 

derez

Expert
Licensed User
Longtime User
I have checked my class and found that there is a problem when using resumable subs and sdk version 23+ , I'm working on it ...
 

Star-Dust

Expert
Licensed User
Longtime User
I have checked my class and found that there is a problem when using resumable subs and sdk version 23+ , I'm working on it ...
This would be a serious problem, if it becomes better confirmed to report it to Erel in the appropriate section
 

derez

Expert
Licensed User
Longtime User
I have found the problem - a memory problem due to the size of the canvas.
It works as long as the width of the view is not more than 59%x (probably depends on the device). See updated version in the thread.
 

Erel

B4X founder
Staff member
Licensed User
Longtime User

Star-Dust

Expert
Licensed User
Longtime User
Well, I am "cheating" since I am only wrapping the code. :)
I wish I was as good as you are so I could code it directly in B4A but unfortunately that is beyond my (current) skills :(
On the other hand, why reinvent the wheel? :D
@moster67 We lit a fuse .. a race broke out :D

@derez also the Erel library developed for XUI resembles yours :p
 
Top