Android Code Snippet SD: Spinner with CustomView

I've created a new class with CistomView to have the same features on the spinner object as ListView. A second line of text and the ability to add an image beside each item.

Also there is the ability to put the screen in gray when you click on the spinner. And finally, the ability to represent each item with rounded edges. In the cases there is an image that will also be rounded.

Hope it may be useful to you

Proprietes
Enabled As Boolean
SelectedItem As String
SelectedID As String
SelectedIndex As String
GrayDisplay As Boolean ' If Make Screeen gray when click (Set/Get)
BColor As Int ' BackgroundColor of Spinner's Label (Get/Set)
TColor As Int ' TextColor of Spinner's Label (Get/Set)
HintColor As Int ' TextColor of Spinner's Hint (Get/Set)
RoundCorner As Boolean
If the spinner opens in an anomalous position:
Set these prorpietes (left e Top) to set the screen position of the spinner's aperture on the screen.
For this reason we do not recommend inserting the spinner inside a scrollView because it has problems calculating its opening, or setting the position from code using left and top
Left As Int
Top As Int ​

Method
Initialize (vCallback As Object, vEventName As String)
Add(Text As String, TextHelp As String,ID As String, BackgroundColor As Int, TextColor As Int, Gravities As Int,Image As Bitmap)
' Add Single element
AddAll(L As List, TextHelp As String, BackgroundColor As Int, TextColor As Int, Gravities As Int)
' Add a List
Size as int ' return number of elements
Clear ' Clear all elements
RemoveIndex(Position As Int) ' Remove element at Index
RemoveID(ID As String) ' Remove element from ID
GetItem(Position As Int) As String ' Get Value from position/index
GetItemFromID(ID As String) As String ' Get Value from ID
GetID(Position As Int) As String ' Get ID at position/index
SetIndex(Position As Int) ' Set selected from position/index
SetID(Id As String) ' Set selected from ID
SetBackgroundDrawable(Draw As ColorDrawable) ' Set Background with colordrawable
SetBackgroundImage(Bitmap As Bitmap) ' Set Background with image
SetLabelTextSize(TextSizeLabel As Int) ' Set Text Size of label
Close ' close a ListItem windows
Open ' Apen a ListItem Windows​

Event
ItemClick (Position As Int, Value as String)​

Update 1.02
Screen1.png Screen2.png Screen3.png Screen4.png Screen5.png Screen6.png
 

Attachments

Last edited:
Click to expand...
Star-Dust said:
Thanks, but I know how I should do it. But I'm off-site and you have to wait for it to come back.

PS. PS.xCustomListView uses scrollview does not use customListView, they are different things.
Click to expand...

I did not want to rush you in any way.
I will wait "anxious" for news of you.

A greeting.
 
I have attached the example.
You can not use SD_Spinner inside a CustomListView because you can not predict the exact location and then I modified the code by replacing the customListView with a ScrollView.
I made some minor changes to the class so that it can be inserted into a scrollView.

Then I update the example in post#1.
 

Attachments

Last edited:
Star-Dust said:
I have attached the example.
You can not use SD_Spinner inside a CustomListView because you can not predict the exact location and then I modified the code by replacing the customListView with a ScrollView.
I made some minor changes to the class so that it can be inserted into a scrollView.

Then I update the example in post#1.
Click to expand...

It works perfectly.. Thanks a lot

Could you say me how can I obtain the item of the scrollview where the
Star-Dust said:
I have attached the example.
You can not use SD_Spinner inside a CustomListView because you can not predict the exact location and then I modified the code by replacing the customListView with a ScrollView.
I made some minor changes to the class so that it can be inserted into a scrollView.

Then I update the example in post#1.
Click to expand...

thank you very much for your help. The spinner options are already correctly displayed.

Now, I haver a new problem. How can I get the data of the "item" corresponding to the SD_Spinner on which I selected one of the options?
In the correspondent event, "only" the number and value of the selected option come as parameters.

I'm trying like this, but I can not get it:
Code: 
sub SD_Spinner1_ItemClick (Position As Int, Value As String)
    Log(Position & " " & Value)
    Dim spinner As SD_Spinner = Sender
    ...
End Sub
 
Gabino A. de la Gala said:
It works perfectly.. Thanks a lot

Could you say me how can I obtain the item of the scrollview where the


thank you very much for your help. The spinner options are already correctly displayed.

Now, I haver a new problem. How can I get the data of the "item" corresponding to the SD_Spinner on which I selected one of the options?
In the correspondent event, "only" the number and value of the selected option come as parameters.

I'm trying like this, but I can not get it:
Click to expand...
Code: 
sub SD_Spinner1_ItemClick (Position As Int, Value As String)
    Log(Position & " " & Value)
    'Dim spinner As SD_Spinner = Sender
    Dim Item As String=SD_Spinner1.GetItem(Position)
    Dim HelpText as String =SD_Spinner1.GetHelpText(Position)
End Sub
 
