B4A Class Input Slider Class

Discussion in 'Additional libraries, classes and official updates' started by stevel05, Jun 18, 2012.

  1. stevel05

    stevel05 Expert Licensed User

    I'm not quite sure where to post this, but while testing the beta, I came up with an input slider class that allows simple use of images to create interesting sliders similar to the seek bars we are used to.

    I thought it may be useful to share as it's using a few of the new functions (all without problems I should say). And obviously you can tailor it to your needs.

    If you get a chance to have a look, let me know how it works for you.

    V1.00 attached


    @Erel. perhaps we should have a new section in the forum for shared classes/code modules as I think these will far outnumber libraries in the future.

    19/6/2012 - V1.01 attached
    07/02/2014 V1.02 - Added released callback, called when the slider is released.
    07/02/2014 Added InputSlider CustomView V1.00 (iscv.zip) see post #7
    15/02/2015 Added InputSlider CV1-1 minor updates required for MidiSystem, Download and compile to library.
    NOTE: This will break existing code as it uses get/setters for most variables, so if you have an existing app, use the old version. If you have compiled it to a library, give this one a different name before compiling.

    3/4/2017 - InputSlider1-2 : Added a Steps options to allow discrete value changes. see post #22

    Attached Files:

    Last edited: Apr 3, 2017
    Volga and metrick like this.
  2. Erel

    Erel Administrator Staff Member Licensed User

    I think that you can use the same sub-forum. You can add a [Class] prefix to the title.
    ellpopeb4a likes this.
  3. corwin42

    corwin42 Expert Licensed User

    This looks very nice.

    About the forum section for classes/modules. I asked for this some time ago here but nobody answered to it.
  4. Erel

    Erel Administrator Staff Member Licensed User

    The InputSlider class is really nice.
    The type of the callback module variable should be Object, not String.

    This allows you to use Me instead of specifying the name:
    It also allows you to initialize this object from a different class (using Me again).
    For example I can create a class that changes the volume and uses your slider for the UI. So the slider will be an instance variable of the VolumeChanger class.
  5. stevel05

    stevel05 Expert Licensed User

    Thanks Erel, that makes sense now, I did try using Activity but it failed.

    Updated to V1.01 in original post.
  6. stevel05

    stevel05 Expert Licensed User

    Erel, could you move this thread to the Libraries/classes forum.


  7. stevel05

    stevel05 Expert Licensed User

    Created InputSlider as a CustomView (see post #1). Add add it via designer and or in code.

    To add in code call the Initialize and setup methods.

    If there are image files in the files directory with the names sliderbg.jpg, sliderbgv.jpg and sliderbtn.png they will automatically be loaded. Or you can add other images using the methods available. Includes the release callback.
    merlin2049er and JordiCP like this.
  8. JordiCP

    JordiCP Well-Known Member Licensed User

    Hi Stevel05! I was just updating a post to state that I use this class (a little bit modified) in the new version for my app, and saw this update!

    I still use the previous version, will have a look at the new when I can.

    Don't know if it may be useful for others (in my case it was), but changed it to support double or triple buttons. If you want I can send you the changes (after cleaning my code)
  9. stevel05

    stevel05 Expert Licensed User

    Yes, please do, the more options the better:)
  10. JordiCP

    JordiCP Well-Known Member Licensed User

    Hi Stevel05

    I attach your 1.02 version and example, with the modifications I used for my app (and tried to clean)

    Basically there are 3 major differences

    * Added support for up to three pointers (when more than one, at this moment it will load its own pointers, just as an example)
    * Option to accepts only discrete values: when set, the slider will only take integer values amb move accordingly
    * If you load a Null backgroundImage, it will try to draw something nice (I say "try" because I am not good at design, but the code is there and can be modified)

    The code is pretty much the same (added params to the Initialize method, added callbacks and setting methods for the additional pointers when there is more than one) and is still compatible with the methods and callbacks for the standard case.

    The only thing to remark is that I changed the internal coordinate system so that the calculations would be done from the center of the pointers (sorry, I use to do such things), so this part is different (but also correct)

    Hope it can be useful

    Attached Files:

    stevel05 likes this.
  11. stevel05

    stevel05 Expert Licensed User

    Very nice @JordiCP, thanks for sharing.
  12. DaveW

    DaveW Active Member Licensed User

    Thank you JordiCP, a range slider was just what I was looking for!
  13. DaveW

    DaveW Active Member Licensed User

    Steve & Jordi,

    I have taken the liberty of making a version 1.03 of the input slider. This one does not use any external graphics, the pointers are all drawn in code to emulate the normal Android sliders (such as you see when changing the volume etc.). The only difference from the default Android version is you can set the size and color of the pointers. If color is set to -1 the default blue color is used. The pointers are drawn to fit the the view's height / width, line widths are also scaled accordingly. Disabled, Pressed and Focused modes are not supported, just the Normal appearance.

    Attached Files:

    stevel05 likes this.
  14. stevel05

    stevel05 Expert Licensed User

    Thanks Dave, more options:)
  15. DaveW

    DaveW Active Member Licensed User

    Got a bit inspired after lunch :). Added Disabled and Pressed modes to the slider.

    Attached Files:

    JackKirk and stevel05 like this.
  16. DaveW

    DaveW Active Member Licensed User

    ... Still looking for any way to avoid real work...
    I have converted the code to work as a Custom View. I have also added a 'Reverse' property. This will draw the line from the slider to the bottom or right edge of the view. The readout values are also reversed to match. This only has an effect on the single slider version, double and triple sliders always draw their line between the end sliders.

    The zip file contains the class module and a demo program that illustrates most aspects of the view (I hope).

    I should point out that all the changes I have made are cosmetic only. The guts of the module that do the clever stuff of sensing and reacting to touches is 100% from the original class created by Steve!

    Attached Files:

    stevel05 and JordiCP like this.
  17. JordiCP

    JordiCP Well-Known Member Licensed User

    Have just tried it, it's getting nice!
  18. DaveW

    DaveW Active Member Licensed User

    Getting nice? What more would you like to see?
  19. TheMightySwe

    TheMightySwe Active Member Licensed User

    Is there anyway to use this and programaticlly add the slider to a panel?
  20. stevel05

    stevel05 Expert Licensed User

    Yes, you should be able to do that using the custom view versions. Unless I misunderstand your question.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice