Skip navigation links

Codename One API

Package com.codename1.ui

Main widget package containing the component/container "composite" similar both in terminology and design to Swing/AWT.

See: Description

Package com.codename1.ui Description

Main widget package containing the component/container "composite" similar both in terminology and design to Swing/AWT.

Component/Container Relationship

Containers can be nested one within the other to form elaborate UI's. Containers use com.codename1.ui.layouts to arrange the components within. This is important as it allows a container can adapt to changing resolution, DPI, orientation, font size etc.

Component/Container Relationship Diagram

A container doesn't implicitly reflow its elements and in that regard follows the direction of AWT/Swing. As a result the layout can be animated to create a flowing effect for UI changes. This also provides improved performance as a bonus. See this sample of Container animation:

You can learn more about layout managers here and about event handling here.

Component Gallery

The component gallery below isn't complete or exhaustive but it should give you a sense of the types of widgets available within Codename One in a glance.


Simple usage of auto complete
AutoCompleteTextField provides suggestions as you type into the text field


Simple usage of BrowserComponent
BrowserComponent allows us to embed an OS native browser into the app and connect to its JavaScript runtime!


Simple Button
Button allows us to bind events to a click

Link Button

Hyperlink Button
Button can also be used as a hyperlink


Default calendar look
Calendar presents a visual date picker. Notice that we recommend using the Picker class which is superior when running on the device for most use cases.


Sample usage of CheckBox/RadioButton/ButtonGroup
CheckBox provides a check flag to tick on/off. RadioButton provides an exclusive check marking that only applies to one radio within the group. Both can also appear as toggle buttons


Rich ComboBox
ComboBox is a list with a single visible entry that can popup the full list. Notice that we recommend using the Picker class which is superior when running on the device for most use cases


Simple usage of Toolbar
Command & Toolbar provide deep customization of the title area and allow us to place elements in the side menu (hamburger), overflow menu etc.


Sample ComponentGroup Grouping
ComponentGroup allows us to group components together in a a group and manipulate their UIID's.


Dialog South
Dialog allows us to notify/ask the user in a modal/modless way.


Sample usage of infinite scroll adapter
InfiniteContainer & InfiniteScrollAdapter implement a Container that can dynamically fetch more data


Label text positioning
Label displays text and/or icons to the user


Sample of using the generic list cell renderer
List a list of items, this is a rather elaborate component to work with! We often recommend just using Container, InfiniteContainer or InfiniteScrollAdapter


MultiList and model in action
MultiList a list that is a bit simpler to work with than List List although our recommendation to use something else still applies


Sample Slider
Slider allows us to indicate progress or allows the user to drag a bar to indicate volume (as in quantity)


Swipeable Container
SwipeableContainer enables side swipe gesture to expose additional functionality


Simple usage of Tabs
Tabs places components/containers into tabbable entries, allows swiping between choices thru touch


Tabs carousel page 1
Tabs can also be used as a swipe carousel


Text field input sample
TextArea & TextField allow for user input via the keyboard (virtual or otherwise)


Text field input sample
TextComponent & PickerComponent wrap the text field and picker respectively and adapt them better to iOS/Android conventions


Table with customize cells using the pinstripe effect
Table displays optionally editable tabular data to the user


Tree with XML data
Tree displays data in a tree like hierarchy


Chart Component
ChartComponent can embed a wide range of visualization aids and animations into your app


Image viewer with dynamic URL fetching model
ImageViewer swipe, pinch to zoom and pan images


InfiniteProgress provides a constantly spinning component


InteractionDialog Sample
InteractionDialog an "always on top" Dialog


Media player sample
MediaPlayer allows playing media including video coupled with the MediaManager


MultiButton usages Sample
MultiButton is much more than a button


The looks of the on-off switch
OnOffSwitch allows us to toggle a state similar to the CheckBox but with a more modern look


Share on the device
ShareButton provides native "social share" functionality


SpanLabel Sample
SpanLabel a text label that "seamlessly" breaks lines


SpanButton Sample
SpanButton a button that "seamlessly" breaks lines

Picker (Date)

Android native date picker
Picker allows us to show an OS native picker UI (Date Picker)

Picker (Time)

Android native time picker
Picker allows us to show an OS native picker UI (Time Picker)


Android native time picker
ToastBar shows a non-obtrusive notice on the bottom of the Form


Signature Component
SignatureComponent shows a dialog that allows the user to "sign" using the touch screen


Accordion Component
Accordion displays collapsible content panels


FloatingHint Component
FloatingHint animates the text field hint into a label on top of the text field and visa versa


FloatingActionButton Component
FloatingActionButton hovers over the UI presenting a default action
Skip navigation links
Developed by Codename One