ui-views.md

nav-title	title	description	position
User Interface Widgets in NativeScript	UI: Widgets	Get familiar with the default user interface elements (widgets) in NativeScript.	14

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.

• Button
• Label
• TextField
• TextView
• SearchBar
• Switch
• Slider
• Progress
• ActivityIndicator
• Image
• ListView
• WebView
• TabView
• Dialogs

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

This widget provides a standard button widget that reacts to a tap event.

Native Component

Android	iOS
android.widget.Button	UIButton

Label

This widget provides a text label that shows read-only text.

Native Component

Android	iOS
android.widget.TextView	UILabel

TextField

This widget provides an editable single-line text field.

Native Component

Android	iOS
android.widget.EditText	UITextField

TextView

This widget provides an editable multi-line text view.

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

Native Component

Android	iOS
android.widget.EditText	UITextView

SearchBar

This view provides a user interface for entering search queries and submitting requests to search provider.

Native Component

Android	iOS
android.widget.SearchView	UISearchBar

Switch

This widget provides a two-state toggle switch with which you can choose between two options.

Native Component

Android	iOS
android.widget.Switch	UISwitch

Slider

This widget provides a slider which you can use to pick a numeric value within a configurable range.

Native Component

Android	iOS
android.widget.SeekBar	UISlider

Progress

This widget is a visual bar indicator of a progress in a operation. Shows a bar representing the current progress of the operation.

Native Component

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

ActivityIndicator

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

Native Component

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

Image

This widget shows an image. You can load the image can be from ImageSource or from URL.

Native Component

Android	iOS
android.widget.ImageView	UIImageView

ListView

This is a view that shows items in a vertically scrolling list. You can set an itemTemplate to specify how each item in the list should be displayed.

Native Component

Android	iOS
android.widget.ListView	UITableView

WebView

This is a view that shows web pages. You can load a page from URL or by navigating back and forward.

Native Component

Android	iOS
android.webkit.WebView	UIWebView

TabView

With the TabView control, you can implement tab navigation.

Native Component

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

Dialogs

The dialogs module lets you create and show dialog windows.