B4A Library MaterialRangeBar V1.0.0

MaterialRangeBar
Version:
1.0.0

This is a wrapper for this Github-project.
  • RangeBar
    Fields:
    • ba As BA
    Methods:
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As 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 Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • 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)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • isRangeBar As Boolean
      Gets the type of the bar.

      return true if rangebar, false if seekbar.
    • setRangePinsByIndices (leftPinIndex As Int, rightPinIndex As Int)
      Sets the location of the pins according by the supplied index.
      Numbered from 0 to mTickCount - 1 from the left.

      leftPinIndex Integer specifying the index of the left pin
      rightPinIndex Integer specifying the index of the right pin
    • setRangePinsByValue (leftPinValue As Float, rightPinValue As Float)
      Sets the location of pins according by the supplied values.

      leftPinValue Float specifying the index of the left pin
      rightPinValue Float specifying the index of the right pin
    Properties:
    • Background As Drawable
    • BarColor As Int [write only]
      Set the color of the bar line and the tick lines in the range bar.

      barColor Integer specifying the color of the bar line.
    • BarWeight As Float [write only]
      Set the weight of the bar line and the tick lines in the range bar.

      barWeight Float specifying the weight of the bar and tick lines in
      px.
    • Color As Int [write only]
    • ConnectingLineColor As Int [write only]
      Set the color of the connecting line between the thumbs.

      connectingLineColor Integer specifying the color of the connecting
      line.
    • ConnectingLineWeight As Float [write only]
      Set the weight of the connecting line between the thumbs.

      connectingLineWeight Float specifying the weight of the connecting
      line.
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • LeftIndex As Int [read only]
      Gets the index of the left-most pin.

      return the 0-based index of the left pin
    • PinColor As Int [write only]
      Set the color of the pins.
      pinColor Integer specifying the color of the pin.
    • PinRadius As Float [write only]
      If this is set, the thumb images will be replaced with a circle of the
      specified radius. Default width = 20dp.

      pinRadius Float specifying the radius of the thumbs to be drawn.
    • PinTextColor As Int [write only]
      Set the color of the text within the pin.
      textColor Integer specifying the color of the text in the pin.
    • RangeBarEnabled As Boolean [write only]
      Set if the view is a range bar or a seek bar.

      isRangeBar Boolean - true sets it to rangebar, false to seekbar.
    • RightIndex As Int [read only]
      Gets the index of the right-most pin.

      return the 0-based index of the right pin
    • SeekPinByIndex As Int [write only]
      Sets the location of pin according by the supplied index.
      Numbered from 0 to mTickCount - 1 from the left.

      pinIndex Integer specifying the index of the seek pin
    • SeekPinByValue As Float [write only]
      Sets the location of pin according by the supplied value.

      pinValue Float specifying the value of the pin
    • SelectorColor As Int [write only]
      Set the color of the selector.
    • Tag As Object
    • TickColor As Int [write only]
      Set the color of the ticks.
    • TickCount As Int [read only]
      Gets the tick count.

      return the tick count
    • TickEnd As Float
      Gets the end tick.

      return the end tick.
    • TickHeight As Float [write only]
      Sets the height of the ticks in the range bar.

      tickHeight Float specifying the height of each tick mark in dp.
    • TickInterval As Double
      Gets the tick interval.

      return the tick interval
    • TickStart As Float
      Gets the start tick.

      return the start tick.
    • Top As Int
    • Visible As Boolean
    • Width As Int

MaterialRangeBar001.png


This library is Donationware. You can download the library, you can test the library. But if you want to USE the library in your App you need to Donate for it.
Please click here to donate (You can donate any amount you want to donate for the library (or my work) :)
 

Attachments

  • MaterialRangeBarExample.zip
    15.6 KB · Views: 654
  • libMaterialRangeBarV1.0.0.zip
    21.6 KB · Views: 457
  • libMaterialRangeBarV1.0.1.zip
    22 KB · Views: 465
  • libMaterialRangeBarV1.0.2.zip
    21.9 KB · Views: 596

walterf25

Expert
Licensed User
Longtime User
MaterialRangeBar
Version:
1.0.0

