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.

AutoCompleteTextField

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

BrowserComponent

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

Button

Simple Button
Button allows us to bind events to a click

Link Button

Hyperlink Button
Button can also be used as a hyperlink

Calendar

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.

CheckBox

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

ComboBox

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

Command

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.

ComponentGroup

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

Dialog

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

InfiniteContainer

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

Label

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

List

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

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

Slider

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

SwipeableContainer

Swipeable Container
SwipeableContainer enables side swipe gesture to expose additional functionality

Tabs

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

Carousel

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

TextArea/Field

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

TextComponent

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

Table

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

Tree

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

ChartComponent

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

ImageViewer

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

InfiniteProgress

InfiniteProgress
InfiniteProgress provides a constantly spinning component

InteractionDialog

InteractionDialog Sample
InteractionDialog an "always on top" Dialog

MediaPlayer

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

MultiButton

MultiButton usages Sample
MultiButton is much more than a button

OnOffSwitch

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

ShareButton

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

SpanLabel

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

SpanButton

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)

ToastBar

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

SignatureComponent

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

Accordion

Accordion Component
Accordion displays collapsible content panels

FloatingHint

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

FloatingActionButton

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