Introduction to Android for Web development

This paper will start with web related technologies, introduce the basic knowledge of Android development, and then have a deeper understanding of Hybrid development. A web development background and some Java background are required.

An overview of the

This article will refer to the official documentation and basically build the first application using visibility.

The Android operating system is based on the Linux kernel. Linux is a multi-user system. Each Android application can be a different user. To isolate and allocate resources, so that each application can access only the functions it needs (important functions require authorization).

Application components

Application components are the basic building blocks of an Android application. Each component is an entry point into the application. Note that the entry point is different from the Java main function.

There are four different types of components

Activities
Services
Broadcast receivers
Content providers

Each component can be thought of as a Vue or React component, and each component has its own purpose and life cycle. Note that just as components in the JS framework can only represent logic, such as Vue’s Keep-alive, so does Android.

And components of any application can start components of other applications, such as enabling the camera

Activities

An activity is used for user interaction and represents an interface. A specific activity is a subclass of the Activity class. Activities contain different lifecycle functions that are called at the appropriate time, such as onCreate(), onStart(), onResume(), onPause(), onStop(), and onDestroy().

Services

A Service is a component that runs in the background and has no interface, such as playing music in the background. It is a subclass of the Service class.

Broadcast receivers

Broadcast receivers are used to respond to system-wide broadcasts by passing events outside the regular user stream. For example, the system notifies the application that the screen has turned off. It is a subclass of BroadcastReceiver

Content providers

Content providers read and write shared application data, which can exist in file systems, SQLite, and so on, and are subclasses of ContentProvider.

Enable the component

Of the four components, the first three use an asynchronous message intent to start a request, which can be a component of the application or another application. Content providers are launched when they become the target of a ContentResolver request.

Analog electron

For those familiar with Electron, the android development described here can be compared to electron, which uses a server-side language to access the system and generate installation packages using runtime apis, and allows users to interact with embedded Web pages through a WebView. Among them

The server languages, android uses Kotlin, Java, and C++ (all referred to in Java below), and electron uses js running in node.js
Interface, Android’s own interface architecture, WebView is an extension, electron needs to use webView
Developed for all android devices, from phones to tablets and TVS, Electron is used for desktop applications on macOS, Windows and Linux.

Analogies to Web Development

Web development and Android development are two forms of application interface development, the completion of the function is basically the same, so here will do a comparison from all aspects,

Pages and styles

In Web development, HTML is responsible for page description, CSS is responsible for style. In Android, XML is responsible for page description and style. XML includes manifest and layout. You can also use external XML style resources

The manifest file in question is androidmanifest.xml, which not only declares components such as activities, but also has the following functions

Declare required permissions
Declare the required API level
Declare required hardware and software capabilities
Declare required API libraries, such as map libraries

Logical processing

Web development uses JS, while Android uses Java for things like event handling and data processing.

routing

In Web development, front-end routing can be realized by monitoring hashchange event or history API for a single page, and back-end routing can be used for multiple pages. In Android, different interfaces are a separate activity component, and the routing function is completed through the intent transfer between activities.

WebView

The UI layout of an activity is a combination of various UI classes, such as the Button class representing a Button, as well as various DOM elements in HTML, which can be used directly after the browser wraps the corresponding elements. The WebView class is another example of a class that displays web pages as part of an activity, the equivalent of a shrunfied browser that displays only web pages by default, excluding the rest of the browser. This is where you can focus your attention, and where you have the closest relationship with the Web front end. See the documentation here, and refer to the main code below.

Add the webview

There are two ways, if the page being added needs to execute JS, you need to add the related permissions through Settings, such as enabling JS below, and adding network permissions in the manifest

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

Add a Webview to the activity layout

<WebView
      android:id="@+id/webview"
      android:layout_width="390dp"
      android:layout_height="416dp"/>

Copy the code

Then add the following to the corresponding activity’s onCreate hook function

WebView myWebView = (WebView) findViewById(R.id.webview); // find the corresponding element mywebview.loadurl ("file:///android_asset/index.html"); WebSettings WebSettings = myWebView.getSettings(); / / get set webSettings object. SetJavaScriptEnabled (true); / / enable jsCopy the code

The loaded page can be a web page or a local page. In the preceding example, you can add a directory by using the file->new-> Folder -> Assets Folder method, and then add the index. HTML file to it.

Setting up the entire activity

Similar to that

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);
Copy the code

Android and web communication

Communication involves the passing of messages between two parties

Js calling Android

Use addJavascriptInterface() to bind an interface to a global variable on an embedded Web page. Create classes that js can call methods on

public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context */ WebAppInterface(Context c) { mContext = c; } /** Show a toast from the web page */ @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); }}Copy the code

Instantiate and bind the class, at which point you can access the global variable Android in JS and use the methods defined above

 myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
Copy the code

The web page

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android! ') "/ >Copy the code

    function showAndroidToast(toast) {
            Android.showToast(toast);
    }
Copy the code

Android calls JS

Add a method to the activity by using evaluateJavascript() to execute the corresponding method in the JS global scope and get the return value of that method in the callback. The following code calls the callJs method in the JS and pops the return value using Toast

public void testJs(View view){ WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.evaluateJavascript("javascript:callJS()", New ValueCallback<String>() {@override public void onReceiveValue(String value) {// This is the result returned by js Toast.makeText(MainActivity.this, value,Toast.LENGTH_SHORT).show(); }}); }Copy the code

Add the element to call the method

<Button android:id="@+id/button2" Android :onClick="testJs" Android :text=" call js" />Copy the code