Hướng dẫn và ví dụ Android WebView

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android

Android WebView là gì?
Ví dụ với Android WebView
Phụ lục: Thiết kế giao diện

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Android WebView là gì?

TODO: Chém gió thêm ở đây.

2- Ví dụ với Android WebView

Tiếp theo, chúng ta sẽ thực hành một ví dụ đơn giản. Trong ví dụ này WebView sẽ hiển thị một nội dung tĩnh, và một nội dung từ một URL.

Tạo một project có tên AndroidWebView:

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

Ứng dụng của bạn sẽ kết nối với internet, vì vậy bạn cần phải cấu hình cho phép điều này trong AndroidManifest.xml, thêm vào:


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

Nội dung đầy đủ của 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>

Giao diện ứng dụng:

Nếu bạn quan tâm tới các bước để thiết kế giao diện của ứng dụng này xin hãy xem phần phụ lục phía cuối của bài viết.

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");
   }

}

3- Phụ lục: Thiết kế giao diện

Thêm EditText và các Button vào giao diện.

Thêm WebView vào giao diện.

Sét đặt ID, Text cho các thành phần trên giao diện.

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android