This is a wrapper for this Github-project.
  • RangeBar
    Fields:
    • ba As BA
    Methods:
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As 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 Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • 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)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • isRangeBar As Boolean
      Gets the type of the bar.

      return true if rangebar, false if seekbar.
    • setRangePinsByIndices (leftPinIndex As Int, rightPinIndex As Int)
      Sets the location of the pins according by the supplied index.
      Numbered from 0 to mTickCount - 1 from the left.

      leftPinIndex Integer specifying the index of the left pin
      rightPinIndex Integer specifying the index of the right pin
    • setRangePinsByValue (leftPinValue As Float, rightPinValue As Float)
      Sets the location of pins according by the supplied values.

      leftPinValue Float specifying the index of the left pin
      rightPinValue Float specifying the index of the right pin
    Properties:
    • Background As Drawable
    • BarColor As Int [write only]
      Set the color of the bar line and the tick lines in the range bar.

      barColor Integer specifying the color of the bar line.
    • BarWeight As Float [write only]
      Set the weight of the bar line and the tick lines in the range bar.

      barWeight Float specifying the weight of the bar and tick lines in
      px.
    • Color As Int [write only]
    • ConnectingLineColor As Int [write only]
      Set the color of the connecting line between the thumbs.

      connectingLineColor Integer specifying the color of the connecting
      line.
    • ConnectingLineWeight As Float [write only]
      Set the weight of the connecting line between the thumbs.

      connectingLineWeight Float specifying the weight of the connecting
      line.
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • LeftIndex As Int [read only]
      Gets the index of the left-most pin.

      return the 0-based index of the left pin
    • PinColor As Int [write only]
      Set the color of the pins.
      pinColor Integer specifying the color of the pin.
    • PinRadius As Float [write only]
      If this is set, the thumb images will be replaced with a circle of the
      specified radius. Default width = 20dp.

      pinRadius Float specifying the radius of the thumbs to be drawn.
    • PinTextColor As Int [write only]
      Set the color of the text within the pin.
      textColor Integer specifying the color of the text in the pin.
    • RangeBarEnabled As Boolean [write only]
      Set if the view is a range bar or a seek bar.

      isRangeBar Boolean - true sets it to rangebar, false to seekbar.
    • RightIndex As Int [read only]
      Gets the index of the right-most pin.

      return the 0-based index of the right pin
    • SeekPinByIndex As Int [write only]
      Sets the location of pin according by the supplied index.
      Numbered from 0 to mTickCount - 1 from the left.

      pinIndex Integer specifying the index of the seek pin
    • SeekPinByValue As Float [write only]
      Sets the location of pin according by the supplied value.

      pinValue Float specifying the value of the pin
    • SelectorColor As Int [write only]
      Set the color of the selector.
    • Tag As Object
    • TickColor As Int [write only]
      Set the color of the ticks.
    • TickCount As Int [read only]
      Gets the tick count.

      return the tick count
    • TickEnd As Float
      Gets the end tick.

      return the end tick.
    • TickHeight As Float [write only]
      Sets the height of the ticks in the range bar.

      tickHeight Float specifying the height of each tick mark in dp.
    • TickInterval As Double
      Gets the tick interval.

      return the tick interval
    • TickStart As Float
      Gets the start tick.

      return the start tick.
    • Top As Int
    • Visible As Boolean
    • Width As Int

View attachment 33147

This library is Donationware. You can download the library, you can test the library. But if you want to USE the library in your App you need to Donate for it.
Please click here to donate (You can donate any amount you want to donate for the library (or my work) :)
Hey DonManfred, great work with this, this is actually what i was looking for, however i don't see a "On_Change Listener" anywhere, when i slide the left or right ticks i would like to see the values returned so that i can do something with them, the way it is right now, i don't really see any use for this other than just a nice looking rangebar, can you add the listener? or would it be too hard to do this?

Check here, how to add the listener:
B4X:
rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
            @Override
            public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
                    int rightPinIndex,
                    String leftPinValue, String rightPinValue) {
            }
        });

Thanks, let me know!

Walter
 

DonManfred

Expert
Licensed User
Longtime User
B4X:
    @Hide
    public void _initialize(BA ba, Object activityClass, String EventName) {
        this.eventName = EventName.toLowerCase(BA.cul);
        this.ba = ba;
        this.setObject(new RangeBar(ba.context));
        listener = new OnRangeBarChangeListener(){

            @Override
            public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
                    int rightPinIndex, String leftPinValue, String rightPinValue) {
                // TODO Auto-generated method stub
               
            }};
           
       
        this.getObject().setOnRangeBarChangeListener(listener);
     }
guess what i forgot :D
 

walterf25

