B4A Library Spinner Wheel - Vertical and Horizontal (24 June: new lib files in post #47)

It wraps the Vertical Spinner Wheel part of this Github project. Spin the wheel with a finger - up or down. The spinner is cyclic i.e it acts like a circular buffer.

Posting:
1. B4A project demonstrating the use of the Vertical Spinner Wheel - b4aAndroidSpinnerWheel.zip
2. Zipped files with the required library files (including nineoldandroids) - copy them to your additional library folder. Library files are in AndroidSpinnerWheel.zip

Please note: have added no code in the designer or in the B4A project to position the views - just plonked down and dragged them in the designer. Leaving positioning to those making use of this project.

I will add the Horizontal Spinner Wheel part of the project at some stage...

1.png


Sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: AndroidSpinnerWheel
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private vsw1, vsw2 As WheelVerticalView
    Dim months() As String
    Dim cities() As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
 
    vsw1.ItemDimmedAlpha = 100
    vsw1.SpinnerTextColor = Colors.Red
    vsw1.SpinnerTextSize = 18
    months = Array As String("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
    vsw1.SpinnerItems = months
    vsw1.setupSpinnerWheel
 
    vsw2.ItemDimmedAlpha = 150
    vsw2.SpinnerTextColor = Colors.Yellow
    vsw2.SpinnerTextSize = 23 
    cities = Array As String("New York", "Washington", "Chicago", "Atlanta", "Orlando", "Los Angeles", "Houston", "New Orleans") 
    vsw2.SpinnerItems = cities
    vsw2.setupSpinnerWheel
 
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub vsw1_value_changed(index As Int)
 
    Log("Selected Month = " & months(index))
 
End Sub

Sub vsw2_value_changed(index As Int)
 
    Log("Selected City = " & cities(index))
 
End Sub

The library:

AndroidSpinnerWheel
Author: Github: Dimitri Fedorov; Wrapped by: Johan Schoeman
Version: 1
WheelVerticalView
Events:
  • value_changed (index as Int )
Fields:
  • ba As BA
Methods:
  • BringToFront
  • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
  • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
  • setupSpinnerWheel
Properties:
  • Background As Drawable
  • Color As Int [write only]
  • Enabled As Boolean
  • Height As Int
  • ItemDimmedAlpha As Int [write only]
  • Left As Int
  • SpinnerItems() As String [write only]
  • SpinnerTextColor As Int [write only]
  • SpinnerTextSize As Int [write only]
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int

 

Attachments

  • AndroidSpinnerWheel.zip
    132.4 KB · Views: 1,215
  • b4aAndroidSpinnerWheel.zip
    11.4 KB · Views: 1,169
Last edited:
Click to expand...
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Added Horizontal Spinner Wheel as well. Posting:
1. updated B4A library files
2. updated B4A project demonstrating Vertical and Horizontal Spinner Wheels

2.png


Sample Code:
B4X: 
#Region  Project Attributes
    #ApplicationLabel: AndroidSpinnerWheel
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private vsw1, vsw2 As WheelVerticalView
    Private hsw1 As WheelHorizontalView
      
    Dim months() As String
    Dim cities() As String
    Dim numbers() As String

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
  
    vsw1.ItemDimmedAlpha = 100
    vsw1.SpinnerTextColor = Colors.Red
    vsw1.SpinnerTextSize = 18
    months = Array As String("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
    vsw1.SpinnerItems = months
    vsw1.setupSpinnerWheel
  
    vsw2.ItemDimmedAlpha = 150
    vsw2.SpinnerTextColor = Colors.Yellow
    vsw2.SpinnerTextSize = 23  
    cities = Array As String("New York", "Washington", "Chicago", "Atlanta", "Orlando", "Los Angeles", "Houston", "New Orleans")  
    vsw2.SpinnerItems = cities
    vsw2.setupSpinnerWheel
  
    hsw1.ItemDimmedAlpha = 70
    hsw1.SpinnerTextColor = Colors.Green
    hsw1.SpinnerTextSize = 18
    numbers = Array As String(" 01 ", " 02 ", " 03 ", " 04 ", " 05 ", " 06 ", " 07 ", " 08 ", " 09 ", " 10 ", " 11 ", " 12 ")
    hsw1.SpinnerItems = numbers
    hsw1.setupSpinnerWheel  
  
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub vsw1_value_changed(index As Int)
  
    Log("Selected Month = " & months(index))
  
End Sub

Sub vsw2_value_changed(index As Int)
  
    Log("Selected City = " & cities(index))
  
End Sub

Sub hsw1_value_changed(index As Int)
  
    Log("Selected Number = " & numbers(index))
  
End Sub

AndroidSpinnerWheel
Author: Github: Dimitri Fedorov; Wrapped by: Johan Schoeman
Version: 1
  • WheelHorizontalView
    Events:
    • value_changed (index as Int )
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • setupSpinnerWheel
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • ItemDimmedAlpha As Int [write only]
    • Left As Int
    • SpinnerItems() As String [write only]
    • SpinnerTextColor As Int [write only]
    • SpinnerTextSize As Int [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
  • WheelVerticalView
    Events:
    • value_changed (index as Int )
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • setupSpinnerWheel
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • ItemDimmedAlpha As Int [write only]
    • Left As Int
    • SpinnerItems() As String [write only]
    • SpinnerTextColor As Int [write only]
    • SpinnerTextSize As Int [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • b4aAndroidSpinnerWheel.zip
    11.6 KB · Views: 606
  • SpinnerWheelLibraryFiles.zip
    139.5 KB · Views: 635
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
johndb said:
This is a very useful library however is there a way to preselect the value with a property such as "SelectedIndex or am I missing something obvious? :D
Click to expand...
The attached library files should take care of your request John...;) You did not miss something obvious - I did! Thanks for pointing it out.

Use as follows (see last line of code):
B4X: 
    vsw1.ItemDimmedAlpha = 100
    vsw1.SpinnerTextColor = Colors.Red
    vsw1.SpinnerTextSize = 18
    months = Array As String("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
    vsw1.SpinnerItems = months
    vsw1.setupSpinnerWheel
    vsw1.SelectedIndex = 6

It also applies to the horizontal spinner wheel:

B4X: 
    hsw1.ItemDimmedAlpha = 70
    hsw1.SpinnerTextColor = Colors.Green
    hsw1.SpinnerTextSize = 18
    numbers = Array As String(" 01 ", " 02 ", " 03 ", " 04 ", " 05 ", " 06 ", " 07 ", " 08 ", " 09 ", " 10 ", " 11 ", " 12 ")
    hsw1.SpinnerItems = numbers
    hsw1.setupSpinnerWheel
    hsw1.SelectedIndex = 7
 

Attachments

  • AndroidSpinnerWheelNewLibFiles.zip
    139.6 KB · Views: 504
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
DonManfred said:
Can i add pictures to the items to show in the wheel?
Click to expand...
Here you go - posting new lib files and updated B4A project. Take note of all the files used in the /Object/bla/bla folders (all files set to read only). The images are in the /drawable folder.

3.png



Sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: AndroidSpinnerWheel
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private vsw1, vsw2 As WheelVerticalView
    Private hsw1 As WheelHorizontalView
       
    Dim months() As String
    Dim cities() As String
    Dim numbers() As String
    Dim countries() As String

    Private vsw3 As WheelVerticalImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
   
    vsw1.ItemDimmedAlpha = 100
    vsw1.SpinnerTextColor = Colors.Red
    vsw1.SpinnerTextSize = 15
    months = Array As String("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
    vsw1.SpinnerItems = months
    vsw1.setupSpinnerWheel
    vsw1.SelectedIndex = 6
   
    vsw2.ItemDimmedAlpha = 150
    vsw2.SpinnerTextColor = Colors.Yellow
    vsw2.SpinnerTextSize = 15   
    cities = Array As String("New York", "Washington", "Chicago", "Atlanta", "Orlando", "Los Angeles", "Houston", "New Orleans")   
    vsw2.SpinnerItems = cities
    vsw2.setupSpinnerWheel
    vsw2.SelectedIndex = 3
   
    hsw1.ItemDimmedAlpha = 70
    hsw1.SpinnerTextColor = Colors.Green
    hsw1.SpinnerTextSize = 15
    numbers = Array As String(" 01 ", " 02 ", " 03 ", " 04 ", " 05 ", " 06 ", " 07 ", " 08 ", " 09 ", " 10 ", " 11 ", " 12 ")
    hsw1.SpinnerItems = numbers
    hsw1.setupSpinnerWheel   
    hsw1.SelectedIndex = 7
   
    countries = Array As String("USA", "Canada", "Ukraine", "France", "South Africa", "Germany", "Scotland", "United Kingdom", "Russia", "Israel", "Brazil", "Ireland", "China")
    'The following array is populated with the names of the image files in the /Object/res/drawable folder
    'It must have the same number of elements as the "countries" array in the above statement
    vsw3.Images = Array As String("usa","canada", "ukraine", "france", "southafrica", "germany", "scotland", "unitedkingdom", "russia", "israel", "brazil", "ireland", "china")
    vsw3.SpinnerItems = countries
    vsw3.SpinnerTextColor = Colors.Cyan
    vsw3.SpinnerTextSize = 20
    vsw3.setupSpinnerWheel
    vsw3.SelectedIndex = 2
   
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub vsw1_value_changed(index As Int)
   
    Log("Selected Month = " & months(index))
   
End Sub

Sub vsw2_value_changed(index As Int)
   
    Log("Selected City = " & cities(index))
   
End Sub

Sub hsw1_value_changed(index As Int)
   
    Log("Selected Number = " & numbers(index))
   
End Sub

Sub vsw3_value_changed(index As Int)
   
    Log("Selected Country = " & countries(index))
   
End Sub
 

Attachments

  • b4aAndroidSpinnerWheel.zip
    61.6 KB · Views: 524
  • b4aLibFiles.zip
    149.7 KB · Views: 595
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Have amended the vertical spinner that allows for adding images to the spinner - as suggested by @Mahares. The attached library will now allow you to:
1. Load images from the Objects/res/drawable folder of the B4A project or...
2. ...to pass images via a B4A list to library. The bitmaps/images for this option can come from where ever. You need to populate the list with them and then pass the list to the library.

Very Important - the are a number of xml files in the /Object/res/blabla folders of the B4A project. They need to be there else the project will crash!

Take note of

B4X: 
Dim loadFromList As Boolean = True
and
B4X: 
vsw4.ImageFromList = loadFromList

If loadFromList is true then the images must be passed via the B4A list (the list must obviously be pre-populated with bitmaps - from anywhere)
If loadFromList is false then the images will be loaded from the /drawable folder (the default value for loadFromList = false i.e it will by default want to load the images from the /drawable folder)

Posting updated B4A project and B4A library files.

Sample code:

B4X: 
#Region  Project Attributes
    #ApplicationLabel: AndroidSpinnerWheel
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private vsw1, vsw2 As WheelVerticalView
    Private hsw1 As WheelHorizontalView
    
    Dim months() As String
    Dim cities() As String
    Dim numbers() As String
    Dim countries(), countries1() As String

    Private vsw3, vsw4 As WheelVerticalImageView

    Dim loadFromList As Boolean = True                             'if TRUE then it will load from the /drawable folder
                                                                   'if FALSE it will use the list containing bitmaps
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")

    vsw1.ItemDimmedAlpha = 100
    vsw1.SpinnerTextColor = Colors.Red
    vsw1.SpinnerTextSize = 15
    months = Array As String("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
    vsw1.SpinnerItems = months
    vsw1.setupSpinnerWheel
    vsw1.SelectedIndex = 6

    vsw2.ItemDimmedAlpha = 150
    vsw2.SpinnerTextColor = Colors.Yellow
    vsw2.SpinnerTextSize = 15
    cities = Array As String("New York", "Washington", "Chicago", "Atlanta", "Orlando", "Los Angeles", "Houston", "New Orleans")
    vsw2.SpinnerItems = cities
    vsw2.setupSpinnerWheel
    vsw2.SelectedIndex = 3

    hsw1.ItemDimmedAlpha = 70
    hsw1.SpinnerTextColor = Colors.Green
    hsw1.SpinnerTextSize = 15
    numbers = Array As String(" 01 ", " 02 ", " 03 ", " 04 ", " 05 ", " 06 ", " 07 ", " 08 ", " 09 ", " 10 ", " 11 ", " 12 ")
    hsw1.SpinnerItems = numbers
    hsw1.setupSpinnerWheel
    hsw1.SelectedIndex = 7

    countries = Array As String(" USA ", " Canada ", " Ukraine ", " France ", " South Africa ", " Germany ", " Scotland ", " United Kingdom ", " Russia ", " Israel ", " Brazil ", " Ireland ", " China ")
    'The following array is populated with the names of the image files in the /Object/res/drawable folder
    'It must have the same number of elements as the "countries" array in the above statement
    vsw3.Images = Array As String("usa","canada", "ukraine", "france", "southafrica", "germany", "scotland", "unitedkingdom", "russia", "israel", "brazil", "ireland", "china")
    vsw3.SpinnerItems = countries
    vsw3.SpinnerTextColor = Colors.Cyan
    vsw3.SpinnerTextSize = 20
    vsw3.setupSpinnerWheel
    vsw3.SelectedIndex = 2

    Dim mylist As List
    mylist.Initialize
    mylist.Add(LoadBitmap(File.DirAssets,"brazil.png"))             'add bitmaps to the list. They can come from anywhere
    mylist.Add(LoadBitmap(File.DirAssets,"canada.png"))
    mylist.Add(LoadBitmap(File.DirAssets,"france.png"))
    mylist.Add(LoadBitmap(File.DirAssets,"germany.png"))
    mylist.Add(LoadBitmap(File.DirAssets,"usa.png"))
    vsw4.ImageFromList = loadFromList
    If loadFromList Then
      countries1 = Array As String(" Brazil ", " Canada ", " France ", " Germany ", " USA ")
      vsw4.SpinnerItems = countries1
      vsw4.ImageBitmaps = mylist
    Else
      vsw4.SpinnerItems = countries
      vsw4.Images = Array As String("usa","canada", "ukraine", "france", "southafrica", "germany", "scotland", "unitedkingdom", "russia", "israel", "brazil", "ireland", "china")
    End If

    vsw4.SpinnerTextColor = Colors.Magenta
    vsw4.SpinnerTextSize = 20
    vsw4.setupSpinnerWheel
    vsw4.SelectedIndex = 2
    

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub vsw1_value_changed(index As Int)

    Log("Selected Month = " & months(index))

End Sub

Sub vsw2_value_changed(index As Int)

    Log("Selected City = " & cities(index))

End Sub

Sub hsw1_value_changed(index As Int)

    Log("Selected Number = " & numbers(index))

End Sub

Sub vsw3_value_changed(index As Int)

    Log("Selected Country = " & countries(index))

End Sub

Sub vsw4_value_changed(index As Int)

    If loadFromList Then
       Log("Selected Country = " & countries1(index))
    Else
       Log("Selected Country = " & countries(index))
    End If
End Sub

The right bottom spinner has been populated with the B4A list while the bottom/centre spinner has been populated from the /drawable folder
1.png
 

Attachments

  • b4aAndroidSpinnerWheel.zip
    99.1 KB · Views: 669
  • AndroidSpinnerWheelLibFiles.zip
    151.1 KB · Views: 552
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
monki said:
Hello Johann is a great library ,
it is possible that stops the spinner end of the list view ?

monki
Click to expand...
It can be done - will have to amend the wrapper code for that. Will do so sometime this week and then post new library files
 
J

Jomagom

Member
Licensed User
Longtime User
Is there any way that the array does not have to be string, and would need to put a list of 250 numbers.
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
monki said:
Hello Johann is a great library ,
it is possible that stops the spinner end of the list view ?

monki
Click to expand...
Attached new lib files (only the B4A lib files). Use it as follows:
B4X: 
vsw4.Cyclic = True  'set this to True or False - True = cyclic, False = stop the spinner at then end of the list view
vsw4.setupSpinnerWheel
 

Attachments

  • AndroidSpinnerWheel.zip
    45.3 KB · Views: 558
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Jomagom said:
Is there any way that the array does not have to be string, and would need to put a list of 250 numbers.
Click to expand...
The original Github project expects Strings. Very simple to convert your numbers to Strings. It uses Strings so that you can ensure same length of Strings for the horizontal spinner. Thus, no intention to change it to accommodate numbers.
 
You must log in or register to reply here.

Similar Threads

L
  • Question
Android Question Androidspinner wheel
Replies
9
Views
928
Liew
L
dibesw
  • Question
Android Question Spinner Wheel - Vertical and Horizontal
Replies
4
Views
2K
DonManfred
DonManfred
derez
  • Article
B4A Class A new WheelView
Replies
2
Views
4K
dibb3386
dibb3386
M
  • Question
Android Question Spinner UI Elements/Properties
Replies
8
Views
5K
Erel
Erel
derez
  • Article
B4A Class AnalogWheel
Replies
10
Views
6K
derez
derez
Top