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,763
  • circleScale.zip
    18.5 KB · Views: 1,148
Last edited:

miquelr

Member
Licensed User
Longtime User
tag property

Awesome class and thanks for share it, but it not have the 'tag' property, that is very usefull to passing values when some instances of the object is used in diferents parts of the program.
Do you plans to introduce the tag property in the future?
 

miquelr

Member
Licensed User
Longtime User
oops..
For a moment i forgot that vseek is a classe, not a lib.
I have included a tag for my convenience.
Thanks..
 

derez

Expert
Licensed User
Longtime User
Custom View

B4a ver. 2.71 let us use the designer for custom view.
The seekbars were updated (ver 6 in the first post) to work both ways.

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.
 

derez

Expert
Licensed User
Longtime User
you didn't define the seekbar in the designer.
Look at my example file and see the definition of Sbar in the designer (and this has nothing to do with the Vseekbar or Hseekbar classess).
 

sonra

Member
Licensed User
Longtime User
A new try

Hi
I attach the new version. I don't know why the was problem in previous I stiil don't see the seekbar as in sww it whwn irun your class ( to my knowledge I used the same parameters as you in the designer ) please let me know what is wrong
I run my example on ASUS tf700 in both cases ( your class and my example )
but the seekbar has another control view
regards Doron

View attachment SeekBarSimple.zip
 

derez

Expert
Licensed User
Longtime User
The program you attached is ok and runs fine on the emulator, the bar is visible and moves.
 

derez

Expert
Licensed User
Longtime User
This looks like the "ICS like seekbar" class. Are you sure you run the same program as you attached before ?
 

sonra

Member
Licensed User
Longtime User
found the probem with SeekBar

Hi
I finally found the problem it is in the AndroidManifest.xml file
in one line
the good one is

<uses-sdk a"]ndroid:minSdkVersion="4">

and for some reason when I start a project the line is

<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="14"/>

and for this reason I get the seekbar in emulator or device like shown in pic attach to me previous post
Does anyone why i got the file like this and how to prevent it ?
regards Doron
 

derez

Expert
Licensed User
Longtime User
Doron
It is not an answer to your post, it is an announcement of a new version of this class.
 

Locutus

Member
Licensed User
Longtime User
First of all thanks for such a useful class. I have successfully used it in my program however, when trying to position it using designer scripts I am unable to do so.

Is there a way to reposition the view after the program has loaded? Either programatically or via designer scripts would be fine.
I tried programatically but it just leaves a white area where the view originally was.
 

derez

Expert
Licensed User
Longtime User
Please give more details/code.
The example is doing it with the designer, check.
Re-positioning of the view, when defined by the designer, requires access to the base panel of the custom view (that is the white area), I don't know how to do it.
To re-position the bar when defined by code, use bar.asview.setlayout(...
 
Last edited:

derez

Expert
Licensed User
Longtime User
Is there a way to reposition the view after the program has loaded
There is a way, requiring the following changes:
B4X:
Private Sub DesignerCreateView(base As Panel, Lbl As Label, Props As Map) 'ignore
mybase = base ' mybase is a global panel
mybase.Left = Lbl.Left
mybase.Top = Lbl.top
mybase.Width = Lbl.Width
mybase.Height = Lbl.Height
Hbase.Initialize("")
base.AddView(Hbase,0, 0, Lbl.Width, Lbl.Height)

H = Lbl.Height
W = Lbl.Width
MaxV = Lbl.text
ContinueCreation
End Sub

B4X:
Public Sub SetLayout(Left As Int,Top As Int,Width As Int,Height As Int)
mybase.SetLayout(Left,Top,Width,Height)
Hbase.SetLayout(0, 0, Width,Height)
H = Height
W = Width
ContinueCreation
End Sub

The base panel (MyBase) exists only in the designer created view, so it will probably cause an error when used on code created view like this bar.SetLayout instead of bar.AsView.SetLayout.

I will not add it to the published version.
 
Top