Android application development (WebView application)

October 2, 2014   Ohsik Park

Android Developer Tools v22.6.2. Creating an android web application with splash screen and history back button with JavaScript enabled.

File > New > New Android Application

create-new-andorid-application

Enter your project name and click next. Click next again on next screen

set-up-your-home-icon

Select your application’s home icon then hit next. On next screen, just hit next. Hit finish on the following screen.

Locate WebView on phone screen (activity_main.xml)

add-WebView-on-the-screen

Drag and drop WebView(Under Composite) on screen in activiy_main.xml which you can find under res > layout > activity_main.xml. You can remove fragment_main.xml file in the folder. Select Theme to Theme.Black.NoTitleBar to remove top bar in order to make WebView takes entire screen.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.rubstr.rubstr.MainActivity"
    tools:ignore="MergeRootFrame" >

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
    	android:layout_height="fill_parent" />

</FrameLayout>

Adding WebView should create code above on your activity_main.xml file.

Load website on WebView (MainActivity.java), enable Javascript and Back button

MainActivity-java

MainActivity.java file located under src > com.rubstr.rubstr > MainActivity.java.

package com.rubstr.rubstr;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

@SuppressLint("SetJavaScriptEnabled")

public class MainActivity extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//assign myWebView to webView
		WebView myWebView = (WebView) findViewById(R.id.webView);
		//Load page URL
		myWebView.loadUrl("http://www.rubstr.com/");
		
		//Enable Javascript
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		
		//Link opens in the Webview
		myWebView.setWebViewClient(new WebViewClient());
	}
	
	//Adding go back button for page history
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		
		//assign myWebView to webView
		WebView myWebView = (WebView) findViewById(R.id.webView);
				
	    // Check if the key event was the Back button and if there's history
	    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
	        myWebView.goBack();
	        return true;
	    }
	    // If it wasn't the Back key or there's no web page history, bubble up to the default
	    // system behavior (probably exit the activity)
	    return super.onKeyDown(keyCode, event);
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {

		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

}

Adding splash screen or loading screen

add-splash-screen-image-in-the-project

Create a folder called drawable under res folder and add your splash screen image. I created splash screen as 480X800 and named it as splash.png (some reason it does not work with other names).

Next, create a new file called SplashActivity.java under src > com.rubstr.rubstrnews. Right click on the folder > New > Other > General > File click next and name it SplashActivity.java. Add below code in there.

package com.rubstr.rubstr;

import com.rubstr.rubstr.R;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;

public class SplashActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_splash);
		Thread thread = new Thread(){

			@Override
			public void run() {
				// TODO Auto-generated method stub
				try {
					sleep(3000);
					startActivity(new Intent(getApplicationContext(), MainActivity.class));
					finish();
				} catch (InterruptedException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				
			}
			
		};
		thread.start();
	}
}

Note that, if activity_splash text gets red underline, mouse over the cursor for couple seconds to see help text. Select create activity_splash in layout which will add activity into R.java file under gen > com.rubstr.rubstr > R.java. Do the same for splash on the bottom of the code.

Next, create new file called activity_splash.xml under res > layout folder. Add below code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".SplashActivity" >

</RelativeLayout>

This will add splash image as background on the screen. Make sure you named the image as splash.png in res > drawable folder.

Add internet permission & splash screen (AndroidManifest.xml)

AndroidManifest-xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rubstr.rubstr"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />
    
	<!-- Add Internet permission for WebView -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar" >
        
        <!-- Execute splash screen before main activity -> SplashActivity.java -->
        <activity
			android:name="com.rubstr.rubstr.SplashActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!-- Execute main Activity -> MainActivity.java -->
        <activity
            android:configChanges="keyboardHidden|orientation|screenSize"
			android:name="com.rubstr.rubstr.MainActivity"
            android:label="@string/app_name" >
		</activity>
    </application>

</manifest>

AndroidManifest.xml under top root of your Android project. At this point, you can do a test run by clicking green play button on the top or Run > Run(Run as Android application) on main menu

Run a test

Run your app by clicking green play button on the top or Run > Run. Select run as Android application. Check everything works ok.

Export out as APK for Google Play Store

Right click on the project folder in Package Explorer. Select Android Tools > Export Signed Android Package… Then follow the instruction to get APK file. After exporting APK file for your application, test it on your Android Phone. Everything works Okay? then you can upload it to Google Play Store.

Publish your android application on Play Store

You have to pay $25 to get the developer account which will allow you to publish your app on Google Play Store. Visit https://play.google.com/apps/publish/ to sign up

Leave a Reply

Your email address will not be published. Required fields are marked *