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

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

create android app for website

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

     

    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. 

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

     

  7. Make sure you added Internet permission for your manifest. If not add this piece of code in your manifest:

    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.

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

     

    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.

Vamsi Tallapudi
Connect Via

Vamsi Tallapudi

Founder and Author at Code Refer
Android Dev, Tech Enthusiast and Blogger. Ever since my first basic android app has reached lakhs of users, I've found myself in love with Android Development :). While my primary passion is coding, during my free time, you can find me blogging, travelling or on Facebook 🙂
Vamsi Tallapudi
Connect Via

Related Posts

Vamsi Tallapudi

Android Dev, Tech Enthusiast and Blogger. Ever since my first basic android app has reached lakhs of users, I've found myself in love with Android Development :). While my primary passion is coding, during my free time, you can find me blogging, travelling or on Facebook :)

You may also like...

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

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

  • 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

    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

    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

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

  • Vong Chamnan

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

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

  • Thank You so much for this article… 🙂

  • Nork

    Thanks!

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

  • 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

  • Martin Vasquez

    How can we get rid of the padding ?

  • 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

    Thank you ! worked perfectly!

  • Muhammad Nouman Umer

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

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

  • Nawaz Sagri

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

  • 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

    Ok..Thank you

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

  • 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

    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

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

  • akash naryan

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

  • 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

    this blog is very useful thanks for sharing information

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

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

  • 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

    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 ?

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

  • meetdilip

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

  • meetdilip

    Thank you. It worked.

  • 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

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

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

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

  • Jorge Américo Vargas Freitas

    That would be awesome!

  • Jorge Américo Vargas Freitas

    Did you manage to solve this?

  • Jorge Américo Vargas Freitas

    Same problem here.

  • Jorge Américo Vargas Freitas

    Any solution?

  • 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

    is it possible to send push notification using webview app?

  • 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

    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

    Code for download are not available…

  • 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

    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

    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
  • check if you contain file named menu_main.xml in res> menu folder. If not, create it.

  • 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.
    manish4353@gmail.com

  • giridhar 196

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

  • User User

    how to fix this error cannot resolve symbol ‘activity_main_webview’

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

  • What add menu itens with url for open in webview?

  • Jâspūñèét Päñdhër

    Same error i face

  • Lalit Sahu

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

  • 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

    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

  • After Install Its not showing the Open option