WebView Android App: Convert any Website Into android App Tutorial In Android Studio

WebView Android App: Convert any Website Into android App Tutorial In Android Studio

Have you ever tried converting any website into Android App? If not then let me tell you it is very easy and you will need to use WebView for doing that.
You just need the follow the tutorial step by step and application will be ready to go. An element used for that is Webview, add this element to your XML(layout) file or you can also add it in java class.
Also for the good reader we have added Bonus Tip at the end of tutorial to improve look of your WebView App.



Step 1: The first step is to take a responsive website that you want to convert in android app important point to note is that it should be a responsive(mobile friendly) website. Here we are using our own  Abhiandroid.com to convert into android application using WebView which is Mobile responsive site. Step 2: Create a new project in Android Studio and name it WebViewApp.
Step 3: Open res -> layout -> activity_main.xml (or) main.xml, create the application interface and add webview element to it.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.webviewapp.MainActivity">
 
 <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Step 4: Open src -> package -> MainActivity.java. Here firstly declare a webview variable, make JavaScript enable and load the URL of the website. See the whole code below.
Important Note: You can replace our url in below code with any other url you want to convert it into Android App.

package com.example.webviewapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
        import android.webkit.WebSettings;
        import android.webkit.WebView;
        import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView mywebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mywebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings= mywebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mywebView.loadUrl("https://abhiandroid.com/");
    }
}

Step 5: Open AndroidManifest.xml file and add internet permission to it just after the package name. It is required because the App will load data directly from the website.

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

Step 6: After adding the permissions the application is complete but when you run you will find that it will open the links in browser not in application itself. Solution for this is add this line of code in your MainActivity.java class.

 mywebView.setWebViewClient(new WebViewClient());

Step 7: Now to add back buttons to the application to need to add following code to your MainActivity.java class.

    public void onBackPressed() {
        if(mywebView.canGoBack())
        {
            mywebView.goBack();
        }

        else{
            super.onBackPressed();
        }
    }

Step 8: Further if you want to remove the additional padding in the app, open activity_main.xml and in the layouts remove the padding(bottom, top, right, left). Here’s the final code.
activity_main.xml

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.webviewapp.MainActivity">

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

MainActivity.java complete code:

package com.example.webviewapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView mywebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mywebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings= mywebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mywebView.loadUrl("https://abhiandroid.com/");
        // Line of Code for opening links in app
        mywebView.setWebViewClient(new WebViewClient());
    }
    
//Code For Back Button
@Override
    public void onBackPressed() {
        if(mywebView.canGoBack())
        {
            mywebView.goBack();
        }

        else
        {
            super.onBackPressed();
        }
    }
}

Bonus Tip For WebView App: In addition if you want to remove the default action bar, see in image the blue top header. You just need to make a little change in styles.xml file.

app -> res -> values -> styles.xml
Just change theme as NoActionBar. Below code will do

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

---

Output:

Now run the App and you will see WebView App of AbhiAndroid website. You can simply replace the url with any website url you want to convert into Android App.

September 13, 2018