WebView Android App: Convert Website Into 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. A 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.

Download-Code

One More Step To Download Code...

SignUp! To Download WebView App Code
FREE DOWNLOAD CODE NOW >>
100% tested, easy instant download and import in Android Studio
close-link

Application Using Webview In Android Studio
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 Element   
 <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("http://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>

Adding Internet Permission In Android Studio
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("http://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.
Action Bar In Android Studio
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.

18 thoughts on “WebView Android App: Convert Website Into App Tutorial In Android Studio”

  1. I’m blind for anything about building an App. I’ve just downloaded Android Studio because I want to try to convert my website to an App. From so many tutorials on “how to convert a website to an App” in the internet, your tutorial is the one it works for me. Thank you very much. Guessing here and there, I finally can change the Title from “WebViewApp” (the most top blue bar) to something else. Would you please tell me how do I center the text of that Title “WebViewApp” ? Thank you very much once again.

      1. I have created Ultimate WebView Android App. It has features you want and 20+ more features:

        -Material Design
        -Admob (Banner & interstitial)
        -FCM push notification(Firebase cloud messaging)
        -Progressbar
        -Splash screen
        -Customized Navigation Menu
        -Share Dialog
        -Support video (youtube, Vimeo etc)
        -Intent to open sms, phone, emails or Map
        -Open link internally, external browser or in other external App
        -Map search
        -Map address
        -Download Manager
        -Rate my app prompt
        -Google Firebase analytics tracking
        -Pull to refresh
        -Local HTML pages
        -Runtime permission
        -Actionbar with unlimited color theme possibility
        -Support javascript, HTML5 and other standard web technology
        -Custom Offline handling
        -Download Manager
        -Supports from Android 4.1 (Jelly Bean) and newer.
        -Confirmation dialog when user tries to exit the App
        -Error Handling
        -Multiple Language Support
        -Responsive Design support in Mobile and Tablet
        -Handle portrait and landscape change correctly

        You can get the source here: http://abhiandroid.com/sourcecode/webview/

  2. i have created an android app of a website i.e in a webview form but my app is not able to download files from the links given in the wesite.

      1. I have the same issue here. On my website there are several links to pdf files but none of them opens (download) after converting site to app. Do you have a reference to share with me?

  3. super easy tutorial, but i have a problem

    how to open external link that dont have my website url in it in external browser.

    thanks in advance

  4. I have converted in app using this code but touch functionality is not working smoothly. Have to wait for long time to make function work. While I have tested mobile version of website it’s working smoothly in external browser. Any solution for this?

    1. What type of function you want to work? Because most of the time we have to code separately in the code to make the function work. For example to make download work, you need to add download manager.

Leave a Reply

Your email address will not be published. Required fields are marked *

One More Step To Download Code...

SignUp! To Download Calculator App Code
Free Download Code Now >>
100% tested, easy instant download and import in Android Studio
close-link
JUST ONE MORE STEP TO COMPLETE...

Enter your email to get FREE exclusive Android App email tips:
SEND ME THE UPDATE
We hate SPAM and promise to keep your email address safe.
close-link
One More Step To Download Code...

SignUp! To Download WebView App Code
FREE DOWNLOAD CODE NOW >>
100% tested, easy instant download and import in Android Studio
close-link