B4A Library [Library] ComboBox

This is a windows/Linux/Mac style combobox with a drop down item list. It is highly customizable and easy to use. The package includes a demo project and documentation on how to use each method. Below is a list of methods in the library.

==== NOTE ====
This is version 1.27 of the combobox. See the 1.27 changes at the end of this post. The class source is now included in the zip file.

The zip file includes a test project with the class source of the combobox.

MLComboBox
Author: Jem Miller
Version: 1.27

• MLComboBox
  Events:
  • ItemClick (Position As Int, Value As String)
  • ItemLongClick (Position As Int, Value As String)
    
  • TextChanged (Old As String, New As String)
  Methods:
  • IsInitialized As Boolean
    Tests whether the object has been initialized.
  • Additem (Item As String, Img As BitmapWrapper) As String
    Adds an item to the dropdown list. With or without a bitmap.
    Item - the text to add
    Img - The bitmap to add. Pass Null for no bitmap.
  • Additemat (Position As Int, Item As String, Img As BitmapWrapper) As String
    Adds an item to the dropdown list at a specified position.
    Position - the position to insert the item. Must be 0 to Size - 1
    Item - the text to add
    Img - The bitmap to add. Pass Null for no bitmap.
  • Asview As PanelWrapper
    Pass this to the AddView call of the Activity or Panel after you initialize the combobox.
    
    Example:
    cb.Initialize(Activity, Me, Panel1, "cb")
    Panel1.AddView(cb.AsView,0 ,0, 150dip, 40dip)
  • Buttoncolor (fgColor As Int, bgColor As Int) As String
    Changes the button foreground and background colors.
  • Buttonicon (Bmp As BitmapDrawable) As String
    Sets a bitmap to the button.
    The default V will NOT be visible
    The Button Is 30dip wide by Height tall, and will fill the Button centered.
  • Clear As String
    Clears all entries of the combobox and dropdown list.
  • Color (bgColor As Int) As String
    Sets the color of the combobox
  • Comboedit_textchanged (Old As String, New As String) As String
  • Dropclose As String
    Closes the dropdown list.
  • Dropcolor (newColor As Int) As String
    Sets the color of the dropdown list.
  • Dropopen As String
    Opens the dropdown list. Can be used for Menu key press.
    Self adjusts for the Activity height so the drop down does not go past the bottom of the screen.
    Also resizes itself for long lists.
  • Dropshowing As Boolean
    Returns True if the drop down box is being shown.
  • Droptextcolor (newColor As Int) As String
    Sets the text size of the dropdown list.
  • Droptextsize (newSize As Int) As String
    Sets the text size of the dropdown list.
  • Getitem (Position As Int) As String
    Returns the text at Position number given
  • Gettext As String
    Gets or sets the value of the combo box.
  • Indexof (Txt As String) As Int
    Returns the position number of the text item given in Txt.
  • Initialize (Owner As ActivityWrapper, Module As Object, Parent As ConcreteViewWrapper, Event As String) As String
    Initializes the object.
    Parent - The calling Activity.
    Caller - Module name. Must be Me
    Parent - The parent panel. Pass null if the combobox is not being added to a panel.
    Event - Name of your ItemSelected(Position as Int, Value as String) event. Use "" if no event is needed.
    
    Example:
    cb.Initialize(Activity, Me, Null, "cb")
  • Linecolor (newColor As Int) As String
    Changes the Line color of Borders and lines between items
  • Removeitemat (Position As Int) As Boolean
    Removes an item from the dropdown list at a specified position.
  • Setbuttonwidth (newWidth As Int) As String
    Sets the width of the drop down button. Default width is 30dip.
    The button height is the same as the component Height - 2Dip.
  • Setdefault (Position As Int) As String
    Sets the item to show in the combobox.
  • Sethint (Txt As String) As String
    Sets the hint displayed if the combo text is empty.
    Default is Touch to display list.
  • Size As Int
    Returns the number of items in the dropdown list.
  • Txtcolor (TextColor As Int) As String
    Sets the text color of the combobox.
  • Txtsize (TextSize As Int) As String
    Sets the text size of the combobox.
  Properties:
  • Buttonwidth As Int
    Sets the width of the drop down button. Default width is 30dip.
    The button height is the same as the component Height - 2Dip.
  • Default As Int
    Sets the item to show in the combobox.
  • Height As Int
    Gets or sets the Height.
  • Hint As String
    Sets the hint displayed if the combo text is empty.
    Default is Touch to display list.
  • Left As Int
    Gets or sets the left position of the combobox.
  • Readonly As Boolean
    Get or Set the text box as read only or editable
    Pass True for read only mode or False if the user can enter a value not in the Dropdown list
  • Text As String
    Gets or sets the value of the combo box.
  • Top As Int
    Gets or sets the Top position of the combobox.
  • Width As Int
    Gets or sets the Width.

