Steps for launching an HTML+CSS+JavaScript project on an Android Emulator

My current project is built using HTML 5, CSS3, and JavaScript. It runs perfectly on an internet browser when accessed either through localhost or a server.

Now, I am looking to run my project on an Android Emulator. I have tried accessing it using http://'localhost':8036/login or http://'AndroidLocalhostipaddress':8036/login in the browser. I also attempted to copy the project into the asset folder using the web-view technique, but unfortunately, it did not work. Interestingly, my project functions correctly on iPad (iPhone) devices, but encounters issues on Android.

Prior to troubleshooting further, can anyone advise if any specific code conversions are required for successful execution on the Emulator?

javascriptandroidhtmlcss

Answer №1

To implement a WebView view in your layout XML file, follow these steps:

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/my_webview 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

In your activity's onCreate() method, include the following code:

WebView mwebview = (WebView) findViewById(R.id.my_webview);
        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.getSettings().setJavaScriptEnabled(true);

Use 

mWebView.loadUrl("file:///android_asset/myfile.html");
which is compatible with all API levels.

Note that 

mWebView.loadUrl("file:///android_res/raw/myfile.html");
only works on API level 8 for now, but this should not be a concern at the moment.

Give this code a try and see if it resolves your issue.

Answer №2

Have you experimented with the Apache Cordova Project?

While it may need some initial setup, I have confidence that it will suit your needs effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for the compatibility issues between CSS/SASS modules and a third-party library?

I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically react-horizontal-scrolling-menu <ScrollMenu selected={selected} scrollToSelected={true} data={items && items.map((item: any) ...

cssreactjscss-modulesreact-css-modulessass-modules

Safari does not consistently display uniform button height with the use of flex alignment

Within the div I have a button enclosed in the following structure: HTML: <div class="parent-container"> <div class="child child-1 col-xs-6"> <button class="btn btn-primary">Customize Feed</button> </div> ...

htmlcssflexboxvertical-alignment

Update input fields with information from the database when a selection is changed

As a complete novice in the world of HTML/Php/JavaScript, I am attempting to create a webpage with the following features: A dropdown list containing titles of documents When an item is selected, populate input fields below with data from PostgreSQL for ...

phpjqueryhtmlpostgresql

How can Google Web Toolkit (GWT) be used to enable legacy JavaScript code to make AJAX calls within a GWT application in order to bypass the same origin policy?

I am currently working on an application that heavily relies on existing JavaScript code with jQuery and AJAX calls to a Spring server-side application. The project scope has expanded beyond my initial expectations due to the addition of complex functional ...

javajavascriptjquerygwtsame-origin-policy

How can SASS be used to style a span based on its content?

In order to add css styling to a span element, I am looking to utilize only the dynamic SASS style processor without relying on any javascript/jQuery. The condition for applying the style should be based on the content of the span. For example: <sp ...

htmlcsssassstyles

I'm having trouble getting the Bootstrap 5 Carousel to work, even though I directly copied the code from the official website

Currently, I am designing a webpage utilizing Bootstrap 5 and incorporating the CDN for functionality. Although, when attempting to implement their carousel feature, it does not seem to be functioning as expected. The only modification I have made to their ...

javascripthtmlcssbootstrap-5bootstrap-carousel

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

htmlmysqlnode.jsexpress

using variables as identifiers in nested JSON objects

Within my code, there is a JSON object named arrayToSubmit. Below is the provided snippet: location = "Johannesburg, South Africa"; type = "bench"; qty = 1; assetNumber = 15; arrayToSubmit = { location : { type : { 'qty' ...

javascriptjqueryjson

Update and modify content.php directly on the samepage.php rather than through externalpage.php by utilizing either Jquery or AJAX

Is there a preferred method for loading content on the same page instead of redirecting to an external page using AJAX or JQuery? Below is an excerpt from my external.php file: $id = null; if (!empty($_GET['id'])) { $id = $_REQUEST[ ...

javascriptphpmysqlajaxpdo

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

Tips for stopping a drop-down box from changing its size

Currently working with C# and jquery. I've implemented a dropdown box containing 20 elements, each sized according to the largest element's text length. In addition, there is a checkbox that, when clicked by the user, removes all selections from ...

c#jqueryhtml

Repeatedly using jQuery to add elements twice

When I run this code, every time I click the '#right' button, the #slide increments by 2 instead of just 1. For example, if there are a total of 6 elements, it displays the 1st, 3rd, and 5th elements. var currentSlide=2; var totalSlides= ...

jquerycss

Struggling to properly set up the hamburger and close icons

When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...

htmlcss

Problems with Ajax calls are preventing Internet Explorer9 and Internet Explorer10 from functioning properly

I am facing an issue with displaying item pages using Ajax. The function works perfectly in Chrome, but not in Internet Explorer. <script type="text/javascript"> function obtainInfo(str) { if (str=="") { document. ...

javascriptajaxinternet-explorer-9

Variety of hues present on the mesh surface facing the plane

I am facing a challenge in coloring a face that is looking towards a plane. I have considered two different approaches: One option is to position a light source below the plane (which is only one-sided) so that the underside of the object receives a l ...

javascriptthree.js

What is the reason for requiring both a promise and a callback in order to store JSON data in a global variable?

In order to expose fetched JSON data to a global variable, it is necessary to use either a promise or a callback function. However, my current code is utilizing both methods... Currently, I am creating a promise using the .done function in jQuery. Within ...

javascriptjsonajaxcallbackpromise

Timeago.js employs language-specific configurations

I am currently utilizing timeago.js to showcase the data stored in the DB as '...hours ago'. The issue I am facing is that I need to translate this into pt_BR. I looked at the documentation and tried implementing it in my ReactJS code, but unfort ...

javascriptreactjsmongodbtimeago

Grid of pictures resembling a masonry pattern

As I ponder this intricate dilemma, I am convinced that there must be a simple solution or alternative approach to finding the answer. My goal is to create a grid of random images without any gaps between them. I have an array of images that I want to dis ...

phpjavascriptjquerymath

How to Implement a Nested Static Page in Play Framework

I am currently utilizing play framework for Java and focusing on a job portal project that consists of both the main site and an admin panel. Each of these sections has its own unique header and footer, so sharing them in the main file is not an option as ...

javahtmlplayframework-2.0

Guide on Implementing jQuery UI Autocomplete with Chrome's Speech Input Feature

I have recently discovered a cool feature in Chrome that allows users to dictate into any input field using speech input. Learn more here. It's easy to add this feature in Chrome: <input type="text" x-webkit-speech="x-webkit-speech" /> <!-- ...

javascriptjquerygoogle-chromewebkitjquery-ui-autocomplete