INSTALLING ANDROID SDK

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

$ 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

$ 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

android avd

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

ANDROID HELLO WEB

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

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

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

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

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.