Android es un sistema operativo móvil basado en una versión modificada del kernel de Linux y otro software de código abierto, diseñado principalmente para dispositivos móviles con pantalla táctil, como teléfonos inteligentes y tabletas. Sí, lo leíste bien en el título de este artículo. En este artículo, vamos a crear una aplicación de Android con HTML , CSS y JavaScript en Android Studio .
¿Qué vamos a construir en esta aplicación?
Aquí hay un video de muestra de lo que vamos a construir en este artículo. Enviaremos texto para mostrar usando HTML y Javascript y cambiaremos el color de fondo usando CSS.
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
- Abra un nuevo proyecto.
- Estaremos trabajando en Actividad vacía con lenguaje como Java. Deje todas las demás opciones sin cambios.
- Asigne un nombre a la aplicación a su conveniencia.
- Habrá dos archivos predeterminados llamados activity_main.xml y MainActivity.java.
Si no sabe cómo crear un nuevo proyecto en Android Studio, puede consultar ¿Cómo crear/iniciar un nuevo proyecto en Android Studio?
Paso 2. Trabajando en el archivo XML
Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml.
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>
Paso 3. Trabajando en un archivo HTML
Vaya a aplicación > nuevo > archivo y asígnele el nombre index.html. Use el siguiente código en el archivo index.html
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>
Paso 4. Trabajando en el archivo CSS
Vaya a aplicación > nuevo > archivo y asígnele el nombre style.css. Use el siguiente código en el archivo style.css
CSS
body
{
background-color: pink;
}
h1
{
color:white
}
Paso 5. Trabajando en el archivo Javascript
Vaya a aplicación > nuevo > archivo y asígnele el nombre index.js. Use el siguiente código en el archivo index.js
Javascript
document.write("This text is shown from Javascript");
Paso 6. Trabajando en el archivo Java
Navegue hasta el archivo MainActivity.java y use el siguiente código en él.
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");
}
}
Aquí está el resultado final de nuestra aplicación.
Producción:
Publicación traducida automáticamente
Artículo escrito por jangirkaran17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA