Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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: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");
    }
}


Here is the final output of our application.

Output:



Last Updated : 22 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads