How To Turn Your Website Into An Android App - Hive Programmers

Greetings to my favorite science community online, StemSocial.

It's @skyehi and I welcome you to another episode on my series; Android App Developer Tutorials for Beginners.

In today's episode we're going to learn something special. It's not just about building an App but about turning an already existing website to an Android App.

Original Image Source by Firmbee from Pixabay

There are web Developers that sometimes wish to have an App version of their website.

Maybe you're hosting a website that helps users communicate or sell products online, you could easily turn that website into an entire Android App and let your customers conveniently use your website through a dedicated Android App.

Now guys there are really advanced ways of building Web Applications on Android but the easiest and most basic way to do it is by using WebView element.

This is the same element we use whenever we want to display a website through the Android App.

There are so many features we could add but for the purpose of keeping this tutorial simple and basic, we'll only cover features such as handling WebView events, adding a progress bar, and implementing navigation controls in this tutorial.

Let's get started with today's work shall we

Prerequisites

As always, before you can go through with the steps to building an Android App, you need to ensure that you've got a few softwares properly installed on your PC;

• Android Studio IDE - Download and install the latest version of Android Studio by visiting their official download homepage and following the guidelines or prompts to successfully install it.

• Java Development Kit, JDK - Since we'll be writing our backend code using Java language, we need to install the JDK software so that the PC can execute Java codes or instructions we give it.

When all the required tools are installed, we'll go ahead and create a new Android Project for our App

Create a New Android Project

So guys start by opening Android Studio and click on "Create a new Android Project"

Please select Empty Activity as the template of your project for simplicity sake.

Now when it comes to setting a name for the App, it's reasonable and ideal to use the same name of the website you're trying to build an App version of.

So if you have your own website, set the name of the website as name of your App and also set a package name.

Disclaimer - Now guys I wanted to mention this, just like how plagiarism is heavily frowned upon on any platform including Hive, that's how using someone else's website to build an App without permission is also consider as Plagiarism to an extent.

Playstore frowns on using random websites to build Apps if you don't own those websites or don't have permission so please to be on the safer side, ensure that you've got that checked out guys.

While configuring the new Android project, ensure that Java is the selected language and not Kotlin.

When you're through with the configuration, click on the finish button and Android Studio will load your new Project Space for you.

Add Internet Permission

Now guys, since our App would require Internet access to be able to load and display the website in it, we would most definitely need to request the Internet permissions in the AndroidManifest.xml file.

Here's how your internet permission request code should look like

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

Implementing WebView

It's now time to work on the Frontend code. Since the App needs to display your website, we would need to implement a WebView element that would hold and show the the website of your choosing.

A lot of optimization will be done after this step. So in the activity_main.xml layout file, add a WebView element.

Here's how your layout should look like

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

Configure WebView

After adding the WebView element, we now need to configure it in MainActivity.java file so that we can set the website to load and actually load it when the App launches.

Configure the WebView in MainActivity.java to load the website and handle WebView events:

We'll be including the WebSettings class which will allow us to optimize our WebView element.

We can make the WebView load the website faster and also include JavaScript so that images and other graphic animations can also be displayed.

Now another added feature is the progress bar loading so the user can see how fast the website is loading in the App.

We need to implement WebChromeClient so that we can handle the progress bar update.

Here's how your backend code should look like

import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
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);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Enable JavaScript if needed

        // Load the website
        webView.loadUrl("https://your-website.com");

        // Set WebViewClient to handle links within the WebView
        webView.setWebViewClient(new WebViewClient());

        // Set WebChromeClient to handle progress updates
        webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                // Update your progress bar here (if you have one)
            }
        });
    }

    // Handle back button navigation within the WebView
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

In the code I wrote, I used a non official website with this link; https://your-website.com . You can change it to the link of your website or the website you're planning on turning into an App or Web App.

Add Progress Bar (Optional Step)

So guys if you want to take it a step further and customize the progress bar, you can include the ProgressBar element inside your activity_main.xml layout file and modify it. It's pretty simple to do.

Here's how your layout code will be modified

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"/>
</RelativeLayout>

Now after you're through with including the ProgressBar element, you can also update your MainActivity.java to handle progress updates.

Here's how the modification would look like

// Inside onCreate method
ProgressBar progressBar = findViewById(R.id.progressBar);

// Set WebChromeClient to handle progress updates
webView.setWebChromeClient(new WebChromeClient() {
    public void onProgressChanged(WebView view, int progress) {
        // Update progress bar visibility
        if (progress < 100 && progressBar.getVisibility() == ProgressBar.GONE) {
            progressBar.setVisibility(ProgressBar.VISIBLE);
        }

        // Update progress bar value
        progressBar.setProgress(progress);

        // Hide progress bar after the page is fully loaded
        if (progress == 100) {
            progressBar.setVisibility(ProgressBar.GONE);
        }
    }
});

Enhance Navigation Controls

When navigating through a website, having a forward and back navigation buttons and controls are also very useful.

We need to include functions that will let users navigate their way through the displayed website.

Without this step, when the user clicks on back button, it won't go back to the previous webpage but would rather close the entire App.

So we need to include the navigation buttons and functions also inside the MainActivity.java file.

Here's how the navigation codes should look like

// Inside onCreate method
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

Run Your Web App

Congratulations guys, we have successfully turned a website into an App. Now although this is a pretty basic way of doing the job, improving on it will complete your App.

You can now run the App and see your website display right inside the App. In future episodes we'll be working on how to optimize the WebView to load websites much faster and more effectively.

You can also write codes to handle errors and online or offline states and even features like refresh buttons.

Thank you so much for taking the time to read today's blog. I hope you enjoyed this episode or tutorial guys. Would definitely love to get your feedback on it.

Also, if you're having issues downloading the required softwares, writing the codes or running the App, please let me know in the comments.

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