drew.d.lenhart

programming, software, technology, anything on my mind...

How to create an Android App!

2015/10/14

Believe it or not, it is actually relatively easy to create your own Android app! If you don't have any experience in Java, or feel the necessity to learn the language, use HTML, CSS, and Javascript. The Apache Cordova platform helps to run your HTML5 application as if it were written in the native language.

For the purposes of this demonstration, I cooked up a simple Javascript 8 bit clock.

8bit clock

Setup

First things first, set up your development environment. I won't go into the details of installing each component. I think the documentation explains very well. But here are the steps for OSX:

  1. Install Node.JS - Needed to install Cordova
  2. Install Cordova CLI - sudo npm install -g cordova
  3. Install Java Development Kit 7 or later - *in terminal use: javac -version to see current version
  4. Install Android SDK - I installed Android Studio
**For explanations and detailed instructions see Cordova Documentation

Note: After installing Android Studio, use the SDK Manager to download Android 5.01 API Level 22. Configure >> SDK Manager. Click Android SDK under System Settings in the tree.

Lastly, add the SDK to your PATH Environment variables.

This command creates a bash_profile if there isn't one: touch ~/bash_profile To open: open ~/.bash_profile.

This is what I entered in my profile. You will need to edit your path. If you installed Android Studio, the SDK is located in /Users/yourusername/Library/Android/sdk

export PATH=${PATH}:/Users/drew/Library/Android/sdk/platform-tools:/Users/drew/Library/Android/sdk/tools

Create Project

Now create a directory to hold your Android projects and use this command to create a new project:

cordova create stclock com.companyname.stclock stClock

Change directory into newly created folder "stclock" in the example above.

cd stclock

Since we are creating this app for Android, execute the following command:

cordova platform add android

You should see some output:

outputcmd



Check out the file directory. After entering in the Cordova commands, a project directory was created, and the Android project files! Take notice of the "www" directory. This is where your app goes!

dirTree

Example Files

Feel free to download the working example clock.

Download code here. (This is some old code I found on a floppy, lol. I simply made the font size responsive, grabbed a front from dafont.com, and some green screen colors.)

This is a zipped copy of the "www" directory. Unzip and re-place the contents in YOUR project "www" directory.

Just a couple more commands before testing. Prepare the app:

cordova prepare

Now we are ready to build. If you have been reading the Cordova documentation, they show you how to set up the Emulator through Android Studio. For the sake of the tutorial, we'll just build to a device. Make sure you have a Android device plugged in via USB (Also make sure the device has usb debugging turned on, doesn't hurt to have developer options turned on as well.)

cordova run android --device

You will see a lot running in the terminal as its building and installing the application on the device!

successbuild

If you want to build the APK file, use the command:

cordova build
orcordova build android --release
or --debug
**Notice the path after the build is complete, this is where your APK file is.

Woohoo! It works on my Amazon Fire Phone!

firephoneexamp

Next Steps

This is just a simple starting point in mobile development. There are many other steps needed after you have created a polished application. Such as, creating and setting the application icon, device orientation specifics, etc. Also getting your APK signed and into the Google Play Store is another consideration. Keep reading the Cordova Documentation, there is good stuff there. Thanks for reading!

--Drew

Download example code.