B4A Library [Class] Vertical, Horizontal and Circle Seekbars

Two things that are missing in the core Seekbar -
1. Vertical Seekbar
2. Control of the colors.

the Attached Vertical seekbar class has both. I added a horizontal seekbar class to be compatible with the vertical.

The two classes are independent.

In the photo you can see the core seekbar as well for comparison.

Edit: Version 2 - correction of mistake + addition of caret size method.
Edit: Version 3 - improvement of looks - the caret is shown completely at the edges.
Edit: Version 4 - uses the Double Gradient Drawable class [Class] Double Gradient Drawable and the number of views and complexity is reduced meanungfully.
Edit: Version 5 - without the gradient class.
Edit: version 6 - works as a custom view in the designer (b4a ver. 2.71). use the "text" property to define the max value of the bar. If you want to define the view by code, use "initialize", then "CodeCreateView" . In the example, Vbarcv is defined by code and Hbarcv by the designer as customview.
Edit: Ver. 6.1 - ver 6 worked nicely until I tried it on a different size device... Now it works. The example includes "size" class to adapt.

Edit: Ver 7 includes a CircleSeek Class. Like the Vertical and Horizontal bars, it can be defined as custom view in the designer or by code. If defined by designer put MaxValue as Text and True as Tag if you want to have the knob. If defined by code, call CodeCreateView right after initialization.
The picture shows one circle with colors set and the lower is with default colors and knob.
Important: you must call setValue at least once for the view to be displayed.

Edit: Ver 7.1 adds another display option - with long arrow as the knob (see photo). Selection done between 3 options to put as Tag in the custom view :- 0 -no knob, 1 - short knob, 2-long knob , or in CodeCreateView call as WithKnob.

