Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Using Polymer With Apache Cordova

TwitterFacebookRedditLinkedInHacker News

Making great mobile applications used to require a certain type of skill, but with the latest technologies you don’t need much more than basic web design knowledge. With the aid of Apache Cordova, developers can make native API calls directly from JavaScript functions. Pair this with a front-end framework like Adobe PhoneGap or my current favorite, Ionic Framework, and you can create stunning mobile applications with no more than CSS and HTML skills.

However, I recently discovered Polymer, a project by Google, and it looks pretty slick. The best part is you can easily use Polymer with Apache Cordova to create a native mobile application.

To make a native Android application using Polymer and Cordova, you must first be aware that it will work best with Android 4.4 and higher. For whatever reason, earlier versions of Android may produce questionable results when rendering the CSS that Polymer requires.

Let’s first create a Cordova project. If you already have Node.js and Cordova installed, great. If not, install them and proceed by running the following commands to create an Android project:

cordova create TestProject com.nraboy.testproject TestProject
cd TestProject
cordova platform add android

When using Polymer in general it is recommended to use Bower as it will handle all the many dependencies required. With Node.js installed run the following from the command line to install Bower:

npm install -g bower

When Bower is installed, navigate to the www directory of your Cordova test project and initialize it to use Bower:

cd www
bower init

Answer all the Bower initialization questions to the best of your ability and you’ll be left with a bower.json file in your www root. Our next goal is to download the Polymer components we plan to use and all their dependencies. From the command line run:

bower install --save Polymer/polymer
bower install --save Polymer/webcomponentsjs
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Now for the fun part. For the simplicity of this example we aren’t going to have much functionality. The goal here is to create a Polymer application that makes use of the scaffold, cards, floating action button, and toast notifications all on an Android device.

All of the Bower installs should have ended up in a directory called bower_components and if you’ve done everything right up to this point, that directory should be in the www directory of your Cordova project. In your index.html file replace all code with the following:

<!doctype html>
<html>
    <head>
        <title>Test Project</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
        <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
        <link rel="import" href="bower_components/core-menu/core-menu.html">
        <link rel="import" href="bower_components/core-item/core-item.html">
        <link rel="import" href="bower_components/paper-toast/paper-toast.html">
        <link rel="import" href="bower_components/paper-fab/paper-fab.html">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
        <style>
            html, body {
                height: 100%;
                margin: 0;
            }
            body {
                font-family: sans-serif;
            }
            core-scaffold {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            #core_toolbar {
                color: rgb(255, 255, 255);
                background-color: rgb(79, 125, 201);
            }
            #core_card {
                width: 96%;
                height: 300px;
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
                border-bottom-left-radius: 2px;
                box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
                margin: 2%;
                background-color: rgb(255, 255, 255);
                text-align: left;
            }
            paper-fab {
                position: absolute;
                right: 20px;
                bottom: 20px;
            }
        </style>
    </head>
    <body unresolved>
        <core-scaffold>
            <core-header-panel navigation flex mode="seamed">
                <core-toolbar id="core_toolbar">Navigation</core-toolbar>
                <core-menu theme="core-light-theme">
                    <core-item icon="settings" label="item1"></core-item>
                    <core-item icon="settings" label="item2"></core-item>
                </core-menu>
            </core-header-panel>
            <div tool>Test Project</div>
            <core-card id="core_card" vertical layout start>
                <div style="padding: 20px;">This is a sample project. Please share my blog if you've found this useful</div>
            </core-card>
            <paper-toast id="toast1" text="Created by Nic Raboy"></paper-toast>
        </core-scaffold>
        <paper-fab icon="add" onclick="document.querySelector('#toast1').show()"></paper-fab>
    </body>
</html>

You’ll notice most of the code is Polymer while a few lines are related to the existing Cordova project. All of the Polymer code found in this example was created with the Polymer Designer.

Let’s test this project so far in a web browser. Using a command prompt, navigate to TestProject/www and run the following command:

python -m SimpleHTTPServer

When navigating to http://localhost:8000 you should see a page that looks like this:

Polymer on the Web

In the root of TestProject, run the following command to build your project for Android:

cordova build android

After installing to your Android device, you should have a fully responsive Polymer application that uses material design like Android L.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.