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

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.

 

[Star-Dust]

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

 

[moster67]

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?

 

[Star-Dust]

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

i joke

 

[moster67]

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]

Check this - not based on any external library, been here since 11/2014... https://www.b4x.com/android/forum/threads/analogwheel.46665/

 

[moster67]

been here since 11/2014

Nice indeed.
By now there are so many libraries/wrappers available for B4A so it is difficult to remember them all.
Anyway, nothing wrong in having numerous options...

 

[Star-Dust]

Check this - not based on any external library, been here since 11/2014... https://www.b4x.com/android/forum/threads/analogwheel.46665/

They are different, yours is a wheel, that of GITHUB is a linear meter.

see original image:

 

[derez]

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]

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

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

 

[LucaMs]

Obviously it's an illusion, I never imagined that the screen would bend to become curved

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]

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]

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]

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]

Implementation based on XUI: https://www.b4x.com/android/forum/threads/b4x-xui-b4xrulerpicker.92453/

On the other hand, why reinvent the wheel?

The advantages of implementing it in B4X directly are:

1. Using XUI you can make it cross platform.
2. You can make most of the development in B4J which is a bit more convenient.
3. Other developers can modify the code as they need. This also means that it is less important to add many properties.

 

[Star-Dust]

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?

@moster67 We lit a fuse .. a race broke out

@derez also the Erel library developed for XUI resembles yours