Load local html file with css into android webview

Loading html file with custom external css(Caching style sheet) included inside webview.

External css are used to control and maintain html webpages from outside source with single definition so web application developer will change into one single css( Caching style sheet ) file and it will automatically change the whole html page settings. Android WebView gives us the facility to load static html pages inside assets folder and you can also add css into that web page so it will load your html page just like a computer web browser. So here is the complete step by step tutorial for Load local html file with css into android webview.

android-project-download-code-button

How to Load local html file with css into android webview.

Note: Put both index.html & styles.css file inside assets folder.

assets_folder

Code for MainActivity.java file.

 package com.loadhtmlwithcss;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;


public class MainActivity extends Activity {

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

 WebViewWithCSS = (WebView)findViewById(R.id.webView1);
 
 WebSettings webSetting = WebViewWithCSS.getSettings();
 webSetting.setJavaScriptEnabled(true);
 
 WebViewWithCSS.setWebViewClient(new WebViewClient());
 WebViewWithCSS.loadUrl("file:///android_asset/index.html"); 
 }

 private class WebViewClient extends android.webkit.WebViewClient
 {
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) 
 {
 return super.shouldOverrideUrlLoading(view, url);
 }
 }
 
}

Code for activity_main.xml layout file.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.loadhtmlwithcss.MainActivity" >

 <WebView
 android:id="@+id/webView1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true" />

</RelativeLayout>

 

Code for index.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="Main" align="center">

<h1>This page is created through External CSS</h1>


</div>

</body>
</html>

Code for styles.css file.

 @charset "utf-8";
/* CSS Document */

.Main{

width:100%;
height:600px;
border: 1px solid #09ED1C;
float:left;
background-color:#00F3FF;
 }
H1{
 color:#FC1D21;
 
 }

Screenshot:

Load local html file with css into android webview

Click Here to download Load local html file with css into android webview project.

Leave a Reply

Your email address will not be published. Required fields are marked *