User Interface Widgets

NativeScript ships with a set of user interface views (also known as widgets) which you can use to build the user interface of a mobile application. Most of these views wrap the corresponding native view for each platform while providing a common API for working with it. For example, the Button view renders an android.widget.Button on Android and UIButton on iOS.

Defining the layout of the application is also an important part of the application development. For more information about the different layout containers that are available in NativeScript, see The NativeScript Layout System.

TIP: You can access the underlying native widget for each view at runtime using the following properties:

  • Android: <view>.android
  • iOS: <view>.ios

Accessing the native widgets might be useful when you want to use some platform-specific functionalities of the widget. You can find information about the underlying native component for each view below.

Button

The Button widget provides a standard button widget that reacts to a tap event.

button androidbutton ios

Native Component

Android iOS
android.widget.Button UIButton

Label

The Label widget provides a text label that shows read-only text.

label androidlabel ios

Native Component

Android iOS
android.widget.TextView UILabel

TextField

The TextField widget provides an editable single-line text field.

text-field androidtext-field ios

Native Component

Android iOS
android.widget.EditText UITextField

TextView

The TextView widget provides an editable multi-line text view.

You can use it to show multi-line text and implement text editing.

text-view androidtext-view ios

Native Component

Android iOS
android.widget.EditText UITextView

The SearchBar widget provides a user interface for entering search queries and submitting requests to the search provider.

search-bar androidsearch-bar ios

Native Component

Android iOS
android.widget.SearchView UISearchBar

Switch

The Switch widget provides a two-state toggle switch from which you can choose between two options.

switch androidswitch ios

Native Component

Android iOS
android.widget.Switch UISwitch

Slider

The Slider widget provides a slider that you can use to pick a numeric value within a configurable range.

slider androidslider ios

Native Component

Android iOS
android.widget.SeekBar UISlider

Progress

The Progress widget is a visual bar indicator of a progress in a operation. It shows a bar representing the current progress of the operation.

progress androidprogress ios

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = false) UIProgressView

ActivityIndicator

The ActivityIndicator widget is a visual spinner indicator which shows that a task is in progress.

activity-indicator androidactivity-indicator ios

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = true) UIActivityIndicatorView

Image

The Image widget shows an image. You can load the image from an ImageSource or from a URL.

image androidimage ios

Native Component

Android iOS
android.widget.ImageView UIImageView

ListView

The ListView shows items in a vertically scrolling list. You can set an itemTemplate to specify how each item in the list should be displayed.

list-view androidlist-view ios

Native Component

Android iOS
android.widget.ListView UITableView

HtmlView

The HtmlView represents a view with HTML content. Use this component instead of WebView when you want to show just static HTML content.

html-view androidhtml-view ios

Native Component

Android iOS
android.widget.TextView UILabel

WebView

The WebView shows web pages. You can load a page from a URL or by navigating back and forward.

web-view androidweb-view ios

Native Component

Android iOS
android.webkit.WebView UIWebView

TabView

With the TabView control, you can implement tab navigation.

tab-view androidtab-view ios

Native Component

Android iOS
android.support.v4.view.ViewPager UITabBarController

SegmentedBar

With the SegmentedBar control, you can implement discrete selection.

segmented-bar androidsegmented-bar ios

Native Component

Android iOS
android.widget.TabHost UISegmentedControl

DatePicker

With the DatePicker control, you can pick a date.

date-picker androiddate-picker ios

Native Component

Android iOS
android.widget.DatePicker UIDatePicker

TimePicker

With the TimePicker widget, you can pick a time.

time-picker androidtime-picker ios

Native Component

Android iOS
android.widget.TimePicker UIDatePicker

ListPicker

With the ListPicker widget, you can pick a value from a list.

list-picker androidlist-picker ios

Native Component

Android iOS
android.widget.NumberPicker UIPickerView

Dialogs

The dialogs module lets you create and show dialog windows.

dialog-confirm androiddialog-confirm ios

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© 2016 Progress Software Corporation. All Rights Reserved.