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

 

[yttrium]

What are the differences between this and the standard Spinner?

 

[Theera]

Could insert image each of members?

 

[HotShoe]

What are the differences between this and the standard Spinner?

The dropdown is different and most items can be changed at run time.

--- Jem

 

[HotShoe]

Could insert image each of members?

Yes I can add that to the next version.

--- Jem

 

[Theera]

Yes I can add that to the next version.

--- Jem

I will waiting for your work,Cheer

 

[yttrium]

The dropdown is different and most items can be changed at run time.

--- Jem

All items of a Spinner can be changed at runtime.

I'll check it out though!

 

[HotShoe]

New version added

Version 1.20 is attached to the first post.

--- Jem

 

[RichardBernard]

Hi Jem,

Thanks for the great work! I have an issue with implementing your Combobox with my tabbed application. The Combobox shows in every tab! Do I have to initialize it in a certain way or can I possibly hide it when on other tabs? Or perhaps I have to uninitialize it or initialize it back again?

Would appreciate any suggestions.

R

 

[yttrium]

Hi Jem,

Thanks for the great work! I have an issue with implementing your Combobox with my tabbed application. The Combobox shows in every tab! Do I have to initialize it in a certain way or can I possibly hide it when on other tabs? Or perhaps I have to uninitialize it or initialize it back again?

Would appreciate any suggestions.

R

Can you share the code you use to initialize the Combobox? Also, what tabs are you using?

I think you're initializing it on the Activity's view rather than the Panel's View that tabs use.

 

[RichardBernard]

Sure, thanks for the quick reply. Yes I am:

----------------------------------------------------------------
   Dim MainTab As TabHost
   Dim VirtualWallControl_Frame, Main_Frame As Panel
   Dim HRVStateCombo As MLComboBox
--------------------------------
HRVStateCombo.Initialize(Activity, Me, Null, "HRVStateCombo")
Activity.AddView(HRVStateCombo.AsView, 0,0,40,40)
----------------------------------------------------------------

I also tried to initialize it to the this panel I use, but it didn't quite work (Perhaps I was doing it wrong):

----------------------------------------------------------------
InitFrame(VirtualWallControl_Frame,4,Colors.Transparent,Colors.Gray)
--------------------------------
Sub InitFrame(pnl As Panel,BorderWidth As Float,FillColor As Int,BorderColor As Int)
   Dim Rec As Rect
   Dim Canvas1 As Canvas
   Dim BorderWidth_2 As Float
   BorderWidth_2=BorderWidth/2
   Rec.Initialize(BorderWidth_2,BorderWidth_2,pnl.Width-BorderWidth_2,pnl.Height-BorderWidth_2)
   Canvas1.Initialize(pnl)
   Canvas1.DrawRect(Rec,FillColor,True,FillColor)
   Canvas1.DrawRect(Rec,BorderColor,False,BorderWidth)
End Sub
----------------------------------------------------------------

R

 

[yttrium]

Sure, thanks for the quick reply. Yes I am:

In the future, please use

 tags.

You're incredibly overthinking it. See this line?
[CODE]Activity.AddView(HRVStateCombo.AsView, 0,0,40,40)

You should add HRVStateCombo to the Panel, not the Activity.

Main_Frame.AddView(HRVStateCombo.AsView, 0,0,40,40)

The activity is your overall view; it's your Windows Form.

The Tabhost is a series of panels (views) that cycle based on clicking their tabbed buttons above. Instead of drawing the combobox to one of the tabhost's views, you were drawing it to the Activity, placing it above the Tabhost, hence why it appeared on all tabs.

 

[RichardBernard]

Ok, thanks for the hint I went back and edited my post to comply with forum's theme.

Thank you very much! I remember doing that but because I previously had the size of the frame/panel smaller relative to the Combobox it wasn't showing, thus I thought I was doing it wrong.

Cheers,
R

 

[RichardBernard]

I've got another question, I have 12 items in the Combobox and my bottom items don't display as they exceed the height of my panel. It seems to scroll but not fully. Can I fix this by adjusting the extra margin around the items? Or is it possible to force the number of items displayed?

Again, I would appreciate any help.

R

 

[HotShoe]

Version 1.21 is now available from the first post.

--- Jem

 

[RichardBernard]

Version 1.21 is now available from the first post.

--- Jem

I made the panel called Combobox_Frame and BOOM it works!

HRVStateCombo.Initialize(Activity, Me, Combobox_Frame, "HRVStateCombo")
Combobox_Frame.AddView(HRVStateCombo.AsView, 0,0,40,40)

Thanks a million Jem!!

Richard

 

[MarcRB]

Hi,

Can this also be used to enter a text that is not in list?

90% the user will open the list and select an existing item.(so far ok)
but sometimes (10%) the user does have to enter self a text, because it is not in list.

Kind of use:
Enter the mark of a device:
Dell, HP. Lenovo, Sony are in list. The user can select one from list.
But sometimes a strange mark like Targa must be chosen, but because it is not in list, it has to be entered manualy.

In the example I could not find a way to enter text directly into the MLcombobox.

Best regards,
Marc

 

[walterf25]

Combobox

Great work Hotshoe, i've been wanting to create something like this, now i don't have to.

thanks,
Walter
:icon_clap:

 

[HotShoe]

Version 1.22 is available

Hi,

Can this also be used to enter a text that is not in list?

In the example I could not find a way to enter text directly into the MLcombobox.

Best regards,
Marc

You can now

Version 1.22 exposes the text box so that it is fully editable now.

--- Jem

 

[MarcRB]

That is awesome support!
I downloaded the Combobox and as you said. "Now we can!"

Many Thanks!