Expert
Licensed User
Longtime User
B4X:
    @Hide
    public void _initialize(BA ba, Object activityClass, String EventName) {
        this.eventName = EventName.toLowerCase(BA.cul);
        this.ba = ba;
        this.setObject(new RangeBar(ba.context));
        listener = new OnRangeBarChangeListener(){

            @Override
            public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
                    int rightPinIndex, String leftPinValue, String rightPinValue) {
                // TODO Auto-generated method stub
              
            }};
          
      
        this.getObject().setOnRangeBarChangeListener(listener);
     }
guess what i forgot :D
haha, it happens.
:rolleyes::rolleyes::rolleyes::rolleyes:
 

walterf25

Expert
Licensed User
Longtime User
See v1.0.1 in post #1
Thanks, i just gave it a try and i got this error in the logs:

This is the Listener Sub
B4X:
Sub rb_onRangeBarChange(rangeBar As Object, leftPinIndex As Int, rightPinIndex As Int,  leftPinValue As String, rightPinValue As String)
    Log("left: " & leftPinValue & " " & "right: " & rightPinValue)
End Sub

and this is the error i get in the logs:

lib: NOTFOUND 'rangebar_onrangebarchange

Any ideas, i did update the library to v1.01
 

DonManfred

Expert
Licensed User
Longtime User
Any ideas, i did update the library to v1.01
lib: NOTFOUND 'rangebar_onrangebarchange
You initialized the lib with "rangebar" not "rb"
Try
B4X:
Sub rangebar_onRangeBarChange(rangeBar As Object, leftPinIndex As Int, rightPinIndex As Int,  leftPinValue As String, rightPinValue As String)
    Log("left: " & leftPinValue & " " & "right: " & rightPinValue)
End Sub
 

walterf25

Expert
Licensed User
Longtime User
lib: NOTFOUND 'rangebar_onrangebarchange
You initialized the lib with "rangebar" not "rb"
Try
B4X:
Sub rangebar_onRangeBarChange(rangeBar As Object, leftPinIndex As Int, rightPinIndex As Int,  leftPinValue As String, rightPinValue As String)
    Log("left: " & leftPinValue & " " & "right: " & rightPinValue)
End Sub
Ah, i see wouldn't it make more sense to pass the eventName to the listener, that's why i had like this:
B4X:
Sub rb_onRangeBarChange(rangeBar As Object, leftPinIndex As Int, rightPinIndex As Int,  leftPinValue As String, rightPinValue As String)
sincde the eventName for the rangebar is "rb"

But let me try it like that.

Thanks,
Walter
 

walterf25

Expert
Licensed User
Longtime User
lib: NOTFOUND 'rangebar_onrangebarchange
You initialized the lib with "rangebar" not "rb"
Try
B4X:
Sub rangebar_onRangeBarChange(rangeBar As Object, leftPinIndex As Int, rightPinIndex As Int,  leftPinValue As String, rightPinValue As String)
    Log("left: " & leftPinValue & " " & "right: " & rightPinValue)
End Sub
Ok, yeah that works, great job and thank you so much bud, as soon as i become a millionaire i will donate big bucks to you!
:D:p
 

walterf25

Expert
Licensed User
Longtime User
Ok, yeah that works, great job and thank you so much bud, as soon as i become a millionaire i will donate big bucks to you!
:D:p
Here is the first one! LOL
 

Attachments

  • big buck.jpg
    big buck.jpg
    88.6 KB · Views: 343

DonManfred

Expert
Licensed User
Longtime User
Ah, i see wouldn't it make more sense to pass the eventName to the listener
You defined rangebar as eventname. Why not using this name you defined?

A) When using the designer the Eventname property of the customview is set to "rangebar" and not "rb" as you told
or
B) When using code you used "rangebar" as the parameter eventname in the initialize call and not "rb" as you told
 

fredo

Well-Known Member
Licensed User
Longtime User
Rangebar.PinTextsize missing?

First I want to thank you for contributing to the community with your industrious wrapping of all those helpful libraries out there.

In search of views that adhere to the Material Design principles I looked for a reasonable Discrete Slider an found your wrap of oli107's GitHub project and I find it helpful and easy to use.

However, I couldn't find a way to set the PinTextsize.

04-07-_2016_08-50-36.jpg


Did I miss a property or how can we change the PinTextSize?

I attached a slightly modified version of your example zip to show the effect.
 

Attachments

  • fredoTest_MD_RangeBar.zip
    7.8 KB · Views: 350
  • 04-07-_2016_07-58-36.jpg
    04-07-_2016_07-58-36.jpg
    28.1 KB · Views: 343
Top