Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Creating a Nokia X App for Your Website using Android WebView

From Wiki
Jump to: navigation, search

Contents

Introduction

So, you want to build a web app for the Nokia X platform, but don't know much about programming? Than WebView will help you. Yes, Android’s WebView allows you to make a Nokia X App so users can access your website easily and directly.

Note.pngNote: This is an entry in the Nokia X Wiki Challenge 2014Q1

.

Nokiaxz.jpg

I have divided this tutorial into 3 parts:

  • Android Layout File
  • Activity
  • Android Manifest

Android Layout File

WebView is a view that display web pages inside your application. You can also specify HTML string and can show it inside your application using WebView. WebView makes turns your application to a web application.

In order to add WebView to your application , you have to add <WebView> element to your xml layout file.


Its syntax is as follows: File : res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

Activity

Activity will display the WebView with a predefined URL. You need to specify the URL of your website here.

File : MainActivity.java

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.webkit.WebView;
 
public class MainActivity extends Activity {
 
private WebView webView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
 
//Add the URL of your Website here
webView.loadUrl("http://mashable.com");
}
}


In order to use webview, you have to get a reference of view in Java file. To get a reference , create an object of the class WebView. Its syntax is:

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


In order to load a web url into the WebView , you need to call a method loadUrl(String url) of the WebView class, specifying the required url. Its syntax is:

webview.loadUrl("http://mashable.com");

Android Manifest

WebView required INTERNET permission. Add the following code into AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />


File : AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.proj"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18" />
 
<uses-permission android:name="android.permission.INTERNET" />
 
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.proj.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>


Loading URLs within WebView

If your app loads a URL from inside the webpage of the WebView, by default the page will be opened in a browser, not inside your WebView. To override this behavior and have the URL loaded from inside the WebView instead, you need to extend your class from WebViewClient and override its method as follows:

private class MainActivity extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}


That's all what you need to make your first Nokia X app using Android Webview.

Publish

Final Step is to publish your app on Nokia X Store. But remember to sign your .apk file before submitting it on store.

Example application

You can find the source code for an example in the Nokia X WebView project on Github.

This example was based on the Time of India app, published by me, in the Nokia Store. Click here to Check App

Pros and Cons of Web Apps

Pros

  • Easy to build
  • Less development cost

Cons

  • Web apps are a little slower than native apps.
  • Native apps have a better user experience than web apps.
  • Native apps take advantage of cameras, microphones, and other phone goodies but web apps can't.
  • Native apps have better offline support.
This page was last modified on 12 June 2014, at 22:31.
500 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×