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.

miquelr · Feb 22, 2013

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 · Feb 22, 2013

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

sonra · Jun 4, 2013

try to run the SeekBar project

Hello all
I try to learn the way the lib run by changing it a little ( using only one class )
for some reason it does not work . Can some one check the attach zip file and tell me what is the problem
regards DView attachment TrySeekBar.ziporon

klaus · Jun 4, 2013

Have a look at the User's Guide chapters 10.4 to 10.7

Best regards.

derez · Jun 5, 2013

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.

sonra · Jun 5, 2013

still have a problem with seekbar

Hi
I wrote a simple program using SeekBar and for some reason I don't see the SeekBar as in the class .Any idea

regard Doron
View attachment TrySeekBar.zip

derez · Jun 5, 2013

Can you upload your project ? there may be many reasons...

sonra · Jun 5, 2013

SeeKbar class

Hi Erez the project is attached

View attachment TrySeekBar.zip
Regards Doron

derez · Jun 5, 2013

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 · Jun 6, 2013

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 · Jun 6, 2013

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

sonra · Jun 6, 2013

Stiil have a problem

Hi
What i don't understand why i see the SeekBar like in the attached file
and not like yours
Doron

derez · Jun 6, 2013

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

sonra · Jun 7, 2013

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 · Jun 8, 2013

Ver 6.1 adaptable to various screen sizes.

sonra · Jun 9, 2013

try to understand

Hi
Do you mean the Java version ?? and is any parameter to prevent it??

derez · Jun 9, 2013

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

Locutus · Sep 1, 2013

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 · Sep 2, 2013

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(...

derez · Sep 2, 2013

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.

B4A Library [Class] Vertical, Horizontal and Circle Seekbars

Attachments

Member

Member

Member

Expert

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency