Site icon WebArtDeveloper

How to Build Web Apps using WebView in Android

In this tutorial how to build web apps using WebView Control in Android Application is shown.

The WebView class is an extension of Android View class that allow you to display webpages as a part of your activity layout, it does not include any features of full developed web browser such as navigation bar, address bar etc.

Another scenario in which WebView can help is if your app provides data to the user that always requires an internet connection to retrieve data such as image.

To handle the navigation for webpage call goBack() method and goForward() method which will show you the history of webpages.

The canGoBack() returns true if there is actually webpage history for the user to visit.

Code:

activity_main.xml

<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: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=”.MainActivity” >

<WebView
android:id=”@+id/webView1″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_centerHorizontal=”true” />

</RelativeLayout>

ActivityMain.java

package com.example.demo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity{

WebView wb;
String url;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wb=(WebView)findViewById(R.id.webView1);
url=”http://webartdevelopers.com”;
wb.loadUrl(url);
WebSettings ws=wb.getSettings();
ws.setJavaScriptEnabled(true);

}

@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;
}
}

AndroidManifest.xml

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

<uses-sdk
android:minSdkVersion=”8″
android:targetSdkVersion=”17″ />
<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.demo.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>

https://youtu.be/Mllue2BI3UI

Exit mobile version