Use the Android Checkbox with NativeScript

checkbox

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 ‘android.support.design library’ with the following line:

	compile "com.android.support:design:23.1.1"

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="http://schemas.nativescript.org/tns.xsd">
    <Placeholder row="0" creatingView="creatingCheckbox"/>
</Page>

Now our main-page.js file will be:

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

function creatingCheckbox(args) {
     var cb = new android.support.v7.widget.AppCompatCheckBox(app.android.currentContext);
     var backgroundColor = new color.Color("#F44336");
     cb.setButtonTintList(android.content.res.ColorStateList.valueOf(backgroundColor.android));
     cb.setText("Native Checkbox :)");
     cb.setChecked(true);
     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.

Conclusion

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!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s