Friday, May 29, 2015

How to load local HTML file with CSS file 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="#ffff4906"
    >
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load Local HTML File With Local CSS File"
        />
    <!--
        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>
    <link rel="stylesheet" type="text/css" href="default.css" />
</head>

<body>
    <h1>This is header one.</h1>
    <h2>This is header two.</h2>
    <h3>This is header three.</h3>
</body>
</html>
app/assets/default.css

body{
  background-color:#E3E3E3;
}
h1{
  color:red;
  background-color:pink;
}

h2{
  color:green;
}

h3{
  color:blue;
}
More android examples