Note that in b4a 2.7x and up the properties appear as normal properties and not as individual items. For example setHeight and getHeight will not appear in the IDE. Instead a single Height property will set or get the value. This is true for Top, Left, Width, Text, and others as well.

I'm sure there are going to be some issues or requests, so don't hesitate to report something.

--- Jem


- Version 1.00 - Initial release.

- Version 1.20 - Many fixes and additions. Added the AsView method to allow for use in a panel or activity (see the docs inside the .zip file). Includes an updated demo project. Added the ability to add bitmaps to the drop down items. If a bitmap is not needed, pass Null to the Img parameter of AddItem or AddItemAt. Bitmap items will display along with non bitmap items in the same drop down list. Changed the display of the component a bit. Added setHint to display a hint in the text box if it is empty (defaults to Touch for list). Read the included MLComboBox.txt file for more instructions and examples.

- Version 1.21 - Minor fixes and tweeks.

- Version 1.22 - The text box is now editable.

- Version 1.23 - This version adds a setText method to set the text of the text box. It also ensures that the dropdown displays on top of any other elements in your layout. The test project was also modified slightly.

- Version 1.25 - This version cures some problems mentioned in the comments and a few that I found as well. The dropdown is now free-floating so that it can resize or reposition itself as needed to keep the list on the screen.

- Version 1.26 - This version changes the way the dropdown is displayed if the parent is a panel (pass the panel as the Parent parameter in the initialize method or null if adding to an activity).

- Version 1.27 - Added the ReadOnly property. This property defaults to TRUE. Set this to FALSE if you want the user to be able to edit the text box or to add text without selecting an item from the dropdown box. This may require you to change your existing code!

- Version 1.28 - Added the ItemLongClick event. This will fire if an item in the drop down list is long pressed.

Thanks

 

[melamoud]

using the combobox inside a dialog

hi,

