Configuration Webview step by step

Question

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

I even found some tutorials with the exact path of some of the codes (although they do not inform the mWebView.loadUrl, most importantly). Yes, I have already downloaded "ready" examples, but never arrive at the make, always give error. I searched exhaustively. Maybe I’m not searching for the right keywords.

I wonder if there is a step-by-step solution to running my HTML5 application natively in a .apk Android, with the files inside the device, no URL bar, Javastript enabled, fullscreen, etc. If you have read this far, I thank you in advance!

Answer 1

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

A short summary:

Introduction -> First, properly install Android Studio. First installing JDK SE to your operating system, be MAC/Linux/Windows. Then install Android Studio. Create a project of type "Blank" (Empty Activy or Blanck Activy depending on your version). Important not to name packages. Just keep going, for beginners.

The tutorial will give a presentation in the structure of projects in Android Studio. Find the file activity_main.xml found in

app > res > layout > activity_main.xml

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

This code should be stored in the file:

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

Now we go to the file Mainactivity.java (important not to have named the package in learning phase). Found in:

app > java > com.nomedoprojeto.project > Mainactivity.java

Now comes a delicate part if you’re 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 class you said that since it was OOP, it was almost always necessary to create both classes and packages? Because then... the webview object and the mWebview variable will be marked red because they are not referring to anything yet. Hover over, and click on the Android Studio quick fix, usually represented by a light bulb or the first option. There will be a box explaining your S.O. solution. Do what it says. It is usually alt+enter.

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

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

The same problem with the red markings will appear. 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 wrap up, add the internet access permission on AndroidManifest.xml android found in:

app > manifests > Androidmanifest.xml

Add this code after the </aplication>:

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

Re-exporting this tutorial was harder than doing it. Take advantage!