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

  • SD_Spinner 1.02.zip
    19.7 KB · Views: 1,311
Last edited:

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User

Star-Dust

Expert
Licensed User
Longtime User

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User
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.

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

A greeting.
 

Star-Dust

Expert
Licensed User
Longtime User
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

  • Sample.zip
    19.4 KB · Views: 519
Last edited:

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User
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.

It works perfectly.. Thanks a lot

Could you say me how can I obtain the item of the scrollview where the
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.

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:
B4X:
sub SD_Spinner1_ItemClick (Position As Int, Value As String)
    Log(Position & " " & Value)
    Dim spinner As SD_Spinner = Sender
    ...
End Sub
 

Star-Dust

Expert
Licensed User
Longtime User
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:
B4X:
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
 

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User
B4X:
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

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:
B4X:
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:
B4X:
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

  • xCustomListView con SD_Spinner.zip
    23.3 KB · Views: 465

mahdi atashjam

New Member
Licensed User
Longtime User
Hello friends
I simply solved this problem

You will not have a problem even in scrollview

See line : 79 & 113



B4X:
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

  • sdSpinner.bas
    13.6 KB · Views: 353

Star-Dust

Expert
Licensed User
Longtime User
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.
 

JGiunta

Member
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
What i use to change the background:
    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:
My whole 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.
 

Star-Dust

Expert
Licensed User
Longtime User
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?
 
Top