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:
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.