B4A Library [Class] Vertical, Horizontal and Circle Seekbars

derez · Jul 10, 2012

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.

Adam888 · Sep 25, 2013

Good~

Adam888 · Sep 25, 2013

Hello, My screen size is 1024x768
It show me an error. Is the size problem?

derez · Sep 25, 2013

It is not a problem of the size, it is a problem of some view that is not initialized or not added to a parent.

Adam888 · Sep 25, 2013

Cool, You are right. It's a scrollview on it. Thank you~

derez · Sep 25, 2013

You should call size before the adding of the scrollview.

Adam888 · Sep 25, 2013

Thank you~ It's good.

derez · Sep 28, 2013

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 in the first post 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.

derez · Sep 28, 2013

Ver 7.1, see first post.

rbghongade · Oct 1, 2013

Simply beautiful and elegant too!

alienhunter · Nov 24, 2013

Hi ,

i got a problem , i use +1 the seek bar doesnt move anymore just once

B4X:

If p.Tag>10 AND p.Tag <16 Then
cc1.Value=cc1.Value+1
End If

see seek.jpg

but if i cc1.Value=cc1.Value+2 there is a problem it is moving only +1
see seek2.jpg
any clues ?

thanks AH

derez · Nov 24, 2013

You are right, this is because some variables are defined as int.
I changed Maxv , position and Value to double, now it works.
first post updated to 7.2

alienhunter · Nov 24, 2013

derez said:
You are right, this is because some variables are defined as int.
I changed Maxv , position and Value to double, now it works.
first post updated to 7.2

thank you very much David

tmf · Feb 16, 2014

I am wondering how to speed up this class, I defined an array of 9 of them and even updating them 2 times a second causes the software to slow down. I even went into the code and coded it for 4 loops of circle drawing instead of the 10 that was default, this I thought would have a large impact, but it did not seem to do much at all.... any thoughts?

Thanks!

derez · Feb 16, 2014

Are you using the bars as gauges ? The intended use is as a controller - to be able to change the value using your finger, and that doesn't require such a rate of update. I you are after a gauge - there are other in the forum which are probably more suited for the job.
I believe you refer to the circular bar, since there is the drawing of circles to get the gradient effect, which in the linear bars is simpler because I use drawables. Try working with them , they should work faster.

tmf · Feb 17, 2014

Yes sorry I am using them as a guage and not an input "device" so I can see the issue.... I can only find a library called jfxtraguages but its for B4J not B4A.... do you know of any others?

derez · Feb 17, 2014

Search for "guages" and you'll find more.

LUIZ NAVARRO · Apr 22, 2014

Deal all,

How I can enable or disable a circle seekbar?

Tks a lot,
Luiz

derez · Apr 22, 2014

Like most of the views classes, they use "AsView" method to define the base view.
So, if you have a cs as circleseek object, use cs.AsView.Enabled

aeropic · May 3, 2014

Hi David,

It's an awesome class which brings a touch of "class" to our applications.
Many thanks and congratulations for this.

I'm using the circleseek (I love them)... I get a weird problem when using them from the designer

If I script the designer (from your example) with:

B4X:

cs.width = 20%x
cs.height = 20%x

there is no effect on the size of the circleseek...

At the opposite defining them from code seems to work fine :

B4X:

cs2.Initialize(Me,"cs2")
cs2.CodeCreateView(31%x,31%x,100, cs2.SHORT_KNOB)
Activity.AddView(cs2.AsView,20%x,60%y,40%x,40%x)

Is this normal ?

Thanks
Alain

derez · May 4, 2014

If I change the commented line it works like you want, otherwise you change only the base size but not Cbase which is the common base to both ways of definition:

B4X:

Private Sub DesignerCreateView(base As Panel, Lbl As Label, Props As Map)'ignore
    S = Min(Lbl.Width, Lbl.Height)
    ds = 0.005 * S
    Cbase.Initialize("Cbase")
'    base.AddView(Cbase,0,0,S,S)
     base.AddView(Cbase,0,0,base.width,base.Height)
    maxv = Lbl.text
    Cwith =  Lbl.Tag
    ContinueCreation
End Sub

B4A Library [Class] Vertical, Horizontal and Circle Seekbars

Attachments

Member

Member

Attachments

Expert

Member

Expert

Member

Expert

Expert

Active Member

Active Member

Attachments

Expert

Active Member

Member

Expert

Member

Expert

New Member

Expert

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency