Android Development for Web Programmers
ANDROID
Android Development for Web Programmers
2015-11-20
By
David "DeMO" Martínez Oliveira

Are you a talented web development thinking on jumping into mobile Apps development?. If so, that is easier than you think. You can go straight for a solution as PhoneGap and do your stuff, but if you are really thinking on jumping in to Android development, eventually, you will have to learn how to code for Android.
In this short tutorial we will show you how to quickly and easily convert your web application into an Android App. Most of the application logic will be normal HTML and Javascript, but we will write a little bit of Java/Android code to start getting into the thing.

INSTALLING ANDROID SDK

Sure, you can go for a nice IDE like Android Studio, but we, GNU/Linux geeks will use the command line to build our applications. It may look harsh but, believe it or not, it is very convenient in the long term. That is up to you to decide.

So, the first thing you have to do is install the Android SDK. Download it from the link below (select your preferred platform from the list)

https://developer.android.com/sdk/index.html#Other

Now you just have to uncompress the file and update your path to include the platform-tools folder:

$ mkdir android-dev
$ cd android-dev
android-dev $ tar xzvf android-sdk_rVERSION-linux.tgz 
android-dev $ export PATH=${HOME} /android-dev/android-sdk/platform-tools:$PATH

Now you will have to install some packages from the network. Launch the android graphical tool and choose the target platforms you are interested in. We used Android 4.4 for writing this tutorial. It should be the same with any later APIs but if you try and you experience problems, please let us know.

Together with your API check that you are also installing Android SDK build-tools and the SDK and SDK-Platforms tools. Downloading and installing this will take a while, specially first time. In your console:

$ android

A GUI will pop-up to let you install the SDK components you like. It wil look like this:

Android SDK Manager

CREATING A BARE PROJECT

Now,you should have your system ready to start. First you have to check the platform id you want to target. This platform id, allows you to select the target API (Android version in last instance) your application will require to work. To check the list of platforms available in your system type:

$ android list targets
(...)
----------
id: 2 or "android-19"
     Name: Android 4.4.2
     Type: Platform
     API level: 19
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : default/armeabi-v7a
----------
(...)

Then look for the id of the platform you want to target. In our case, as you can see above, we have id 2 for Android 4.4.2. So it is time to create our project.

$ android create project --target 2 --name MathK --path ./MathK --activity MathK --package com.papermint_designs.mathk

This command will create a default "Hello World" application that we will modify soon. But first, let's compile it and test it.

HELLO ANDROID

The Android SDK uses ant as build system and it is very simple to get our "Hello World" application up and running on out phone or tablet. Move into the project directory and run "ant debug".

$ cd MathK
MathK $ ant debug

This will compile our application and generate an Android apk that we can install in our Android devices. The apk file will be placed under the bin directory and will be called MathK-debug-unaligned.apk

Now you can plug your phone and install the application with the command:

MathK $ adb install -r ./bin/MathK-debug.apk

If you do not have an Android device or you prefer not to use your phone for development, you can use the Android emulator provided by the SDK. You need to create an Android Virtual Device and then start it up. Fortunately, all this can be done with a very simple GUI. Just type
android avd
and click the buttons!!!

After launching your application an awesome "Hello World" message will be shown in your phone:

ANDROID HELLO WEB

At this point we know that our Android Development environment is up and running as expected. It is time to start coding.

The main code for our program is located in the file

MathK/src/com/papermint_designs/mathk/MathK.java

Sure all that path was created by the android create project command we issued early. What we are going to do is to use a WebView control in our Android application, or in other words, we are going to build a web browser able to run our Web application!.

For that we have to modify MathK.java to look like this:


package com.papermint_designs.mathk;

import android.app.Activity;
import android.os.Bundle;

import android.webkit.WebView;
import android.webkit.WebSettings;

public class MathK extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

	WebView myWebView = (WebView) findViewById(R.id.webview);
	myWebView.loadUrl("file:///android_asset/page01.html");

	WebSettings webSettings = myWebView.getSettings();
	webSettings.setJavaScriptEnabled(true);
    }
}

The modification does the following:

  • We import WebView and WebSettings from the webkit package. These classes are the ones we need to get our HTML browser up and running with JavaScript support
  • Then we create a webView object from our application Layout (we will get to that soon). Our browser will load an HTML file named page01.html that we have to add to the project and that will contain the Web application
  • And finally we create a webSettings object in order to enable Javascript

That's it with regards to the code. But we have to do a couple more changes before we can compile the application.

CHANGING CONFIGURATIONS

Now, we have to change a couple of files. The first one to modify is the GUI layout. This file is located in :

MathK/res/layout/main.xml

The original file created from the default template contains a TextView element with the well-known welcome text. We commented this out and we add our webview widget to the application layout. The file will look like this after all these modifications:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<!--
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Hello World, MathK"
    />
-->
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>
</LinearLayout>

The only thing you have to pay attention to, is that the android:id value you type in the layout file has to match the id you use in your main application to locate the widget. In other word, this line:

WebView myWebView = (WebView) findViewById(R.id.webview);

DEPLOYING OUR WEB APP

The last step to be able to launch our application is to actually deploy the webapp. For doing this, you have to create a folder (in your project root directory) named "assets", a put there all the files required by your application.

For a testing Hello World app we have to add a page01.html like this:

<html>
<head><title>Hello World</title></head>
<body><h1>Hello Web</h1></body>
</html>

Now we can recompile and install the application on our Android device. It would look like this:

MathK

So, this is it, now you can write your web app. I will share the one I wrote. It is called MathK (Math Kids) and it is a very basic arithmetic training for kids. It shows a basic math operation that the kid has to solve. When done right the kid can get the next challenge.

 

You can download the application source code and the apk below:

File SizeMD5
MathK-debug-unaligned.apk 61K 3e87a7ca36f615a1270a399be10dac93
Mathk-src.tgz 60K d890e4a83c0e0f19b0e3e3255449c8f0

There are many changes that your targets are different from mine. That means that if you want to compile the source code above you may have to update the project using a command like this:

android update project -p ./ --target YOUR_TARGET

YOUR_TARGET has to be a valid id on your Android installation.

There are still a couple of other things we have to explore in order to take the most of WebView... Let's leave that for the next post.

RELATED POSTS
Awesome Android eXtreme Hacking. Part I
Awesome Android eXtreme Hacking. Part II (Sensors)
Awesome Android eXtreme Hacking. Part II. More sensors
Awesome Android eXtreme Hacking. Part III. What a Shell!
Awesome Android eXtreme Hacking. Part IV. GNU/Linux on your Pocket
Add a Remote Shell to your Android App
Android robot by Google: CC-BY