WebView configuration step by step

1

I'm developing an HTML5 application for mobile devices. I initially used tools like Adobe PhoneGab Build and App Inventor. For future project reasons, I have to use Android Studio. The problem is that both the official documentation when the community has the culture to play the codes on their tutorial pages, assuming the developer knows the correct implementation of such codes (which is not my case). Some may be deduced from the syntax, such as a Java or an XML. More rarely do these tutorials point to the path or file for insertion. If it is in ActiveMain , AndroidManifest , etc.

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

I would like to know if there is a step-by-step solution for running my HTML5 application natively on% Android, with files inside the device, no URLs, JavaStript enabled, fullscreen , etc. If you have read this far, thank you in advance!

    
asked by anonymous 23.12.2016 / 15:37

1 answer

3

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 speak the language. Found on the link: link

A brief summary:

Introduction - > First, install Android Studio correctly.     By first installing JDK SE for your operating system, either     MAC / Linux / Windows. Then install Android Studio. create a     Empty Activy or Blanck Activy     depending on your version). Important not to name packages. Just go for beginners.

The tutorial will give one 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 with <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 we go to the file MainActivity.java (important not to have named the package in the learning phase). Found in:

  

app > java > com.projectname.project > MainActivity.java

Now comes a tricky 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 said that as it was OOP, everything was almost always necessary to create both classes and packages? So ... the webview object and the mWebview variable will be marked red because they are not referring to anything yet. Hover the mouse over, and click on the Android Studio quick fix, usually represented by a lamp or the first option. You will have a little box explaining the solution to your problem. Do as she says. Usually it is alt + enter.

In the same file before the end 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, 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 AndroidManifest.xml of android found at:

  

app > manifests > AndroidManifest.xml

Add this code after </aplication> :

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

Re-explaining this tutorial was more difficult than doing it. Enjoy!

    
23.12.2016 / 17:52