Star-Dust said:
Code: 
sub SD_Spinner1_ItemClick (Position As Int, Value As String)
    Log(Position & " " & Value)
    'Dim spinner As SD_Spinner = Sender
    Dim Item As String=SD_Spinner1.GetItem(Position)
    Dim HelpText as String =SD_Spinner1.GetHelpText(Position)
End Sub
Click to expand...

Hello again. Attached project where I have managed to work with the SD_Spinner and a CLV and to display the list of options according to the SD_Spinner selected at any time.
Maybe you find it interesting to optimize it and apply it to your code.
But I still needed the same thing I asked you in the previous post.
In addition to obtaining the option selected in the sd_spinner, I also needed to know in which of the items of the CLV the said SD_Spinner was located to act accordingly.
For this I have added a tag in each of the items in the list of each SD_Spinner and thus be able to do a GetItemTag (x).
If there was a simpler way to do it, I would appreciate it if you told me how.
A greeting.

I need the equivalent of:
Code: 
Sub Spinner1_ItemClick (Position As Int, Value As Object)
    Dim Index = CLV1.GetItemFromView(Sender) As Int
    Dim ItemAux = CLV1.GetValue(Index) As ClvPedidosItem
    Dim KeyToSQLUpdate = ItemAux.LblCliente.text As String
    ToastMessageShow("Option: " & Position & ". Key for SQL Update: " & KeyToSQLUpdate, True)
End Sub

And now I can do:
Code: 
Sub SD_Spinner1_ItemClick (Position As Int, Value As String)
    Log("SD_Spinner:" & Position & " " & Value)
    Dim SD_SpinnerAux = Sender As SD_Spinner
    Dim ItemAux = SD_SpinnerAux.GetItemTag(Position) As ClvPedidosItem
    Dim KeyToSQLUpdate = ItemAux.LblCliente.text As String
    ToastMessageShow("Option: " & Position & ". Key for SQL Update: " & KeyToSQLUpdate, True)
End Sub
 

Attachments

Hello friends
I simply solved this problem

You will not have a problem even in scrollview

See line : 79 & 113



Code: 
private Sub DesignerList
    Dim HeightListView As Int = 0
    Dim Space As Int
   
    If ListItem.size>0 Then
        If AppPanel.IsInitialized Then AppPanel.RemoveView
        MyAct.addview(AppPanel,0,0,100%x,100%Y)
               
        If RoundCorner Then    ListPanel.Color=Colors.Transparent Else ListPanel.Color=BColorList
        ListPanel.RemoveView
        ListPanel.Panel.RemoveAllViews
        ListPanel.Panel.Height=0

        For i=0 To ListItem.Size-1
            Dim Item As Item
            Item.Initialize
           
            Item = ListItem.Get(i)
            Dim P As Panel
            P.Initialize("PanelClick")
            If RoundCorner Then P.Background=Corner(Item.BackgroundColor) Else P.Color=Item.BackgroundColor
           
            P.Tag=I
            Try
                Space=40dip
                Dim Ima As ImageView
                Ima.Initialize("")
                Ima.Gravity=Gravity.FILL
                If RoundCorner Then
                    Ima.SetBackgroundImage(RoundBorders(Item.Image,20dip))
                Else
                    Ima.SetBackgroundImage(Item.Image)
                End If
               
                P.AddView(Ima,0dip,5dip,40dip,40dip)
            Catch
                Space=0dip
            End Try
           
            Dim La As Label
            La.Initialize("")
            La.Text=Item.text
            La.TextSize=15
            La.Color=Colors.Transparent
            La.TextColor=Item.TextColor
            La.Typeface=Typeface.DEFAULT_BOLD
            La.Gravity=Item.G
           
            P.AddView(La,Space,0dip,mBase.Width-Space,30dip)
            If Item.texthelp.Trim<>"" Then
                Dim La As Label
                La.Initialize("")
                La.Text=Item.TextHelp
                La.TextSize=12
                La.Color=Colors.Transparent
                La.TextColor=Item.TextColor
                La.Gravity=Item.G
                P.AddView(La,Space,25dip,mBase.Width-Space,30dip)
            Else
                La.Height=50dip
            End If
            ListPanel.Panel.AddView(P,-mBase.Width,HeightListView,mBase.Width-2DIP,49dip)
            P.SetLayoutAnimated(10+(HeightListView/3),1dip,HeightListView,mBase.Width-2DIP,49dip)
            HeightListView=HeightListView+50dip
        Next
        ListPanel.Panel.Height=HeightListView
       
        Dim LeftSpinner,TopSpinner,HeightSpinner,Yafter As Int
       
        If GrayDisplay Then AppPanel.Color=Colors.aRGB(200,0,0,0) Else AppPanel.Color=Colors.Transparent
        If ScrollViewParent.IsInitialized Then
            If Left+mBase.Width+ScrollViewParent.Left>100%x Then LeftSpinner=100%x-mBase.Width Else LeftSpinner=Left
        Else
            If Left+mBase.Width>100%x Then LeftSpinner=100%x-mBase.Width Else LeftSpinner=Left
        End If
       
        Yafter=100%y-Top-mBase.Height
        If ScrollViewParent.IsInitialized Then
            baseTop=Top
            Yafter=Yafter+ScrollViewParent.ScrollPosition
            Top=Top-ScrollViewParent.ScrollPosition
        End If
        If (HeightListView>Top)And (HeightListView>Yafter) Then
            ' Non va bene dappertutto
            If (Top>100%y-Top-mBase.Height) Then
                'sopra é più grande
                TopSpinner=0dip
                HeightSpinner=Top
            Else
                'sotto è più grande
                TopSpinner=Top+mBase.Height
                HeightSpinner=100%y-Top-mBase.Height
            End If
        Else if (HeightListView>Top) And (HeightListView<=Yafter) Then
            ' Va bene di sotto
            TopSpinner=Top+mBase.Height
            HeightSpinner=HeightListView
        Else If (HeightListView<=Top)And (HeightListView>Yafter) Then
            ' Va bene di sopra
            TopSpinner=Top+mBase.Height-HeightListView
            HeightSpinner=HeightListView
        Else
            ' Haqspazio sopra e sotto
            TopSpinner=Top+mBase.Height
            HeightSpinner=HeightListView
        End If
       
        If ScrollViewParent.IsInitialized=False Then
            AppPanel.AddView(ListPanel,LeftSpinner,TopSpinner,mBase.Width,HeightSpinner)
        Else
            AppPanel.AddView(ListPanel,LeftSpinner,TopSpinner,mBase.Width,HeightSpinner)
        End If
        Top=baseTop
        'AppPanel.Visible=True
    End If
