Use the Android Checkbox with NativeScript


The other day I found myself needing a checkbox in my NativeScript app and out of the box there is no such component/widget provided by the {N} team. I knew that Android has a checkbox widget so I made my way to the docs here.

This is very easy to do and if you’ve read any of my previous posts about accessing the native APIs exposed by {N} then you know where this is going.

First, let’s access a Nativescript app, if you do not have one then run the following from your CLI

tns create ExampleCheckbox
cd ExampleCheckbox
tns platform add android

Once you have your project open in your IDE, navigate to the platforms/android folder and modify your build.gradle file to include the ‘ library’ with the following line:

	compile ""

Make sure you install/update the android support library that you have installed, at this time it is 23.1.1 and I’m using it here.

Since we are going to create the Checkbox from a native android constructor, our main-page.xml file needs to have the following:

<Page xmlns="">
    <Placeholder row="0" creatingView="creatingCheckbox"/>

Now our main-page.js file will be:

var app = require("application");
var color = require("color");

function creatingCheckbox(args) {
     var cb = new;
     var backgroundColor = new color.Color("#F44336");
     cb.setText("Native Checkbox :)");
     args.view = cb;

exports.creatingCheckbox = creatingCheckbox;

Again, if you’ve read my previous posts or have looked at any of the source code for NativeScript you’ll be able to see what is happening here. We are just creating a new ‘AppCompatCheckbox’ using the android classes provided and then I went ahead and added a couple methods to make it look presentable. The .setText() and .setButtonTintList() are inherited methods. To make this really functional you will need to wire up some other methods that are available in the docs. I chose to keep this simple to show how easy it really is. The NativeScript team currently has ‘Material Design’ on their roadmap for February so hopefully they will abstract a lot of this stuff into official widgets but in the meantime this should suffice if you really need it.


That was it, you now have a native checkbox in your Android NativeScript app. Pretty easy if you ask me. If anyone is interested in a plugin I will try to find time to write something quick to expose an XML widget to be used. If you have any questions, comments, or suggestions for future blog posts I would be glad to hear them. Thanks!

One thought on “Use the Android Checkbox with NativeScript

  1. Hi Brad, I had problems running the application in nativescript

    I followed all the steps to the letter but my error appears when I run the application

    since he tells me the following

    TypeError: Unable to read the ‘widget’ property of undefined


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s