Convert a blog or a website into an android app

Have you ever thought of having an app for your website? Your website or blog is running great and you are happy with that. But the world is changing. Most of the netizens are now preferring mobile devices over desktops or laptops for browsing. Smartphones have changed the world. So it would be great to have a smartphone app for your blog or website so that people can easily follow you anytime .

Unlike other websites or blogs which give you a sample example of an app, in this post I am going to show you how to convert my website "www.efficientprogrammer.com" into a real android app.

All you need is a website with responsive design and Android studio to code you app. That's it and you are done!

Before starting, let us understand how can we convert a website into an app. What procedure is involved ? What are the different ways to do it?

Let us answer these questions one after the other.

Firstly, there are 2 ways of converting a website into an app.

1. Using WebView - The simple way
2. Using platform specific API's - The hard way

Using WebView:

A WebView is a view in android which is used to show your webpages in your activity. A WebView in general, can be used to display any webpage. It is similar to 'frames' in HTML.This is the most simplest and easiest way to convert our website into an active android app. All you need is a working website with responsive design. We are going to build an android app using WebView in this post.

Using Platform specific API's:

The hard way of coding our application is to code our application from scratch. ie, starting from designing of layout to coding all the server side code.This takes some time and hard work to design and make our app run successfully. If your blog is powered by blogger,then you have to use the Blogger API to retrieve the information from your blog.

Special : We are going to cover BLOGGER API part in the upcoming posts. In this post, we are going to use WebView to convert your website into an actual running android app. 

So let's begin!

As we have already seen, a WebView is view which is similar to other Views which is used to present some information on the screen.

My website is responsive:

By Responsive I mean that our website must adapt to different screen sizes. Since most of the websites are built using responsive design, this might not be a problem.

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:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="android.efficientprogrammer.com.efficientprogrammer.MainActivity"
    tools:showIn="@layout/app_bar_main">

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

</RelativeLayout>

In the activity_main.xml, we have a WebView with the ID "web".The WebView is a child of the "RelativeLayout".

If we want to connect to the internet, we use "INTERNET" permission in android. So declare this permission in the Manifest.xml which is an auto-generated file.

The <uses-permision> tag is used to declare the permissions.

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

Now, we have our layout ready and permission to access the internet.

Now let us code our MainActivity.java file

We identify the webView from the activity_main.xml using its id.

webView=(WebView)findViewById(R.id.web);

Now, we create a variable for 'WebSettings' which is used to add certains features like 'javascript enabled' to our app.

     WebSettings settings=webView.getSettings();

     settings.setJavaScriptEnabled(true);

We also set the javascript to be enabled.
Next step is to provide the URL for our website. URL is known as Uniform Resource Locator which is used to identify a specific resource on the internet. 


webView.loadUrl("http://www.efficientprogrammer.com");


We are almost ready. Now, whenever we run our application and click on a link, it automatically opens in a browser. But we want the link to be opened in our app. So we add the following line of code which makes new links to open in our application, not in any browser.

webView.setWebViewClient(new WebViewClient()); 

We have our app almost done. But there is one thing left.What if I want to press the back button and go to the previous webpage?

Now , we are going to handle whenever we press the back button on our application. This can be done using the "onBackPressed()" method .

@Overridepublic void onBackPressed() {

    if(webView.canGoBack())
        webView.goBack();

     else {
        super.onBackPressed();
    }
}

In this method, we are checking if there is any page in the stack when we press the back button.If it exists, then we go back.

That's it. You are done! Now run you app in a device or an emulator to see a working app for your website running on the android device.

result :

If you want to download the entire code, you can visit my GITHUB page of the project and click clone or download to dowload the project or view the code from the GIT HUB project page

https://github.com/efficientprogrammer/WebViewAPP