Nativescript UI Basics : How to implement Nativescript CardView, GridLayout and Label ? - SpartaCode


Make your development faster and easier !

Nativescript UI Basics : How to implement Nativescript CardView, GridLayout and Label ?

UI basics of NativeScript :
In order to increase the look and feel of your mobile application, we need to use some good native apis available for Nativescript. One of majorly used component of UI is CardView.
CardView improves UI design to a major extend as you might have experienced in Android Development.
In this tutorial,
  We will learn about Gridlayout, CardView and Label NativeScript Components.
GridLayout is type of container which holds any component in NativeScript. You can find more such containers layouts at NativeScript Official Website.
CardView is beautiful component with shadow. CardView looks more beautiful with Ripple Effect which will be implemented in next tutorial.

Lets get started,

Step 1: Install CardView 
To install CardView in your Nativescript project type following command in your terminal/cmd :
tns plugin add nativescript-cardview
Hardly takes 5 seconds to install.

Step2: Import CardView and Label in your Project
Go to app.component.ts file in your project and add this following code
import * as elementRegistryModule from 'nativescript-angular/element-registry';
import * as LabelModule from "tns-core-modules/ui/label";
elementRegistryModule.registerElement("CardView", () => require("nativescript-cardview").CardView);

Once we have imported the Cardview and Label we can use it in this component.
Step 3: Using CardView in Layout
Now we can use cardview in layout. Here we have not created separate file for layout in order to make this tutorial more simple as possible.
Here we are using GridLayout to explain the concept of using container and Cardview in action.
Copy following code into app.component.ts(Component) template attribute as shown in below image:
<actionbar class="action-bar" title="My App"></actionbar>
    <!-- GridLayout with CardView and Label NativeScript -->
    <gridlayout columns="*,2*" height="100%" padding="5" rows="2*,1*,2*" style.backgroundcolor="lightgray" width="100%" xmlns:card="nativescript-cardview">
      <card:cardview col="0" elevation="10" marginright="5" radius="5" row="0">
      <label style.verticalalignment="center" text="Row 0 Col 0">
      <card:cardview col="1" elevation="10" radius="5" row="0">
      <label style.verticalalignment="center" text="Row 0 Col 1">

      <card:cardview col="0" colspan="2" elevation="10" marginbottom="5" margintop="5" radius="5" row="1">
      <label style.verticalalignment="center" text="Row 1 Col 0 with ColSpan = 2">

      <card:cardview col="0" elevation="10" marginright="5" radius="5" row="2">
      <label style.verticalalignment="center" text="Row 2 Col 0">
      <card:cardview col="1" elevation="10" radius="5" row="2">
      <label style.verticalalignment="center" text="Row 2 Col 1">

Lets us see how GridLayout is working to arrange these 5 CardViews in layout. Grid means rows and columns.As you can see in the code we have declared rows="2*,1*,2*" and columns="*,2*"

rows="2*,1*,2*" : Here device screen is divided into 3 rows.
                  Calculate the region size i.e. 2* + 1* + 2* = 5*.
                  If we consider screen height is 500pixels. 
                  Then 2* = 2 X (screenheight / 5) = 2 * 100 = 200 pixels.
                  Similarly, 1* equals 1 X (screenheight / 5) = 1 * 100 =100 pixels.
                  In this way, Screen size is divided across any screen size and density.

columns="*,2*"  : Here device screen is divided into 2 columns. Where * means 1*. 
                  If we consider screen width is 300 pixels. 
                  Then 1* =1 X (screenwidth / 3) = 1 X 100 =100 pixels.
                  So, first column is 100 pixels. 
                  Similarly for 2* = 2 X (screenwidth / 3) = 2 X 100 =200 pixels.
                  Remaining 200 pixels is occupied by second column. 

You can also add style for label :
    font-size: 18;

Now, Run the project using following command in terminal/cmd :
Android :
tns run android
tns run ios

Output :

Hope you learnt from tutorial.
Thank you. Comment and share with your best friends.


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. Javascript Online Training from India

  2. You completed a number of nice points there. I did a search on the issue and found nearly all people will have the same opinion with your blog. ui design agency san francisco

  3. I recently realized your website the other day and that i happen to be following it’s routinely. You’ve got great deal of tips proper here so i delight in your lifestyle of online site likewise. Preserve acknowledge that there are succeed! ui design agency san francisco

  4. Howdy just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome. ipad sketch

  5. Great survey, I'm sure you're getting a great response. Private Label