Web Browser Android Application Using Android Studio

Introduction – Android is one of the most popular operating systems for mobiles. In this article, I will show you how to create a Web Browser Android application using Android Studio.Requirements

Requirements

• Android Studio version (Use anyone)
• Little bit XML and JAVA knowledge.
• Android Emulator (or) Android mobile
• Download link (Android Studio)
• Steps to be followed

Follow these steps to create a web Browser Android application using Android Studio. I have included the source code above.

Web browsers are used to access the contents of a web page, they are software applications for accessing information on the World Wide Web, today we’d be looking at how to create a very simple web browser app with back, forward, refresh (You can do away with the refresh button and use SwipeRefreshLayout), stop and home buttons.

• Tools you’d need
• Android studio
• Internet connection
• Open Android Studio and create a project.
• Permissions
• First we need to add some permissions, we’d be adding the following permissions
• Internet permission
• Access network state permission and
• Access WiFi state permission
• Open AndroidManifest.xml file and add the permissions at the top of the manifest file

These permissions will allow us to use the internet and check the network state (whether the device has an active internet connection or not).
The interface
The interface of our browser app will be very simple as stated earlier, open the activity_main.xml file and add the following codes

MainActivity.java

package com.dude.broser;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void LoadWebPage(View v){

        Intent intent = new Intent(this, WebActivity.class);
        startActivity(intent);
    }
}

You’d get some error(s) because you’d need to import the vector assets i used in the code, to do this right click on the res directory → New → Vector Assets, you’ll see a window like the one below

Click on the little dark Android icon, on the next screen, search and select your vector assets, then click OK → OK → Finish, your vector assets will be saved inside your drawable folder, expand your drawable folder to see them.
Hint: Rename the assets to match the ones in the code
If you’ve done everything right, your preview pane should look like this

Lets go add some functionality in Browser App!

The MainActivity file

Before you open the MainActivity.java file, lets enable import on the fly, this will help import the classes automatically when you paste the code i’d be providing you with, click on File → Settings → Editor → General → Auto Import , check the Add unambiguous imports on the fly and click OK.
Now open the MainActivity.java file and add the following codes

WebActivity.java

package com.dude.broser;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class WebActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);

        webView = (WebView) findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("https://www.google.com/");

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

You’d get some errors, to fix them change the package name at the top back to that of the project you are working on, then some classes we haven’t created yet will be red and showing some errors, just ignore them for now and proceed, we’d be creating those classes next and the errors should disappear.

The WebViewClient
One of the things the WebViewClient enables us to do is to override Android’s default behavior of opening the links inside our WebView on external applications (other web browsers). We need to override this behavior and set the WebViewClient on our WebView so links open within our WebView/loaded inside our app . We do this by calling the setWebViewClient on the webView, the code for that is already available in the MainActivity.java file above.

Make Quiz App
Now create a new Java class and call it MyWebViewClient and add the following codes

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dude.broser">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".WebActivity"></activity>
        <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>

Determining the network state ( whether a user’s device has an active internet connection)

Browser app

We want to be able to detect if the user has an active internet connection, if there is internet connection we would load the URL, else we’d let them know something is wrong with their internet connection, for this tutorial i used a toast message to notify the user to check their internet connection, you can design a 404 error page and send the user to the 404 page if there is no internet connection, i’d be using a toast message for this tutorial.
Create a Java class called NetworkState and add the following codes

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:background="@drawable/round_b"
        android:onClick="LoadWebPage"
        android:text="GO"
        android:textColor="#ffffff"
        android:textSize="30dp" />
</RelativeLayout>

activity_web.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WebActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webview"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.dude.broser"
        minSdkVersion 20
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

The connection Available method of this class was used in the MainActivity.java file above to check when the user’s device has an active internet connection and to perform an appropriate action in each state.
And that is all for the SimpleWebBrowser, you can now run your Android project and see it work.

YouTube Video

The project is available here on YouTube
Obviously there are lots of improvements that can still be done to this app, the project is on YouTube, check it out and drop your contribs!.

If you’re ever in need of extra help with your Android app development projects, you can find experienced Android developers on Envato Studio to help you with everything from UI design to creating a native Android app.

Download Source Code

Click below to get the full source code android news application.

Conclusion

We have successfully created a Web Browser Android application using Android Studio.

Cheers!

READ MORE…