Android WebView Tutorial
View more Tutorials:
- TODO: More Info

Next, we will practice a simple example. In this example the WebView will display a static content, and a content from a URL.

Create a project named AndroidWebView:
- File > New > New Project > Empty Activity
- Name: AndroidWebView
- Package name: org.o7planning.androidwebview
- Language: Java

Your application will connect to the internet, so you need to configure to allow this in AndroidManifest.xml, add config:
<uses-permission android:name="android.permission.INTERNET" />
Full content of AndroidManifest.xml:
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.o7planning.androidwebview"> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
The application interface:

If you are interested in the steps to design the interface of this application, please see the appendix at the end of the article.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <EditText android:id="@+id/editText_addressBar" android:layout_width="375dp" android:layout_height="48dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="25dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:ems="10" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <LinearLayout android:id="@+id/linearLayout" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:orientation="horizontal" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/editText_addressBar"> <Space android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/button_static" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Static Content" /> <Button android:id="@+id/button_go" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Go" /> </LinearLayout> <WebView android:id="@+id/webView" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/linearLayout" /> </androidx.constraintlayout.widget.ConstraintLayout>
MyWebViewClient.java
package org.o7planning.androidwebview; import android.graphics.Bitmap; import android.util.Log; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.EditText; public class MyWebViewClient extends WebViewClient { private EditText addressBar; public MyWebViewClient(EditText addressBar) { this.addressBar= addressBar; } // When you click on any interlink on webview. @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Log.i("MyLog","Click on any interlink on webview that time you got url :-" + url); addressBar.setText(url); return super.shouldOverrideUrlLoading(view, url); } // When page loading @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); Log.i("MyLog", "Your current url when webpage loading.." + url); } // When page load finish. @Override public void onPageFinished(WebView view, String url) { Log.i("MyLog", "Your current url when webpage loading.. finish" + url); super.onPageFinished(view, url); } @Override public void onLoadResource(WebView view, String url) { super.onLoadResource(view, url); } }
MainActivity.java
package org.o7planning.androidwebview; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.webkit.WebView; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class MainActivity extends Activity { private EditText addressBar; private WebView webView; private Button buttonGo; private Button buttonStatic; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); buttonGo =(Button)findViewById(R.id.button_go); buttonStatic =(Button)findViewById(R.id.button_static); addressBar =(EditText)findViewById(R.id.editText_addressBar); webView =(WebView)findViewById(R.id.webView); // Tùy biến WebViewClient để điều khiển các sự kiện trên WebView webView.setWebViewClient(new MyWebViewClient(addressBar)); buttonGo.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View view) { goUrl(); } }); buttonStatic.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View view) { showStaticContent(); } }); } private void goUrl() { String url = addressBar.getText().toString().trim(); if(url.isEmpty()) { Toast.makeText(this,"Please enter url",Toast.LENGTH_SHORT).show(); return; } webView.getSettings().setLoadsImagesAutomatically(true); webView.getSettings().setJavaScriptEnabled(true); webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); webView.loadUrl(url); } private void showStaticContent() { String staticContent="<h2>Select web page</h2>" + "<ul><li><a href='http://eclipse.org'>Eclipse</a></li>" +"<li><a href='http://google.com'>Google</a></li></ul>"; webView.loadData(staticContent, "text/html", "UTF-8"); } }
Add EditText and Button(s) to the interface.


Add WebView to the interface.


Set ID, Text for components on the interface.
