Playground Sample Templates
Building a Good-Looking Login Form
A good looking login/registration experience is a must have for any app. Here is a simple yet elegant looking login form example.
Rich animations power this city guide sample app, including a card-based UI.
Swipeable Cards with Animations
Build an engaging UI with this SpaceX spacecraft info starter app.
Custom Cradle Tab Bar
A navigation bar with a cradle-like effect that can be either dragged or clicked
Master/Detail with SideDrawer and Image Background
A master/detail UI that uses a SideDrawer as the master list with a styled view (with image background) as the child item.
Restaurant Menu App
Browse a restaurant menu with this engaging app UI.
3D Flip Animation
3d horizontal and vertical animation of an Apple Card using only CSS.
Filterable ListView with Images
Actively filter a listview with text entered in a Search Bar.
Browse movies and even reserve your seats with this sample app.
News Feed with Images and Text Items
An easy way to display a news feed with an option to filter stories as well.
Create an order and split the cost with your friends.
Tinder-like Swipeable Cards
Swipe through a series of cards with this UI sample.
A custom Floating Action Button with eye-candy transitions.
This sample shows how to use the power of NS Layouts and CSS to build a material design based components for either iOS or Android.
Carousel Sample Implementation
A sample carousel implementation in NativeScript without relying on plugins, built with ui builder and animations.
Rich UI - Social Fitness Tracker
A gorgeous app design for creating a social fitness tracker app (with charts!).
Animated Tab Bar
This sample shows how easily we can build a tab bar with sliding animations
Image ListView with Text Overlay
Highly styled image-focused listview with text overlapping items.
Split it Up
This app contains a design for splitting up a bill amongst friends.
Animated Rotating Menu
This sample shows how easily we can build a menu with rotating animations.
Drawer with Item Highlight
A basic styled drawer with a highlighted item and an image background in the header.
Music Player UI
An app design for an engaging music player app.
Adding Basic Gestures to Your Apps
A simple demonstration of how to bind to user interface components to common gestures in your NativeScript apps.
Basic Usage of RadSideDrawer
Do you have lots of menu items? Don't you worry, the RadSideDrawer has got your back. It's very simple to add a Drawer to your application.
Need a color picker for your app? Take a look at this implementation.
Creating a Modal Page
Modal pages are perfect when you want the user to select something without leaving the current page. Or even show a small form.
Implementing Phone- and Tablet-specific Styling
Learn how to alter your user interface based on phone and tablet form factors.
Adding Dialogs to Your App
Dialogs help you to give quick feedback to the user about something. Or prompt the user to enter something, or to choose between multiple options.
Drawer with Avatar
A basic styled drawer with an avatar image.
ListView and Details Page with Animating Header
You can easily create Master/Detail UI with nice animations and transitions.
Book your next travel destination with this sample app.
Basic Usage of RadCalendar
RadCalendar from NativeScript UI has all the features you need to show calendar, range date picking, showing events, and more.
Building ListViews with Avatars/Thumbnails
Often times you need the list UI in your app to have an image for each item. Here's an easy way to do that.
Creating Float-Up Text Labels
Provide simple but effective label animations for when users focus on individual form elements.
Getting a User's Current Location
Need to get the geocoordinates or address of the user? NativeScript-Geolocation makes that a breeze.
Start building an app to track investments with this sample.
A simple animation to create a ripple effect using only core animation techniques.
Creating Circular Progress Bars
Linear progress bars are boring! How about we use some circular ones?
Implementing a Parallax Scroll Effect
Provide an engaging parallax effect to your views with a simple animation.
Playing with Shadows
Simple app showcasing the text-shadows plugin with drag effects.
NativeScript Quiz App
Play the quiz with list of categories & questions and even get last quiz score and last quiz date.
Adding Video to Your App
NativeScript-Video makes it easy, just drop a Video tag, with a src attribute and boom, you've got video!
Creating Card UIs
Use cards in your app to build attractive UI. Keep it minimal and simple.
Detecting Online/Offline Connectivity
You can easily monitor the network status of a device using NativeScript's connectivity module.
Internet connection status bar
Want to notify user if the device is offline? Display Internet connection status bar
RadListView with Pull-to-Refresh
A simple news feed that uses RadListView from the pro NativeScript UI components along with pull-to-refresh functionality built-in.
Storing and Retrieving Local Data
You can store and retrieve data in your app using the application-settings module. This demo shows you the various application-settings APIs.
Working with Audio Files
Need to play an audio file (e.g. mp3) in your app? Look no further than this audio sample app.
Groceries app using SQLite
This sample shows how to build a fully functional offline task-tracking app (groceries) using a sqlite database.
ListView with Card UI
A listview with card-based UI items that are variable sizes.
Upload Image to HTTP Service with Progress Info
A sample utilizing nativescript-imagepicker and nativescript-background-http plugins
A functional clock built with Absolute Layout
This sample shows how easily we can build a clock with the power of Absolute Layout and just a few lines of code.
Basic ListView with Images
Multi-column listview with images and text overlay.
Building Custom Modal Dialogs
You can easily create modal dialogs that contain custom UI.
Configuring Page Transitions
Add sleek-looking transition animations when navigating between pages. There are many predefined animations to choose from.
Browse available hotel rooms with this sample app.
Movie Watch List
Allows you to page through the entire Marvel movie timeline, with the ability to mark movies as watched.
Simple Styled Login Form
A basic UI-only view to inspire styled login form ideas.
Do you expect users to input things from a list? The RadAutoCompleteTextView is a UI element that makes this easy.
Cricket Score App
A sample app that provides live cricket scores with some unique UI concepts.
Implementing Split-View Components
For when you want a two-column layout on tablets, but a one-column layout on phones.
RadListView with Favorites
A listview that allows you to mark specific items as favorites via a swipe action.
Sports Score Viewer
A UEFA Champions League sample app that can be customized for any league.
VOD (Video On Demand) app, with nice animations and a login screen.
RGB Color Picker
Experiment with color selections by mixing RGB values with nice animations.
Get a head start on building a new social networking with this sample app design.
Using the Camera to Take a Picture
Need to take a picture and save it to the device? Look no further.
Using Multiple ListView Templates
Have a list of different types of items? You can easily define different templates based on conditions, and the ListView will choose the right one.
iOS NavigationBar with Large Title
iOS has recently introduced the concept of a large navigation bar title when the user needs to provide extra emphasis on context. This is a simple workaround that emulates this behavior.
Music Streaming App
This sample app contains an amazing design for to help boostrap the next great music streaming app.
Displaying a Basic Chart with RadChart
Use NativeScript UI's RadChart component to display data creatively in your apps. There are various chart types to choose from. This demo shows a bar chart.
Flight Booking UI
A step-by-step interface for booking a flight.
Personal Finance Tracker
A sample app containing some starter screens for building a personal finance tracking app.
A simple and easy-to-use dialog
This sample shows how to build a simple dialog that you can style and drop into any page.
Displaying a Basic Gauge with a RadGauge
Use NativeScript UI's RadGauge to show progress of a task or any circular UI/UX experience that involves gauges.
Instagram Clone with Image Filters
A limited clone of Instagram with a camera module and image filters.
Simple Card UI with Modal Views
Get a tarot card reading - emoji style - with this engaging sample app.
A personal finance sample app with a calendar component.
App Menu Items with Repeater
An alternative type of listview that uses a repeater to display a menu of items.
Bottom Navigation Bar for Android
A fully-functional bottom navigation bar for Android using NativeScript components.
Composing an Email Message
If you need the ability to automatically or manually compose an email from your app and let the user use their mail client of choice to send it, check out this sample.
©2015-2021, Master Technology.