Edit: Version 7.2 - circlebar allows for small value changes although the display is with no fractions (changing some values to double).
Edit: Version 7.3 - circlebar looks fine on high resolution devices (I didn't notice but it was bad before...), by increasing the lines density.
Edit: Ver 8.0 now has min value and max value. Also additional class named CicrleScale is added to the group, with vintage kind of display - hand and scale. There is also a possibility to add a shadow to the hand (like in the lower object) using my shadow class which is attaced as well.
 

Attachments

  • Circle7.1.png
    Circle7.1.png
    100.1 KB · Views: 2,912
  • circlscale.png
    circlscale.png
    48.5 KB · Views: 2,093
  • Seekbars_8.zip
    14 KB · Views: 1,761
  • circleScale.zip
    18.5 KB · Views: 1,148
Last edited:

moster67

Expert
Licensed User
Longtime User
Wow - just what I needed :sign0060:

Thank you!
 

derez

Expert
Licensed User
Longtime User
Version 2 - correction of mistake + addition of caret size method.
 

Amalkotey

Active Member
Licensed User
Longtime User
thank you for sharing.
 

derez

Expert
Licensed User
Longtime User
Version 3 - improvement of looks - the caret is shown completely at the edges.

Something I noticed and learned while doing this class:
As you can see in the main module, setting the values to the bars is done at the activity_resume sub. When it was at the activity_creation sub I didn't get the event after performance of these lines, because the callsub was "run over" by the activity_resume. It happens only in my (slow) laptop, while in the desktop it does launch the event.
Using callsubdelayed - the event is always showing, after the execution of activity_resume.
I don't know if using callsubdelayed can cause any delay while operating the seekbar so I left it as callsub, but if you encounter any problems with not getting the event - you can change it to callsubdelayed.
 
Last edited:

derez

Expert
Licensed User
Longtime User
Version 4 - uses the Double Gradient Drawable class and the number of views and complexity is reduced meanungfully.
 

derez

Expert
Licensed User
Longtime User
Version 5 - without the double gradient class.
 
Last edited:

nicodh

Member
Licensed User
Longtime User
Hello, I'm having some issues trying to implement this class into a custom dialog.

I can't move the tick, it does not function. This is my custom dialog popup. In theory when I move the seekbar, the lbl2.text should change, but I can't move the seekbar.

Thanks.


Dim pnl As Panel
pnl.Initialize("pnl")
Dim bgnd As ColorDrawable
bgnd.Initialize(Colors.Black, 5dip)
pnl.Background = bgnd
Dim quiensoy As Label
quiensoy.Initialize("")
lbl2.Initialize("lbl2")
sk1.Initialize("main","sk1", 60%x,35dip,1000)
sk1.setColors(Colors.Black,Colors.white, Colors.rgb(255,180,180), Colors.white)
pnl.AddView(quiensoy,0%x,0%y,100dip,30dip)
quiensoy.Gravity=Gravity.CENTER
Dim butPlus As Button
Dim butMinus As Button
butPlus.Initialize("butPlus")
butMinus.Initialize("butMinus")
butMinus.Text="-"
butPlus.Text="+"
pnl.AddView(butMinus,0%x, 20%y, 15%x,50dip)
pnl.AddView(butPlus,75%x, 20%y, 15%x,50dip)
pnl.AddView(sk1.AsView,15%x,20%y+5dip,60%x,35dip)
lbl2.Gravity=Gravity.CENTER
lbl2.TextSize=20
pnl.AddView(lbl2,20%x,0%y,30%x,40dip)
cd.AddView(pnl, 0%x, 0%y, 100%x, 40%y) ' sizing relative to the screen size is probably best
a= pnl.Width/2-lbl2.Width/2
lbl2.Left=a
'sk1.Invalidate
Select Case tabhost1.CurrentTab
Case 0
sk1.setMaxValue(500)
sk1.setValue(tablerate.GetValue(Col,Row))
Case 1
sk1.setMaxValue(1000)
sk1.setValue(tableatt.GetValue(Col,Row)*100)
End Select
lbl2.Text=sk1.getValue
ret = cd.Show("", "Ok", "Cancel", "", Null)


Sub sk1_valuechanged (Value As Int, UserChanged As Boolean)
Select Case tabhost1.CurrentTab
Case 0
lbl2.Text=sk1.getValue
Case 1
lbl2.Text=sk1.getValue/100
End Select

End Sub
 

derez

Expert
Licensed User
Longtime User
This line seems wrong:
B4X:
Select Case tabhost1.CurrentTab
change it to
B4X:
Select tabhost1.CurrentTab
 

MrKim

Well-Known Member
Licensed User
Longtime User
Help with visibility

I was able to get a horizontal SeekBar by adding the HSeekBar class to my project. Thanks, but boy I wish I understood how this works. I it is missin ga lot of the properties of the regular SeekBar and I don't know how to add them. What I really need is the ability to make it invisible. Could you show me the code to add that?

Thanks,
Kim
 

derez

Expert
Licensed User
Longtime User
The seekbar is placed on a panel named base. In order to make the seekbar invisible you need to make this panel invisible. To be able to control this panel's properties - change its declaration from private to public, then you will see it when writing vbar. or hbar. in the autocomplete menu.

instead of class code
B4X:
Private base,  cover As Panel
write
B4X:
public base as panel
 private cover as panel

and in the main write where ever you need it
B4X:
hbar.base.Visible = False
 
Last edited:

MrKim

Well-Known Member
Licensed User
Longtime User
Thank you, beautiful. I am starting to get the hang of this. I did it a little differently for consistency. I left base private and added.

B4X:
Sub Visible (bVisible As  Boolean) As Boolean

base.Visible = bVisible

End Sub

To the HSeekbar module.
 
Last edited:

Arun

Member
Licensed User
Longtime User
Thanks!

Thanks for an awesomely simple code for such a great feature. :sign0142:

I needed a progressbar but did not like the stock progressbar. I modified this code and now I have a progressbar which I never dreamt of! :sign0060:

Arun
 

Jonas

Member
Licensed User
Longtime User
Thanks for the class

Very good base to start with, im going to do some changes. Going to be used as a minimalistic thermometer for my HMI app. Ill be adding more properties like .Tag and .Min. Will add alarm limits so it will change colors when crossing the limits. Might add some text to it too.

Thanks again creating such a good base!

/Jonas
 

walterf25

Expert
Licensed User
Longtime User
Awesome

Awesome class, thanks for sharing, just what i was looking for, i'm writing an app that will control the light intensity of my house and I was looking for a vertical seekbar, thanks again, very nice.


Cheers,
Walter Flores
 

avalle

Active Member
Licensed User
Longtime User
v5 Library missing?

Version 5 - without the double gradient class.

I have downloaded version 5 but it only seems to contain a Version4 sample, no library in the ZIP file.
Am I missing something?:sign0085:

Andrea
 

derez

Expert
Licensed User
Longtime User
I have downloaded version 5 but it only seems to contain a Version4 sample, no library in the ZIP file.
Am I missing something?:sign0085:

Andrea

It is a class, not a library ! The code is in the modules.
 

NFOBoy

Active Member
Licensed User
Longtime User
Absolutely Sweeeet

Love It! Thanks so much, for this awesomely simple (to use) :sign0098:extension!
 
Top