Friday, May 29, 2015

How to load local HTML file with images into WebView in Android

activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#ffb396ff"
    >
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load Local HTML File With Local Image"
        />
    <!--
        Note that, in order for your Activity to access the
        Internet and load web pages in a WebView, you must add
        the INTERNET permissions to your Android Manifest file:

        <uses-permission android:name="android.permission.INTERNET" />
    -->
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
    </WebView>
</LinearLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.LinearLayout;
import android.webkit.WebView;
import android.app.ActionBar;

public class MainActivity extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get the application action bar and hide it
        ActionBar ab = getActionBar();
        ab.hide();

        // Get the widgets reference from XML layout
        LinearLayout ll = (LinearLayout) findViewById(R.id.rl);
        final WebView wv = (WebView) findViewById(R.id.wv);
        Button btn = (Button) findViewById(R.id.btn);

        // Set a click listener for Button widget
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /*
                    setWebViewClient(WebViewClient client)
                        Sets the WebViewClient that will receive
                        various notifications and requests.
                 */
                wv.setWebViewClient(new WebViewClient());

                /*
                    WebSettings
                        Manages settings state for a WebView. When a
                        WebView is first created, it obtains a set
                        of default settings.

                    setJavaScriptEnabled(boolean flag)
                        Tells the WebView to enable JavaScript execution.
                 */
                wv.getSettings().setJavaScriptEnabled(true);

                // Get the Android assets folder path
                String folderPath = "file:android_asset/";

                // Get the HTML file name
                String fileName = "sample.html";

                // Get the exact file location
                String file = folderPath + fileName;

                /*
                    loadUrl(String url)
                        Loads the given URL.
                 */

                // Render the HTML file on WebView
                wv.loadUrl(file);
            }
        });
    }
}
app/assets/sample.html

<!DOCTYPE html 
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
        >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sample Web Page</title>
    <style type="text/css">
        h3{
        color:green;
        }
    </style>
</head>

<body>
    <h3>This image loaded from app internal file system</h3>
    <img src="animal_100px.png" alt="animal"/>
</body>
</html>
More android examples