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. 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.

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
        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>

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("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.
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.

How to add progressBar in webview & convert website into advance android app

Convert-website-into-advance-android-app-banner

50 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.

  5. hi, while running the app my build is successful but my web site is not open in emulator
    any answer accept…

  6. thanks or the outstanding tutorial but
    sir i am facing some problem like some category and pages are not clickable/open

    1. After downloading please first extract the zip file of the code. Then in Android Studio open an existing project and locate to the location of our project which you downloaded.

  7. hello sir I am facing a problem
    I am using android studio 3.0
    mywebView = (WebView) findViewById(R.id.webview);
    webview showing in red color
    this line showing error
    Please tell me how to remove error

  8. there is an error on my mainactivity.java

    this codes.
    “WebView mwebview = (WebView)findViewById(R.id.webView);

    WebSettings mywebSettings = mwebview.getSettings();

    mywebSettings.setJavaScriptEnabled(true);

    mwebview.loadUrl(“http://www.cssoevoting.com/”);”

    please help me. thank you

  9. Hi sir…,
    I converted website into Android app, Everything is working properly except call-to-us icon,
    I used Call us, when I open the website in mobile call-to-us icon is working, When I open the app Call-to-us icon is not working, It will showing web page is not available. What to do?

  10. great tutorial. working perfectly. how to add notification in webview from website, if website is update. thanks

  11. I have successfully converted my bootstrap website into android app, following your guidelines. But, when I try to download any file (links are coded in my website) using the App I couldn’t, whereas in the website I can download the files. Please help.

  12. thank you very much for your efforts but i do steps in article exactly but it does not work
    please help

  13. great efforts to deliver knowledge…keep it up…..please upload source code of some projects…i want to buy .

  14. How to use Drag and drop option. File of html does not work. Is there any option to upload files or photos

  15. Thank you for this helpfull information.
    In step 6 , we have to write a code to MainActivity.java class .
    where is MainActivity.java class located ? and at which place we write the code ?

    Thank you.

  16. Thank you for your tutorial, very helpfull.
    But how to reading QR code using webview ?
    My QR code reader doesn’t work on webview.
    Thank You

  17. Thank you very much for this turtorial! However I have a problem. When I rotate the screen on my mobile phone the app redirects me to the index page. Is it possible to fix this problem?

  18. I have source code of android and ios app which was created by third party for my website. Now the problem is that push notifications and admob ad does not appears in app.
    I found that developer has not added id’s for my respective demand
    1. push notifications either onesignle or Firebase my website is WordPress site and uses free onesignle plugin
    2. Put my admob pub id benner ad , Inerstial ad or native ad,
    Every thing may available in code, only need to put id’s like.. For onesignle push notifications app id to put in code and for admob my banner, intertial, native I’d..
    You have to add push notifications ID and Admob id in souce code and provide that souce and with apk for Android and IOS
    I m ready to pay nominal among for that

  19. I followed every step very carefully but when I go to build the apk I get many errors. I use the Android Studio 4.0

  20. i have converted the website to android app but my payumoney page is not open when i click the payment link. is m doing something wrong. please help me

  21. my style.xml file is not comming by default
    and I want to make a web view app for the e-commerce website

  22. When you choose new project in Android Studio you are presented with several options to choose from and I don;t think it’s covered here?

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