Back to Blog Home
← all posts

NativeScript app sample running on Android Wear

May 28, 2015 — by Lyubomir Blagoev

NativeScript has one of the biggest ecosystems around it, probably the biggest and most mature one for a mobile development framework. We combine the iOS and Android native ecosystems by supporting any native library and we also support npm.js and JavaScript ecosystems. We don’t know the count of all the libraries that exist in those ecosystems, but you can use many of them inside your shiny new native mobile application created with NativeScript. Combine this with our full native API support and you will understand why we can enable many scenarios out of the box.

 
Android Wear
Image courtesy - SlashGear.

One of the frequently asked questions is if it is possible to use your JavaScript skills with NativeScript and implement an app for wearable devices. The answer to this is Yes you can and in this blog post we will show you how to build an app that runs on the Android Wear devices. With our 1.1 release coming in two weeks we will support also Apple Watch devices so a future blog post will be dedicated to Apple Watch. If you are impatient check our WatchKit sample that uses the latest code from our GitHub repo.

Enough said, let’s start real coding :).

First let’s show what we are building. 

AboutTime Android Wear app







 










This article assumes you have the latest NativeScript CLI tools installed, your environment is setup correctly for NativeScript development and you have an Android Wear Emulator running.


  1. Let’s start by creating a new project and add the Android platform to it.

    tns create AboutTime --appid org.nativescript.aboutTime
    cd AboutTime
    tns platform add android

    This will create a NativeScript application with the correct project structure for Android applications. We need to change things a bit to make it support Android Wear.

  2. Go to AboutTime/platforms/android directory and edit the AndroidManifest.xml file.

          Add this line next to the <uses-permission ...> statements   

    <uses-feature android:name="android.hardware.type.watch" />


    and change the application theme to

    android:theme="@android:style/Theme.DeviceDefault"

     

  3. Go to AboutTime/app directory and remove all files except App_Resources directory.

  4. Create a bootstrap.js file in AboutTime/app directory and require the mainpage from it

  5. require("./mainpage");

  6. Create a mainpage.js file in AboutTime/app directory and add some code in it

    var MainActivity = (function (_super) {
        __extends(MainActivity, _super);
     
        function MainActivity() {
        }
     
        MainActivity.prototype.onCreate = function () {
         _super.prototype.onCreate.call(this, null);
     
          var resID = this.getResources().getIdentifier("activity_main" , "layout", this.getPackageName());
          this.setContentView(resID);
     
          var buttonId = this.getResources().getIdentifier("button" , "id", this.getPackageName());
          var button = this.findViewById(buttonId);
     
          var counter = 0;
          button.setOnClickListener(new android.view.View.OnClickListener("AppClickListener", {
              onClick:  function() {
                  button.setText("Hit me " + ++counter);
              }}));
        };
        return MainActivity;
         
    })(com.tns.NativeScriptActivity);
     
    app.init({
         
        getActivity: function(intent) {
            if (intent.getAction() == android.content.Intent.ACTION_MAIN) {
                return MainActivity;
            }
            else {
                fail("Unknown action");
            }
        },
         
         
        onCreate: function() {
            __log("Application on create called");
        }
    });

    This creates a MainActivity class and sets an click handler on the Button defined in layouts xml file below.



  7. Create the UI layout for the MainActivity.

    1. Go to AboutTime/platforms/android/res directory and create a layout directory there

    2. Create a file activity_main.xml in the layout directory AboutTime/platforms/android/res/layout/activity_main.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       
       <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
         android:orientation="vertical"
         android:layout_centerVertical="true">
       
         <TextView android:id="@+id/text"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Hit the button" />
           
         <Button android:id="@+id/button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/hit_me" />
         </LinearLayout>
    </RelativeLayout>

    This defines the Wearable application UI in a xml file like you would normally do when writing Wearable application.
    Our NativeScript code looks for and injects these UI definitions by calling this.setContentView(resID) above.

     

  8. Build your first Android Wear project with NativeScript

    tns build android

     

  9. Deploy your application to Android Wear Emulator and start the AboutTime application

    adb -e install AboutTime-debug.apk

     

 

 The screenshot below shows your first NativeScript application for the Android Wear.
AboutTime Android Wear app
That’s all folks. This is how you go about writing a NativeScript applications for Android Wear. Please share your feedback on this and please let us know if we can improve it.

The code for this sample is here: sample-Android-Wear

Follow us on twitter @NativeScript and star our NativeScript GitHub repo for more interesting code samples.


Cheers,
Lubomir Blagoev
T
he NativeScript Team