8 January 2015

Use WebView to make Online apps in Android

 What will we do?
-> We will make an app which will open google.com directly.

What will we need?
  • WebView
  • Changes in MainActivity.java
  • Changes in AndroidManifest.xml
Step 1 : Create a New Android Application by clicking on File->New->Android Application Project.
file new android app project

Step 2 : Give a name to your Application(WebDemo) and a suitable package name of your choice. Then Click on Next...till Finish.
WebDemo

Step 3 : Drag WebView form Palette in activity_main.xml layout.
drag webview from palette
Code for activity_main.xml is given below.

activity_main.xml 


<LinearLayout 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"
    tools:context=".MainActivity"
    android:orientation="vertical">"
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</LinearLayout>


Step 4 : Open MainActivity.java from src folder in Project Explorer and write the below code inside it.

MainActivity.java 


package com.example.webdemo;

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

@SuppressLint("SetJavaScriptEnabled") public class MainActivity extends Activity {

    WebView wb;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wb=(WebView)findViewById(R.id.webView1);
        String url="https://www.google.com";
    wb.loadUrl(url);
    wb.getSettings().setJavaScriptEnabled(true);
    }

}


Step 5 : Add INTERNET permission in AndroidMainfest.xml

AndroidManifest.xml 


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webdemo"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />
    <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.webdemo.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>


Step 6 : Run the Project.
webview output

Explanation of the Code:

Explanation from activity_main.xml:
  • We have just added A WebView to the Layout having the default id as webView1.
<WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Explanation from MainActivity.java:
  • We first declare a variable of type WebView called as wb.
WebView wb;
  •  We use method findViewById() to create a connection between variable wb and webView1 form activity_main.xml.
wb=(WebView)findViewById(R.id.webView1);
  • We define a String named url which defines the website to be launched and then load it in the WebView using method loadUrl().
String url="https://www.google.com";
    wb.loadUrl(url);
  • We use the method getSettings().setJavaScriptEnabled(true) to allow javascript changes to appear in our webpage.
wb.getSettings().setJavaScriptEnabled(true);

Explanation from AndroidManifest.xml
  • We add permission for our application to access the Internet service.
uses-permission android:name="android.permission.INTERNET"
Github download
Stay Tuned with Made In Android

Previous Page Next Page Home
Top