How To Code a WebView Android Free Tutorial

Develop Android Apps, how to code a shape divider

Next Tutorial
Coding A Screen Splash

Prev Page
View All Tutorials

CODING A WEBVIEW

Image of WebView App
Android, How To Code a Webview, Android Programming Java/xml

A Webview is good to use when you have links in your app.

Webview is ideal if your app has links to websites (a url) and the user will be clicking on them. Usually when a user clicks on a link within an app, they are prompted to select a browser to use to goto the link.

However, if you use Webview in your app for url links, then the user goes directly to the website url, no prompt is shown, and the link website is opened within your app.

Naming Your App Using AIDE

In File Hierachy - app Projects; select Create New Project,
When creating your app, choose: 'New Android App - Gradle/ Java/XML', and if using the older version of AIDE, choose 'Hello World Create Template App'.
Name your app using the name as shown in our example code use;

'WebView',as the app name and,
for the package name use: com.acw.webview

The Code

Code for the app; WebView

For this app you will use these coded pages:

2 layout files main and webview both XML files

2 activity classes

one for button:
MainActivity.java

One for the webview:
WebViewActivity.java
and,
Since we are clicking a Button(url), and loading a website into our app screen, we need to add the 'internet permission' to our manifest file.

Where Code is Coded

The button in this app in coded in the main.xml layout. And, main.xml is matched with MainActivity.java, so the executable code for the button method is added to the MainActivity.java class page, as shown here.

button = (Button)
findViewById(R.id.buttonUrl);
button.setOnClickListener(new
OnClickListener() {

@Override
public void onClick(View arg0) {
Intent intent = new
Intent(context,
WebViewActivity.class);
startActivity(intent);
}
As you learned in the previous tutorial, a resource id is added to the button element.
The resource id name for this Button at main.xml, is buttonUrl.

Since main.xml is matched with MainActivity, the 'setContentView', in MainActivity.java is coded to main.xml; as shown here.
setContentView(R.layout.main);

Likewise, WebViewActivity.java, is matched with webview.xml; with the 'setContentView" being coded at WebViewActivity.
setContentView(R.layout.webview);
webView = (WebView)
The resource id name 'webView1',is coded at the 'WebView element', at webview.xml, and referenced at WebViewActivity.java, where the executable code is coded.

The 'setOnClickListener', is attached to Button1, and the 'Intent' method is coded so that the page, webview.xml will populate once the Button is clicked

This code tells the android system to start the activity class named WebViewActivity.java; and since webview.xml is matched with WebViewActivity.java, the webview.xml page will load into the app screen view with the web page url we coded.
Intent intent = new
Intent(context,
WebViewActivity.class);
{ startActivity(intent);

The 'import code' at WebViewActivity.java includes the coding:
import android.webkit.WebView.
This import code is for a WebView class and must be added.
As you learned in the previous tutorial; anytime you add a new code method class in your java page you need to include the import code for it.
Some imports are included for basic coding class methods, but many are not.
If you get errors when compiling your app codes, check for import codes, as this is common practice in app development.

For additional reading on the WebView class goto
Android Developer - Webview

EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE or highlight the text to copy the code for this tutorial.

App Name is 'WebView - located at AppProjects/WebView in AIDE, open the AIDE app, then open App Projects, THEN select the 'WebView', app from your files hierachy(left menu); then click on any file from the app, like strings.xml.

Make sure at top of page, the app name 'WebView' is there next to AppProjects like so:
AppProjects/WebView, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE, before you RUN your code. SAVE, RUN, INSTALL, OPEN, your WebView App. Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'WebView' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app.

Example Code WebView :
Use Mouse To Copy Paste the Code

main.xml
______________________________________

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

webview.xml
______________________________________

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

MainActivity.java
______________________________________

package com.acw.webview;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

private Button button;

public void onCreate(Bundle savedInstanceState) {

final Context context = this;

super.onCreate(savedInstanceState);
setContentView(R.layout.main);

button = (Button) findViewById(R.id.buttonUrl);

button.setOnClickListener(new OnClickListener() {

@Override
  public void onClick(View arg0) {
    Intent intent = new Intent(context, WebViewActivity.class);
    startActivity(intent);
  }

});

}

WebViewActivity.java
______________________________________

package com.acw.webview;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class WebViewActivity extends Activity

{
private WebView webView;

public void onCreate(Bundle savedInstanceState)

{
super.onCreate(savedInstanceState);

setContentView(R.layout.webview);
webView = (WebView) findViewById(R.id.webView1); webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://www.makesushi.website");

} }

AndroidManifest.XML file
______________________________________

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

<uses-sdk android:minSdkVersion="10" />
//we add the permission here for internet

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

// activity added for MainActivity

<activity 
android:name=".MainActivity"
android:label="@string/app_name">
 
 //intent added for MainActivity here
<intent-filter >
<action android:name="android.intent.action.MAIN" />

//activity must also be added for additional java class page
WebViewActivity.java

</intent-filter>
</activity>
</application>
</manifest>

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas