Use HTML and CSS Files in Android Apps

I have already provided the Use HTML and CSS file in Windows Phone Apps article. So you can see for Windows Phone Apps.

Now In this article you will see the use of HTML and CSS files in Android apps.

First create an Android Application Project in Eclipse.

Create an Android Application

Layout XML file

Then open the Layout XML file. Drag the first Linear Layout then WebView Element to the Relative Layout of the Activity.

webView

XML File Code

  1. <RelativeLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:keepScreenOn="true"  
  7.     android:paddingBottom="@dimen/activity_vertical_margin"  
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  9.     android:paddingRight="@dimen/activity_horizontal_margin"  
  10.     android:paddingTop="@dimen/activity_vertical_margin">  
  11.     <LinearLayout  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="fill_parent"  
  14.         android:orientation="vertical" >  
  15.         <WebView  
  16.             android:id="@+id/webview"  
  17.             android:layout_width="fill_parent"  
  18.             android:layout_height="fill_parent" />  
  19.     </LinearLayout>  
  20. </RelativeLayout>  
Then make a HTML and CSS file.

Copy files into the assets folder as in the following:

assets

Now open the Activity Java file.

Java File Code
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.Menu;  
  4. import android.view.MenuItem;  
  5. import android.webkit.WebView;  
  6. public class HtmlMainActivity extends Activity {  
  7.     WebView webview;@Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.activity_html_main);  
  11.         webview.loadUrl("file:///android_asset/demo.html");  
  12.     }@Override  
  13.     public boolean onCreateOptionsMenu(Menu menu) {  
  14.         // Inflate the menu; this adds items to the action bar if it is present.  
  15.         getMenuInflater().inflate(R.menu.html_main, menu);  
  16.         return true;  
  17.     }@Override  
  18.     public boolean onOptionsItemSelected(MenuItem item) {  
  19.         // Handle action bar item clicks here. The action bar will  
  20.         // automatically handle clicks on the Home/Up button, so long  
  21.         // as you specify a parent activity in AndroidManifest.xml.  
  22.         int id = item.getItemId();  
  23.         if (id == R.id.action_settings) {  
  24.             return true;  
  25.         }  
  26.         return super.onOptionsItemSelected(item);  
  27.     }  
  28. }  
  29.   
  30. webview.loadUrl("file:///android_asset/demo.html");  
That line is important for seeing the HTML Page.

Output

Output

 

Up Next
    Ebook Download
    View all
    Learn
    View all