I have problems when I try to put the combobox inside a dialog,
1. click an item does not do anything, only when the show ends it call the module itemclick sub (I guess this is part of the be modal issues, but the click to open the list works, if you can fix it that the click on the item will close the list and copy the text to the editbox that will be great (I do not need the event)
2. if I have other items on the dialog below the coombo box the list appear under the other items (I have a text box) - can you fix that as well ?

thanks

 

[melamoud]

hi,

I have problems when I try to put the combobox inside a dialog,
1. click an item does not do anything, only when the show ends it call the module itemclick sub (I guess this is part of the be modal issues, but the click to open the list works, if you can fix it that the click on the item will close the list and copy the text to the editbox that will be great (I do not need the event)
2. if I have other items on the dialog below the coombo box the list appear under the other items (I have a text box) - can you fix that as well ?

thanks

and a feature request, can you add setText method ? so I wont need to add the text to the list and choose it as default - thanks

 

[HotShoe]

hi,

I have problems when I try to put the combobox inside a dialog,
1. click an item does not do anything, only when the show ends it call the module itemclick sub (I guess this is part of the be modal issues, but the click to open the list works, if you can fix it that the click on the item will close the list and copy the text to the editbox that will be great (I do not need the event)
2. if I have other items on the dialog below the coombo box the list appear under the other items (I have a text box) - can you fix that as well ?

thanks

Odd, all of my devices work properly when an item is clicked. It closes the dropdown and fills in the text box with the selected item.

I have updated the library to make it alwats display the dropdown on top now. Thanks for reminding me.

--- Jem

 

[HotShoe]

and a feature request, can you add setText method ? so I wont need to add the text to the list and choose it as default - thanks

Great idea, and I have added it to this version (1.23).

Thanks,

--- Jem

 

[melamoud]

Its working in activity but not when added to a modal dialog can you check?

Thanks

Sent from my SCH-I545 using Tapatalk 2

 

[HotShoe]

Its working in activity but not when added to a modal dialog can you check?

Thanks

Sent from my SCH-I545 using Tapatalk 2

Do you have some sample code that does not work? I don't know how you are defining modal dialog, but it works in activities and panels here. I need more information to find the problem.

--- Jem

 

[melamoud]

here it is

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(a As activity)
   Dim nd As CustomDialog
   Dim lblFpath As Label
   lblFpath.Initialize("")
   lblFpath.Text = "test"
   
   
   Dim p As Panel
   p.Initialize("")
   nd.AddView(p,0,0,100%x,100%y)
         
   p.AddView(lblFpath,0,0,100%x,20%y)
         
   Dim edt_Author As MLComboBox
   edt_Author.Initialize(a, Me, p, "edtAuthor")
   
      
   edt_Author.DropColor(Colors.Red) 'uncomment these to test colors and text size
   edt_Author.DropTextColor(Colors.White)
    'edt_Author.DropTextSize(18)


   edt_Author.AddItem("artist 1", Null)
   edt_Author.AddItem("artist 2", Null)
   edt_Author.AddItem("artist 3", Null)
   edt_Author.AddItem("artist 4", Null)
   edt_Author.AddItem("artist 5", Null)
   edt_Author.AddItem("artist 6", Null)
   edt_Author.AddItem("artist 7", Null)
   p.AddView(edt_Author.AsView,0,25%y,60%x,150dip) ' these values don't work so the porition is set below
   
   edt_Author.setLeft(0)
   edt_Author.setTop(25%y)
   edt_Author.setWidth(60%x)
   edt_Author.setHeight(50dip)

   Dim edt_song As EditText
   edt_song.Initialize("")
   edt_song.Hint = "Song Name"
   edt_song.HintColor = Colors.Gray
   edt_song.Text =  "test"
   edt_song.ForceDoneButton = True
   edt_song.SingleLine = True
   p.AddView(edt_song,0,25%y+100dip,100%x,60dip)
   
   Dim ret As Int
   
   ret = nd.Show("Enter artist and song names","Resolve","Cancel","",Null)
   If (ret = DialogResponse.POSITIVE) Then
      Log("Choose to resolve: artist=" & edt_Author.Text & " song:" & edt_song.Text)
         Log("Artist text is: " & edt_Author.Text)
   Else
      Log("Choose to cancel")
   End If
End Sub

Sub edtAuthor_ItemClick(Position As Int, Value As String)
   Log("item click:" & Value)
End Sub

 

[HotShoe]

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(a As activity)
   Dim nd As CustomDialog

Hmm, I've never used (or known about) a custom dialog, so I'll need to study this and see what can be done.

--- Jem

 

[HotShoe]

Melemoud,

I have looked into this, but I have decided not to take any action. that's because it is only happening while using a custom modal dialog library. It is too specific to rip the thing apart to mess with.

Thanks,

--- Jem

 

[melamoud]

No problems Im using a regular view right now

Thanks for adding set text feature so fast.

 

[jfranz]

Almost a complete version

This is the closest and best example of dropdown support that is currently available on this site. Only thing is it's missing the following attributes.

1. Option to force selection of item in list.
2. Filter results as they type. Similiar to the SeachView by Erel.

I wish source code for library's like this were available so that more Views could be created by myself and others. I fight with lack of good quality views other than the generic one's Erel has included in the Designer. I don't have hours and hours to invest in searching through this forum when most of them answer very easy issues.

Thanks for this dropdown and I look forward to seeing more support built into this one.

 

[HotShoe]

Thanks for the kind words Jfranz. I have attached the source to the first post. It is a b4a class that gets compiled to a library, but it works fine as a normal class file as well.

I like your suggestions. The first is pretty simple, not sure about the second though. I'll play around with it.

Thanks,

--- Jem

 

[jfranz]

Wow, what great support the users of B4A provide. I expected an answer within a week or so and didn't expect the source to this. I can't wait to get home and look over the code and play with it. Thank you very much for the time spent on this and hopefully I can offer some additional help or support in the future.

 

[moster67]

Hi Jem,

Many thanks for this control.

I have been playing with your code (using the zip-file with the source-code) and it works really well.

However, I noted that if I use your demo-code running ICS or Jelly Bean with an emulator, the click-event of the droplist only works the first time while on all successive clicks, the event is not triggering. This is not entirely true, eventually it will trigger but you can never tell when. Oddly enough this does not happen on my Nexus7-device! Needless to say, I have created more than one emulator or re-creating them and the result is always the same. Running an emulator with Gingerbread works fine.

Are you aware of this? Is there any workaround to get it working using the emulator?

 

[Steve Miller]

Would you be able to update the control so that a value and text can be added to the combobox? Then the user can use getText to get the text displayed, or a new method getValue where the user can get the value of the item. Also, the user can use setText to set the selected item in the box by text string, or a new method setValue to set the selected item by value.

For instance, suppose I want to load a combobox with the states. I would load the following:

Value='AL', Text='Alabama'
Value='NY, Text='New York'
etc.

Then If I can set the default selected item by value ('AL', 'NY', etc) using setValue, or by text ('Alabama', "New York', etc.) using setText.
I can also get the selected item by value using getValue, or by text using getText.

Hopefully, this can be done. This is a feature I really need. Thanks!

 

[HotShoe]

Hi Jem,

Many thanks for this control.

I have been playing with your code (using the zip-file with the source-code) and it works really well.

However, I noted that if I use your demo-code running ICS or Jelly Bean with an emulator, the click-event of the droplist only works the first time while on all successive clicks, the event is not triggering. This is not entirely true, eventually it will trigger but you can never tell when. Oddly enough this does not happen on my Nexus7-device! Needless to say, I have created more than one emulator or re-creating them and the result is always the same. Running an emulator with Gingerbread works fine.

Are you aware of this? Is there any workaround to get it working using the emulator?

HIya Moster, long time no type my friend. No, I rarely ever use an emulator for my stuff, but I will create one and see what it is doing. I'll post back when I know more.

Thanks,

--- Jem

 

[HotShoe]

Would you be able to update the control so that a value and text can be added to the combobox? Then the user can use getText to get the text displayed, or a new method getValue where the user can get the value of the item. Also, the user can use setText to set the selected item in the box by text string, or a new method setValue to set the selected item by value.

For instance, suppose I want to load a combobox with the states. I would load the following:

Value='AL', Text='Alabama'
Value='NY, Text='New York'
etc.

Then If I can set the default selected item by value ('AL', 'NY', etc) using setValue, or by text ('Alabama', "New York', etc.) using setText.
I can also get the selected item by value using getValue, or by text using getText.

Hopefully, this can be done. This is a feature I really need. Thanks!

So, you want it to act as a hash table? What would the dropdown display? would it be 2 columns, or just the index values? I'm not sure I fully understand what the dropdowns function would be in this arrangement.

Thanks,

--- Jem

 

[Steve Miller]

So, you want it to act as a hash table? What would the dropdown display? would it be 2 columns, or just the index values? I'm not sure I fully understand what the dropdowns function would be in this arrangement.

Thanks,

--- Jem

For my purposes, I would like to display 'Alabama', 'New York', etc. in the dropdown portion. That's what the user would see. For instance, the user selected 'New York' from the dropdown. There could be two method calls.

getText = return the text of the selected item from the dropdown, in this case 'New York'.
getValue = return the value of the selected item from the dropdown, in this case 'NY'.

 

[peacemaker]

If the view is placed at the screen bottom - it cannot be ised, right ?
Would be good, if it is open above itself, if at bottom. As standard "big brother" OS comboboxes.

 

[HotShoe]

I thought it did. I'll look at it tonight and make any changes needed.

Thanks,

--- Jem