End Sub
 

Attachments

This is a class of over 3 years ago so it is now outdated. It probably won't be updated, but you can make some changes if you want.

Magazine today would have been written differently and certainly using the XUI library to make it cross-platform.
 
Hello Star-Dust!
Sorry for reviving this old thread, but i couldn't find a more recent spinner that allowed me to use an image.
It works perfectly, except for the background image: i can't figure out how to set it.
I mean, i use
Code: 
    Select Case SD_Spinner1.SelectedIndex

        Case 0

            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Rosso.png"))

        Case 1

            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Blu.png"))

        Case 2

            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Verde.png"))

        Case 3

            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Meta.png"))

    End Select
To set the background, but it doesn't work: no errors or anything, it doesn't set the image.
Now, i am a newbie in using B4A, but is it there something i must do before i can set the image?

Here you can find all the code for my test project:
Code: 
Sub Globals
    'These global variables will be redeclared each time the activity is created.
    Dim SD_Spinner1 As SD_Spinner
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout") 
    Dim Rosso, Verde, Blu, Meta As Bitmap
    Rosso.Initialize(File.DirAssets,"PallaRosso.png")
    Blu.Initialize(File.DirAssets,"PallaBlu.png")
    Meta.Initialize(File.DirAssets,"PallaMeta.png")
    Verde.Initialize(File.DirAssets,"PallaVerde.png")
    SD_Spinner1.Add("Pulsante Rosso","Rojo","0",Colors.White,Colors.Red,Gravity.CENTER,Rosso)
    SD_Spinner1.Add("Pulsante Blu","Blue","1",Colors.White,Colors.Blue,Gravity.CENTER,Blu)
    SD_Spinner1.Add("Pulsante Verde","Green","2",Colors.White,Colors.Green,Gravity.CENTER,Verde)
    SD_Spinner1.Add("Pulsante Meta","Meta","3",Colors.White,Colors.Black,Gravity.CENTER,Meta)
End Sub

Private Sub SD_Spinner1_ItemClick (Position As Int, Value As String)
    Select Case SD_Spinner1.SelectedIndex
        Case 0
            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Rosso.png"))
        Case 1
            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Blu.png"))
        Case 3
            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Meta.png"))
        Case 2
            SD_Spinner1.SetBackgroundImage(LoadBitmap(File.DirAssets ,"Verde.png"))
    End Select
End Sub

The images exist and are in the correct folder, and the Spinner has been put in the designer.

Thank you for your time.
 
I only saw your request now.

The library is very old and I don't remember much. Now you find cross-platform versions. Search my libraries.

Probably the background is covered by the fund of the various items. What exactly do you want to achieve?
 
You must log in or register to reply here.

Similar Threads

Star-Dust
  • Article Article
B4A Library [B4X] SD CustomKeyboard
3 4 5
Replies
92
Views
49K
Star-Dust
Star-Dust
I
  • Article Article
B4A Library UltimateWebView Custom View
4 5 6
Replies
116
Views
88K
Cesaral
C
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS WheelPicker - Spinner - a modern single/multiple choice picker view - based on xCustomListView [Payware]
7 8 9
Replies
173
Views
99K
Alexander Stolte
Alexander Stolte
Star-Dust
  • Article Article
B4J Library [B4X] [XUI] SD FlexGrid (Table)
10 11 12
Replies
231
Views
139K
Sylou
Sylou
Erel
  • Article Article
B4A Class [customview] - Numpad
Replies
16
Views
21K
Erel
Erel
Back
Top