Android Working with WebView – Build your own Browser App

In this tutorial, we’ll learn how to Make Android Bowser using WebView in your Android Application. WebView is a View that displays web pages inside your application. In order to add WebView to your application, you have to add the <WebView> element to your XML layout file.

   DOWNLOAD CODE   

Creating Android Browser using WebView Project:

1. In Android Studio, create a new project

  • If you don’t have a project opened, in the Welcome screen, click New Project.
  • If you have a project opened, from the File menu, select New Project.

2. Under Configure your new project, fill  the following fields as given below

  • Application Name ⇒ Browser
  • Company domain ⇒ example.com ( Eg: gadgetcreek.com)
  • Project location ⇒ choose a location for your project.

3. Under Select, the form factors your app will run on, check the box for Phone and Tablet.

4. For Minimum SDK, select API 10: Android 2.3.3 (Gingerbread). click Next.

5. Under Add an activity to Mobile, select Empty Activity and click Next.

6. Click the Finish button to create the project.

7. Select your View as Project, Open the layout file for main activity(activity_main.xml) located under src/main/res/layout/activity_main.xml

activitymain

and add below code to create a simple layout.

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.gadgetcreek.browser.MainActivity">

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/url"
        android:id="@+id/enter_url"
        android:maxLines="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/enter_url"
        android:id="@+id/go"
        android:text="@string/submit"
        android:onClick="click" />

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/enter_url"
        android:id="@+id/webview"
        android:layout_marginTop="5dp"/>

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/loading"
        android:textStyle="bold"
        android:textSize="20sp"
        android:gravity="center"
        android:layout_centerInParent="true" />

</RelativeLayout>

Following is the content of the res/values/string.xml.

<resources>
    <string name="app_name">Browser</string>
    <string name="url">Enter URL</string>
    <string name="submit">GO</string>
</resources>

 

8. Now Open the MainActivity.java file located under src/main/Java/MainActivity.java

MainActivity

 

and add below code.

package com.gadgetcreek.browser;

import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity  {
    WebView webview;
    EditText enter_url;
    String url;
    Button go;
    TextView textview;
    String current_url;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        enter_url = (EditText) findViewById(R.id.enter_url);
        go = (Button) findViewById(R.id.go);
        webview = (WebView) findViewById(R.id.webview);
        textview = (TextView)findViewById(R.id.loading);
    }
    public void click(View view){
        url=enter_url.getText().toString();
        
        webview.setWebViewClient(new myWebClient());
        webview.getSettings().setJavaScriptEnabled(true); //Enabling JavaScript
        
        webview.loadUrl("http://" + url);
        
        InputMethodManager imm = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);  // Hiding the soft Android keyboard on click Button
    }
    public class myWebClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // TODO Auto-generated method stub
            current_url= url;
            view.loadUrl(url);
            enter_url.setText(current_url); // Set current url in enter_url EditText.
            return true;
        }
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // TODO Auto-generated method stub
            super.onPageStarted(view, url, favicon);
            textview.setText("Loading....");
            textview.setVisibility(View.VISIBLE);  // Loading text will be visible
        }
        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);
            textview.setVisibility(View.GONE);  // Loading text will be disappear
        }
    }
}

 

9. Finally, open your AndroidManifest.xml. located under   src/main/AndroidManifest.xml

Android Manifest

and add the INTERNET permission as we need to make internet calls. This is how your manifest file should look like.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gadgetcreek.browser" >
    
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

To run the app from Android studio, click Run icon Eclipse Run Icon URL from the toolbar.

NOTE:-  Please make sure that you are connected to the internet.

Now just Enter specific URL in the URL field and press the GO button, to launch the website. With this we have completed the Browser android application part.

Leave a Reply