How to Create Android App for Website / blog using WebView

How to create Android app for website using WebView:

With a steep increase of Mobile users, many of website owners are now creating an android app for their website. This helps in increasing their user database. In this tutorial, I will show you how to create a basic android app for your website using WebView in android. We will use New Android Studio to create this project. Make sure that your website is crafted for Responsive Web Design in order for this tutorial to work.

[widget id=”text-15″]

If you are using a WordPress or any other CMS (Content Management System), make sure you are using a responsive theme. Now Get ready to create your own Android app for your Website!

The complete code to create android app for website can be cloned / downloaded from the link attached below:

Click Here to Download

Create Android App for Website:

Requirements and Recommended Tutorials for this article:

To Create Android App, first you need to know following requirements:

How to implement a splash screen for your Android Project.
How to create android Project using Android Studio.
A Responsive Website.
A little bit of Java.

Steps for Creating Android App for your Website using WebView:

Create a New Android Project and Name it any thing you want. Here I am Creating an Android App for this Website, coderefer.com. So I am naming it as CodeRefer. We have already discussed about Creating Android Project in our Previous articles, I will just go briefly.
Now select minimum SDK. I am selecting minimum SDK as API 10. Select Blank Activity > Next> Finish. I am leaving the names of activity and xml file as per default name. This completes creating Android Project.[widget id=”text-3″]
Now you can Implement the Splash Screen. We have discussed about how to implement a splash screen in our previous article.
Now open Main Activity.java from Project Name > app > src > main > java > MainActivity

Now type the following code:

package com.coderefer.coderefer;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

 private WebView mWebView;
 ProgressBar progressBar;


 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 mWebView = (WebView) findViewById(R.id.activity_main_webview);

 progressBar = (ProgressBar) findViewById(R.id.progressBar1);

 WebSettings webSettings = mWebView.getSettings();
 webSettings.setJavaScriptEnabled(true);
 mWebView.loadUrl("http://13.126.215.213.xip.io/test");
 
 }
}

Here you need to specify which url to load in WebView’s loadUrl Just type your web address there. Here I am using my website url : http://13.126.215.213.xip.io/test for which I want to design app for.

[widget id=”text-15″]

We now edit activity_main.xml by clicking text tab and paste the following code to display progressbar and to display your website after it is fetched:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ProgressBar
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:id="@+id/progressBar1"/>

    <TextView
        android:layout_below="@+id/progressBar1"
        android:layout_height="wrap_content"
        android:id="@+id/LoadingText"
        android:layout_width="fill_parent"
        android:text="Loading, Please Wait.."
        android:textSize="20sp"
        android:gravity="center_horizontal">
    </TextView>

    <WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Make sure you added Internet permission for your manifest. If not add this piece of code in your manifest:
```
<uses-permission android:name="android.permission.INTERNET"/>
```
Now you can run your app to display your Website, but here is the problem: When you click on any link on your website, it opens your mobile browser instead of showing the link in your app. We need to make sure that any link opens in the app itself.[widget id=”text-3″]

To make any link to work in the app itself, replace the code with the following in MainActivity.java:

package com.coderefer.coderefer;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

    private WebView mWebView;
    ProgressBar progressBar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);

        progressBar = (ProgressBar) findViewById(R.id.progressBar1);

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.loadUrl("http://13.126.215.213.xip.io/test");
        mWebView.setWebViewClient(new HelloWebViewClient());


    }

    private class HelloWebViewClient extends WebViewClient{


        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // TODO Auto-generated method stub
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView webView, String url)
        {
            webView.loadUrl(url);
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);

            progressBar.setVisibility(view.GONE);
        }

    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    { //if back key is pressed
        if((keyCode == KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack())
        {
            mWebView.goBack();
            return true;

        }

        return super.onKeyDown(keyCode, event);

    }




    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    public void onBackPressed() {
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
                MainActivity.this);

        // set title
        alertDialogBuilder.setTitle("Exit");

        // set dialog message
        alertDialogBuilder
                .setMessage("Do you really want to exit?")
                .setCancelable(false)
                .setPositiveButton("Yes",new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog,int id) {
                        // if this button is clicked, close
                        // current activity
                        MainActivity.this.finish();
                    }
                })
                .setNegativeButton("No",new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog,int id) {
                        // if this button is clicked, just close
                        // the dialog box and do nothing
                        dialog.cancel();
                    }
                });

        // create alert dialog
        AlertDialog alertDialog = alertDialogBuilder.create();

        // show it
        alertDialog.show();
    }
}

Here we additionally setup WebViewClient to display any link in the app itself and we also overrided onKeyDown method to implement WebView’s goBack Method. We used onBackPressed Method to display Exit Dialog if user presses back key from the specified URL.

Now you can change the launcher icons by replacing the icons in mipmap folders generally located at C:\Users\username\AndroidStudioProjects\CodeRefer\app\src\main\res. To generate icon pack you can use this link.

Your basic mobile App for your Website is now ready! Leave your comments below if there are any queries.

[widget id=”text-15″]

66 COMMENTS

libationblog June 14, 2015 At 12:17 pm

I am getting an error in MainActivity.java

(this is underlined red)@Override
public boolean shouldOverrideURLLoading(WebView webView, String url)
{
webView.loadUrl(url);
return true;
}

The actual error is listed as:
Error:(44, 9) error: method does not override or implement a method from a super type

Any ideas?

- Vamsi Tallapudi August 6, 2015 At 10:08 am
  
  you should type shouldOverrideUrlLoading. Method names are case sensitive. The overrided method name must be the same.
  
saeed rehman September 12, 2015 At 10:52 am

Hi its work and have no words to thank you about your effort done here. Thank you once again and after implementation of this code, i have successfully created an app for my blog.

Ravi Rathod September 24, 2015 At 9:01 am

after opening app there is loading shows and ask to open browser and link will open in browser … not in my webview…Why?

Aditya Elango November 3, 2015 At 12:37 pm

Hi,

Thank you very much for your tutorial. I learnt to create an app in less than two hours.
Could you guide me on how to enable pinch zoom in and out , in this same method. Will be very helpful.

Thank you
Aditya Elango

Pallavi Khutal November 13, 2015 At 12:58 pm

what if i want to auto login to website using webview?

Vong Chamnan December 7, 2015 At 9:36 pm

how to make it support with video player from other site? please help

J T December 9, 2015 At 12:25 pm

Thanks indeed for this nice piece. However, when a device losses an internet access, the webview displays error message and show the URL… Now how to hide this URL when no internet access is available?

- Jorge Américo Vargas Freitas June 14, 2016 At 3:44 am
  
  Did you manage to solve this?
  
Prince Chaudhri December 17, 2015 At 12:16 am

Thank You so much for this article… 🙂

Nork December 17, 2015 At 6:55 am

Thanks!

Rafayel December 26, 2015 At 4:32 pm

Thank you for your tutorials. But I have a little problem with my app. I connect 2 tutorials in one app(about webview and splash screen). And know, when I am installing it on mobile, in screen it is showing to applications. One with splash screen and one without it. Can anyone help me to solve this problem?

- Jorge Américo Vargas Freitas June 14, 2016 At 3:44 am
  
  Same problem here.
  
JASPAL SINGH January 4, 2016 At 1:53 pm

Dear Vamsi Tallapudi,
Thanks a lot for this detailed tutorial.
I was able to make my app within 15 mins even since I do not have any knowledge of coding (am a mechanical geek).
Only problem I am facing is that I have a upload button on my responsive website and this upload option is not working in app.
Noting happens when the button is clicked.
Could you please suggest some solution for this. Otherwise it is a fantastic guide.
Jaspal Singh
Jaspal Singh

- Jorge Américo Vargas Freitas June 14, 2016 At 3:45 am
  
  Any solution?
  
Martin Vasquez January 21, 2016 At 4:20 am

How can we get rid of the padding ?

- Vamsi Tallapudi January 21, 2016 At 4:38 pm
  
  Remove the following lines from the Relative Layout of activity_main.xml:
  android:paddingLeft=”@dimen/activity_horizontal_margin”
  android:paddingRight=”@dimen/activity_horizontal_margin”
  android:paddingTop=”@dimen/activity_vertical_margin”
  android:paddingBottom=”@dimen/activity_vertical_margin”
  
  - Martin Vasquez January 21, 2016 At 9:31 pm
    
    Thank you ! worked perfectly!
    
Muhammad Nouman Umer January 23, 2016 At 3:58 am

Hey bro I am getting an error :/ Can not resolve symbol R. Can you please solve it ?

- Nawaz Sagri January 23, 2016 At 11:11 am
  
  Check your XML file in app manifest
  or use gradle clean
  hope it will work
  
Nawaz Sagri January 23, 2016 At 11:05 am

To make any link to work in the app itself section you have given code for main activity , but what abut layout xml?
Or we don’t need to change the xml file? (Sorry newbie to all of this)

- Vamsi Tallapudi January 23, 2016 At 11:37 am
  
  Here any link loads in the WebView element which was used in activity_main.xml. So we don’t need to change xml file for each and every link.
  
  - Nawaz Sagri January 23, 2016 At 12:46 pm
    
    Ok..Thank you
    
Karsho February 1, 2016 At 12:00 pm

I ‘m new. Now I want to send push notification to my WebView App. Please, Can you explain like this?

- Jorge Américo Vargas Freitas June 14, 2016 At 3:41 am
  
  That would be awesome!
  
sankar a March 13, 2016 At 3:54 pm

I did all the above steps…
but when I install the app its shows ” unfortunately force stopped”
I’m new in this… can u pls help me in this

Husnain March 13, 2016 At 4:30 pm

Hey, This tutorial ROCKS.
Just one question… My web app has margins like a border (white border) around it. How can I make the page to full screen?

hanomaiah t March 15, 2016 At 4:14 pm

hi vamsi i followed above code but not able to scroll, its freezed. and my android studio version is 1.5.1

akash naryan March 16, 2016 At 11:25 am

problem in creating app for the url with some folder like http://www.domain/somefolder

Krishna March 28, 2016 At 12:01 am

Hi friends,

How to make a android app for my website, my website is responsive site, already i tried to make android app, but its fail, android studio needs many add-ons in SDK manager or any other, i already copy source code from this code refer for my app,

The android studio AVD manager not working correctly, i want to make android app and i want to this app working on android v4.0 devices…

I need some information, friends give your suggestions :

anil sharma April 6, 2016 At 1:48 pm

this blog is very useful thanks for sharing information

Niral Sura April 19, 2016 At 6:16 pm

Thank you for your tutorials. But I have a little problem with my app. I
connect 2 tutorials in one app(about webview and splash screen). And
know, when I am installing it on mobile, in screen it is showing to
applications. One with splash screen and one without it. How to keep only one ?

And After Splash Screen Loading Please wait comes, can we make it visible on Splash screen and as soon as loading done direct website comes ?

When website loads it has padding, i trued your solution of removing padding from main activity but still padding comes

Thanks for Great Tutorials. (Kindly answer this as almost all users are having this questions)

- Jorge Américo Vargas Freitas June 14, 2016 At 3:40 am
  
  Did you solve your problems?
  
  I am trying to do the same, but I am dealing with a different problem: my webview is very laggy after implementing the splashscreen.
  
  Did you face this problem?
  
Mark Newland June 2, 2016 At 6:36 pm

this is wonderful though i have found that my website is not compatible with WebView is there a way for the .APK to open the site with another browser?

meetdilip June 9, 2016 At 4:45 am

Hi,

I do not have discuss, hence posting here. I am using your how to build webview app tutorial with splash screen tutorial. I have done everything as you told. Just that while building app, I am getting error message for ” menu ” and ” action_settings ” part of the following code. They are shown in red and console says

Error:(134, 36) error: cannot find symbol variable menu

Error:(146, 23) error: cannot find symbol variable action_settings

:app:compileReleaseJavaWithJavac FAILED

Error:Execution failed for task ‘:app:compileReleaseJavaWithJavac’.
> Compilation failed; see the compiler error output for details.

—
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

—

Any help possible ?

- Vamsi Tallapudi June 9, 2016 At 7:50 am
  
  The menu folder might be missing in your project. Try removing onCreateOptionsMenu() and onOptionsItemSelected() methods from your project.
  
  - meetdilip June 9, 2016 At 7:52 am
    
    Thank you Vamsi. Where can I find them. Which file ?
    
    - Jorge Américo Vargas Freitas June 13, 2016 At 12:17 pm
      
      Same error, probably, same solution: MainActivity.java.
      
  - meetdilip June 9, 2016 At 8:00 am
    
    Thank you. It worked.
    
meetdilip June 9, 2016 At 8:11 am

I am facing another issue now. I used the webview app for discuss.flarum.org. Everything went well for me except that the site loads as if no JS is loaded. That’s been an issue with the script since some time. But what puzzles me is that the web version of the website is working fine. Is there anything we can do to solve it ? The script author said clear cache. I am not sure how to ” clear cache ” when we in app and using it for the first time on phone.

Jorge Américo Vargas Freitas June 13, 2016 At 12:20 pm

Wonderful tutorial: the best I have read so far!

Would it be easy to add a splash screen to it?

And, besides a splash screen, what more improvementes would you recommend for a website app?

Solly Cannon July 16, 2016 At 4:43 am

hi there, im getting the following error in the MainActivity extends Activity {} method:

error:cannot find symbol method findViewByID (int)

ive tried creating a method called findViewByID but i still get runtime errors

any suggestions anyone??

Jimmy July 17, 2016 At 1:41 pm

is it possible to send push notification using webview app?

Pappu Bahadur August 25, 2016 At 11:36 am

i m new in . i used this code for change my website into android app… it works properly in lollipop and 6 but not running on kitkat and jelly bean phones… help me pls

Askwithloud September 6, 2016 At 3:42 pm

Hey Man, Your Tutorials are just awesome but can u please let me know about how to add download manager in my app, because I have a .Mp3 site and whenever I click on download song button my app got stuck… so please help me to make webview app with download manager…

sujoy September 9, 2016 At 12:20 pm

Code for download are not available…

jagadeesh sandireddy September 11, 2016 At 8:42 pm

i need a similar app for my website like techworm app this is the app link
https://play.google.com/store/apps/details?id=com.techuri.techworm&hl=en

Aqib September 27, 2016 At 7:23 pm

Hi please help me i am unable to run it on my mobile this error comes
Error:Could not create service of type ProjectEvaluator using BuildScopeServices.createProjectEvaluator().
> Could not determine implementation class for service ‘org.gradle.configuration.project.ProjectConfigureAction’ specified in resource ‘jar:file:/I:/Android/Android%20Studio/gradle/gradle-2.10/lib/plugins/gradle-ide-2.10.jar!/META-INF/services/org.gradle.configuration.project.ProjectConfigureAction’.

Manish Kumar October 4, 2016 At 8:10 pm

I am getting a error in MainActivity.java

menu_main cannot be resolved or is not a field

how can i remove that error?

- Manish Kumar October 4, 2016 At 8:13 pm
  
  https://uploads.disquscdn.com/images/d96970846a6aa38c57dd146738a2c5e19b3bcab8bc6e411f5bec2988c40c34e0.png
  
  - Vamsi Tallapudi October 5, 2016 At 7:11 am
    
    check if you contain file named menu_main.xml in res> menu folder. If not, create it.
    
    - Manish Kumar October 5, 2016 At 5:42 pm
      
      Thanks for your swift response.
      
      The link available above to download the code is expired.
      So Can u please send me the code for menu_main.xml on my mail.
      [email protected]
      
  - Jâspūñèét Päñdhër February 24, 2017 At 3:11 pm
    
    Same error i face
    
- Lalit Sahu March 1, 2017 At 11:33 am
  
  create a new file named “main_menu.xml” in folder res>menu>main_menu.xml
  Write below code in main_menu.xml
  
giridhar 196 December 31, 2016 At 12:01 am

i am compiling in this https://build.phonegap.com/apps but it is showing index file cannot found please help

User User January 28, 2017 At 2:11 am

how to fix this error cannot resolve symbol ‘activity_main_webview’

Bhushan February 17, 2017 At 12:19 pm

unable to resolve problem with menu in “getMenuInflater().inflate(R.menu.menu_main, menu);” and action_settingin “if (id == R.id.action_settings) “” part please help…

Jonathan Oliveira February 17, 2017 At 11:13 pm

What add menu itens with url for open in webview?

Lalit Sahu March 1, 2017 At 11:34 am

additional code to remove error R.menu problem

create a new file named “main_menu.xml” in folder res>menu>main_menu.xml
Write below code in main_menu.xml

hasif March 26, 2017 At 5:08 pm

thank for your tuts its worked for me.so some error .i fix that like error cache miss this is due to the missing of code in manifest . i didn’t care about it .so thank you for your support

Paulwin Jerome March 27, 2017 At 1:50 pm

After Install Its not showing the Open option

Internet Tricks April 4, 2017 At 10:24 am

Sir how to add Pull to refresh button in this application. Please help urgently.

Ashok Vanik April 5, 2017 At 11:03 am

Its Really Amazing…
Thank you so much..keep going..
See my blog http://gadgetworld4free.blogspot.com/
you can check my app also

Vibhu Jain April 7, 2017 At 11:38 am

Hi,

I need some help to solve my problem. Problem is

I was created android app from my website, so I want to make mobile number clickable and after click on mobile number open caller page and if more than 1 caller apps available then show popup.

Thanx in advance.

Chidiebere Ezeka May 5, 2017 At 9:43 pm

Thanks for this post..

charan May 27, 2017 At 3:42 am

how to make android web view apk with side tabs option?