How to Build an Android App to Display any Website : Building a Web Browser - Hive Programmers

Greetings to my favorite science community online, StemSocial.

It's @skyehi and I'm proud to be back to continue my series on Android app development tutorials for beginners.

In yesterday's blog which was quite successful with good feedback from my readers, we learned how to build a basic Memo app that can allow the user to write and store Memo or any text.

To continue our series we're going to build something very basic but it's a way to introduce you to learning how to integrate internet services to your app.

At the end of this blog, you would have successfully been able to build and run an app that can display any website of your choice. It's technically our basics for building a whole Android Browser like Chrome or Safari in IOS.

Original Image Source by jamesmarkosborne from Pixabay

Like I made mention in my previous blog, I'll arrange the tutorial in a few simple steps so anyone can follow.

If you're having issues running the app or you may not understand a concept, please feel free to share your comment or question and I'll be of help.

One reader asked a question about XML in my previous blog yesterday and that brought my mind to websites. That is what inspired today's blog.

I'll guide you through creating a simple web browser using Android Studio and Java.

Setting Up The Android Studio IDE

Alright guys, to start building the app, we need to make sure we have Android Studio, the main IDE or platform installed.

At this point I'll assume my readers have installed the IDE. If you have issues installing the IDE, please let me know in the comments section below.

Here's the link to the main website of Android Android Studio

Android Studio Download

---

Step 1 : Starting an Android Project

Open Android Studio on your computer and click on "create a new project" and choose a suitable project blueprint or template.

You would also need to adjust the minimum API level to match your target audience. I would recommend that you choose the empty activity template to make it easy to build the website.

---

Step 2 : Designing the User Interface

Now guys the first thing to do is to design our user interface. This is the part that the users who would open our app would see.

First open up res/layout/activity_main.xml to write the XML code that would create the basic structure for your web browser.

We'll be using a WebView component. The WebView is what is responsible for showing the website.

Here's a code snippet to help you write that code. Simply copy this code in your activity main page and you should be just fine guys.

<?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=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

Step 3 : Setting Up WebView in MainActivity.java

Alright guys it's time for our backend code. This is where we write the logic that would call for the website we want to display in our app. This would be done in the MainActivity.java page.

So guys head over to MainActivity.java. I would recommend that you start with a default webpage to ensure everything runs smoothly.

In my code, I used the Hive's main website page. You can use any website you want to have displayed in your app.

Here's a code snippet of how the code should look like

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

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

        webView = findViewById(R.id.webView);

        // Enable JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // Load a default webpage
        webView.loadUrl("https://hive.io/");
    }
}

Step 4: Adding Internet Permission

Now guys this is a really important stage in successfully displaying your website. Without this stage, the internet service in your app would not work.

It's so necessary that I usually make it the first step when building an app that requires internet service.

Make sure the app has the necessary internet permission by adding the line of code below in your AndroidManifest.xml.

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

Step 5: Test Your App

Well guys, at this point our app is capable of displaying the website link that you added to the code. So based on the code I shared, when we open the app it will display Hive's main website page.

To run the app, click the green run button at the top of your screen. It's in the shape of a play icon.

You can either use the emulator in your android studio or a real Android device. I usually prefer using my Android phone for testing because I would be able to see how the app would work in real life.

So guys run the app and confirm that a basic web browser pops up, showing the default webpage link you used.

---

Customizing Your Web Browser

Now guys, I made a promise that we'll be going deeper into a bit more advanced stuff. I wanted to share more code and steps that will improve the quality of the browser app.

So now that your web browser's foundation is laid, let's improve its abilities with navigation controls, bookmarks, and also a browsing history.

For today's blog we'll work on the backend code of all those features. In our future blogs we'll work on new page activities for your browser history, cookies and settings.

Navigation Controls

In order to grant your users with the power to move forward and backward through webpages you need to enable Java script which we have already done and you need to include some default codes.

Here's a code snippet of how it should look like guys.

// Inside the onCreate method
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

// Enable navigation controls
webView.canGoBack();
webView.canGoForward();

Bookmarked Routes

Your browser definitely needs a bookmark page where users keep their favorite websites. We wouldn't create the main screen for now but this is how the basic backend code would look like. In future blogs we'll create a more advanced one guys.

// Create a list of bookmarks
List<String> bookmarks = new ArrayList<>();

// Add a bookmark
bookmarks.add("https://www.google.com");

// Load a bookmark
webView.loadUrl(bookmarks.get(0));

Browsing History

Here's a little code snippet for the browsing history. The browser history keeps track of the sites that the user opens.

// Create a list of visited websites
List<String> history = new ArrayList<>();

// Add a page to the history when loaded
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        history.add(url);
    }
});

// Retrieve and showcase the last visited page
String lastVisitedPage = history.get(history.size() - 1);
webView.loadUrl(lastVisitedPage);

That's it for now guys. We have successfully bulit an awesome app that can display any website at all.

I hope you enjoyed this blog tutorial. Like I always say guys, practicing and trying to build more apps will make you a better programmer. Just keep practicing and trying new things and you'll become a great programmer.

Thanks for taking the time to read today's blog. If you have any question or comment regarding the blog, please feel free to share in the comments section below.

Have a lovely day and catch you next time on StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others