Build an Android App with HTML, CSS and JavaScript in Android Studio

Last Updated : 22 Mar, 2022

Android is a mobile operating system based on a modified version of the Linux kernel and other open-source software, designed primarily for touchscreen mobile devices such as smartphones and tablets. Yes, you read it right in the title of this article. In this article, we are going to build an Android App with HTML, CSS, and JavaScript in Android Studio.

What we are going to build in this application?

Here is a sample video of what we are going to build in this article. We will text display text using HTML and Javascript and change the background color using CSS.

Step by Step Implementation

Step 1: Create a New Project

Open a new project.
We will be working on Empty Activity with language as Java. Leave all other options unchanged.
Name the application at your convenience.
There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?

Step 2. Working on the XML file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout
    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"> 
  
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"/> 
    
</LinearLayout>

Step 3. Working on HTML file

Navigate to app > new > file and name it as index.html. Use the following code in the index.html file

HTML

<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<h1> 
    This Text is shown with help of HTML. 
</h1> 
<script src="index.js"></script> 
</body> 
</html>

Step 4. Working on CSS file

Navigate to app > new > file and name it as style.css. Use the following code in the style.css file

CSS

body 
{ 
    background-color: pink; 
} 
h1
{ 
    color:white
}

Step 5. Working on Javascript file

Navigate to app > new > file and name it as index.js. Use the following code in the index.js file

Javascript

document.write("This text is shown from Javascript");

Step 6. Working on Java file

Navigate to the MainActivity.java file and use the following code in it.

Java

package com.example.androidwebapp; 
  
import androidx.appcompat.app.AppCompatActivity; 
  
import android.os.Bundle; 
import android.webkit.WebView; 
  
public class MainActivity extends AppCompatActivity { 
  
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
  
        WebView webView=findViewById(R.id.webView); 
        webView.getSettings().setJavaScriptEnabled(true); 
        webView.loadUrl("file:///android_asset/index.html"); 
    } 
}