Create Android app for Website/ Blog using WebView in New Android Studio

66
35
create android app for website

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:

create android app for website

Requirements and Recommended Tutorials for this article:

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

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

Steps for Creating Android App for your Website using WebView:

  1. 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.
  2. 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″]
  3. Now you can Implement the Splash Screen. We have discussed about how to implement a splash screen in our previous article.
  4. Now open Main Activity.java from Project Name > app > src > main > java > MainActivity
  5. 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://www.coderefer.com");
     
     }
    }

     

    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://www.coderefer.com 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:

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

  8. 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://www.coderefer.com");
            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.

  9. 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
Leave a Reply

avatar
46 Comment threads
20 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
47 Comment authors
charanChidiebere EzekaVibhu JainAshok VanikInternet Tricks Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
libationblog
Guest
libationblog

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
Guest

you should type shouldOverrideUrlLoading. Method names are case sensitive. The overrided method name must be the same.

saeed rehman
Guest

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
Guest
Ravi Rathod

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
Guest
Aditya Elango

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
Guest
Pallavi Khutal

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

Vong Chamnan
Guest
Vong Chamnan

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

J T
Guest
J T

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
Guest
Jorge Américo Vargas Freitas

Did you manage to solve this?

Prince Chaudhri
Guest

Thank You so much for this article… 🙂

Nork
Guest
Nork

Thanks!

Rafayel
Guest
Rafayel

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
Guest
Jorge Américo Vargas Freitas

Same problem here.

JASPAL SINGH
Guest
JASPAL SINGH

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
Guest
Jorge Américo Vargas Freitas

Any solution?

Martin Vasquez
Guest
Martin Vasquez

How can we get rid of the padding ?

Vamsi Tallapudi
Guest

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
Guest
Martin Vasquez

Thank you ! worked perfectly!

Muhammad Nouman Umer
Guest
Muhammad Nouman Umer

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

Nawaz Sagri
Guest
Nawaz Sagri

Check your XML file in app manifest
or use gradle clean
hope it will work

Nawaz Sagri
Guest
Nawaz Sagri

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
Guest

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
Guest
Nawaz Sagri

Ok..Thank you

Karsho
Guest

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
Guest
Jorge Américo Vargas Freitas

That would be awesome!

sankar a
Guest
sankar a

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

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
Guest
hanomaiah t

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

akash naryan
Guest
akash naryan

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

Krishna
Guest
Krishna

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
Guest
anil sharma

this blog is very useful thanks for sharing information

Niral Sura
Guest
Niral Sura

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… Read more »

Jorge Américo Vargas Freitas
Guest
Jorge Américo Vargas Freitas

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
Guest
Mark Newland

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

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)… Read more »

Vamsi Tallapudi
Guest

The menu folder might be missing in your project. Try removing onCreateOptionsMenu() and onOptionsItemSelected() methods from your project.

meetdilip
Guest
meetdilip

Thank you Vamsi. Where can I find them. Which file ?

Jorge Américo Vargas Freitas
Guest
Jorge Américo Vargas Freitas

Same error, probably, same solution: MainActivity.java.

meetdilip
Guest
meetdilip

Thank you. It worked.

meetdilip
Guest
meetdilip

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
Guest
Jorge Américo Vargas Freitas

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
Guest
Solly Cannon

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

is it possible to send push notification using webview app?

Pappu Bahadur
Guest
Pappu Bahadur

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

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

Code for download are not available…

jagadeesh sandireddy
Guest
jagadeesh sandireddy

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

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
Guest
Manish Kumar

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
Guest
Manish Kumar

comment image

Vamsi Tallapudi
Guest

check if you contain file named menu_main.xml in res> menu folder. If not, create it.

Manish Kumar
Guest
Manish Kumar

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
Guest
Jâspūñèét Päñdhër

Same error i face

Lalit Sahu
Guest
Lalit Sahu

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

giridhar 196
Guest
giridhar 196

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

User User
Guest
User User

how to fix this error cannot resolve symbol ‘activity_main_webview’

Bhushan
Guest
Bhushan

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
Guest

What add menu itens with url for open in webview?

Lalit Sahu
Guest
Lalit Sahu

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

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
Guest

After Install Its not showing the Open option

Internet Tricks
Guest
Internet Tricks

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

Ashok Vanik
Guest
Ashok Vanik

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

Vibhu Jain
Guest
Vibhu Jain

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
Guest
Chidiebere Ezeka

Thanks for this post..

charan
Guest
charan

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