WebView configuration step by step

I am developing an HTML5 application for devices mobile. Initially I used tools like Adobe PhoneGab Build and App Inventor. For reasons of future projects, I have to use Android Studio. The problem is that both the official documentation when the community has the culture to throw the codes into their tutorial pages, assuming the developer knows the correct implementation of such codes (which is not my case). Some we can deduce by syntax, such as a Java or an XML. More rarely these tutorials point the path or file to insert. If it is in ActiveMain, in AndroidManifest, etc.

I even came across some tutorials with the exact path of some of the codes (although they do not inform the mWebView.loadUrl, the most important). Yes, I have already downloaded "ready" examples, but they never arrive in make , they always give error. I searched thoroughly. Maybe I'm not searching for the keywords certain.

I would like to know if there is a step-by-step solution, to run my HTML5 application natively on an android .apk, with the files inside the device, no URL bar, JavaStript enabled, fullscreen, etc. If you've read this far, thank you right now!

Author: viana, 2016-12-23

1 answers

Browsing the internet, I found a solution on the google chrome Developer site. The link is in English, but it is quite understandable even for those who do not master the language. Found at link: https://developer.chrome.com/multidevice/webview/gettingstarted

A short summary:

Introduction - > first, properly install Android Studio. Installing JDK first if for your operating system, be MAC / Linux / Windows. Next install Android Studio. Create one blank type project (Empty Activy or Blanck Activy depending on your version). Important not to give names to packages. Just go forward, for beginners.

The tutorial will give a presented in the project structure in Android Studio. Find the file activity_main.xml found in

App > res > layout > activity_main.xml

Some versions or project types of Android Studio will be marked <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" or <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" inside the activity_main.xml file.

This code should be added to the file:

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

Now let's go to the MainActivity file.java (important not to have named the package in the learning phase). Found at:

App > java > com.project name.project > MainActivity.java

Now comes a delicate part if you are not used to java.

Replace this code:

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

For this:

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

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

Remember when you were learning JAVA, and in the class said that since it is oop, everything was almost always necessary to create both classes and packages? Well, then... the webview object and the mWebview variable will be marked red as they are not referring to anything yet. Hover your mouse over, and click on top of the Android Studio quick fix, usually represented by a lamp or the first option. You'll have a little box explaining your S. O.'s solution. Usually it is alt + enter.

In the same file before the final Keys, add this to enable javascript:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Will appear the same problem as the red markings. Repeat the procedure. And finally, still in the same file, add the URL of the site you want to open:

mWebView.loadUrl("http://beta.html5test.com/");

Now, to finish, add the internet access permission on Android AndroidManifest.xml found at:

App > manifests > AndroidManifest.xml

Add this code after </aplication>:

 <uses-permission android:name="android.permission.INTERNET" />

Re-explaining this tutorial was harder than doing the deed. Enjoy!

 3
Author: Paulo Sérgio Duff, 2016-12-23 16:52:05