Soluciones Móviles I

LABORATORIO 13
“WebApps”
1. Cree un nuevo proyecto llamado MyWebApp, aceptar las opciones por defecto y seleccione
una Empty Activity como plantilla inicial.
2. Procedemos a agregar un control de tipo WebView en el layout de la actividad principal
“activity_main.xml”:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. Agregamos un atributo que permitirá la carga de una URL en el contenedor.

private static String DIRECTION
= "https://levelup.gitconnected.com/open-pdf-files-in-android-without-
webviews-or-intents-3cc960752cca";

4. Como siguiente paso configuramos el WebView para que cargue la dirección que hemos
asignado.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

WebView webView = (WebView)findViewById(R.id.webView);

webView.loadUrl(DIRECTION);
}

5. Agregamos el permiso de uso de internet en el fichero AndroidManifest.xml

1
Soluciones Móviles I

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.miempresa.mywebapp">

<uses-permission android:name="android.permission.INTERNET"/>

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.MyWebApp">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>

6. Para comprobar la funcionalidad trabajada, proceda a compilar la solución y observar el

resultado.
7. Agregamos una clase privada dentro de la clase principal para poder manejar el
comportamiento del WebView:
private class MyWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest
request) {
return super.shouldOverrideUrlLoading(view, request);
}
}

8. Ahora cargamos la nueva clase en nuestro WebView:

WebView webView = (WebView)findViewById(R.id.webView);
webView.setWebViewClient(new MyWebViewClient());
webView.loadUrl(DIRECTION);

9. Compile y observe el resultado.

10. Cambiamos el tema por el siguiente.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyWebApp"
parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->

2
Soluciones Móviles I

<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?
attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>

11. Ahora procedemos a agregar el soporte para el historial del WebView y no salir de la
aplicación si se presiona el botón atrás, para esto sobreescribimos el método onKeyDown de
la actividad principal.
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
WebView webView = (WebView)findViewById(R.id.webView);
if((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}

12. Compile y realice pruebas sobre el resultado.

13. Ahora procederemos a agregar la compatibilidad con Javascript, lo que permitirá
implementar operaciones de interacción entre Android y Javascript.
WebView webView = (WebView)findViewById(R.id.webView);

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);

webView.setWebViewClient(new MyWebViewClient());
webView.loadUrl(DIRECTION);

14. Creamos una clase llamada WebAppInterface que servirá de interfaz entre el script de
Javascript y la app.
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class WebAppInterface {

Context context;

WebAppInterface(Context c){
3
Soluciones Móviles I

context = c;
}

@JavascriptInterface
public void showToastMessage(String message){
Toast.makeText(context,message,Toast.LENGTH_SHORT).show();
}
}

15. Ahora enlazamos la clase al intérprete de Javascript que correrá en el WebView, para esto se
hará uso del método addJavascriptInterface() y nombraremos a la interface Android.
WebView webView = (WebView)findViewById(R.id.webView);

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);

webView.addJavascriptInterface(new WebAppInterface(this),"Android");
webView.setWebViewClient(new MyWebViewClient());
webView.loadUrl(DIRECTION);

16. Finalmente en un servidor de aplicaciones externo, creamos un fichero sencillo en el cual

llamaremos al método showToastMessage.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function showAndroidToast(message){

Android.showToastMessage(message);

</script>

</head>

<body>

<input type="button" value="Dime Hola"

onclick="showAndroidToast('Hola desde Javascript, Android!!')" />

</body>

</html>

17. Prueba que al lanzar el servidor de aplicaciones, el script muestre el botón creado.

4
Soluciones Móviles I

18. Ahora modifique la dirección de carga del webview para que apunte al script que usted ha
creado.
private static String DIRECTION
= "http://10.0.2.2/ejemplo/index.html";

19. Si se utiliza una versión superior a la 7 en Android es necesario configurar el AndroidManifest

de la siguiente manera:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.miempresa.mywebapp">

<uses-permission android:name="android.permission.INTERNET"/>

<application
android:usesCleartextTraffic="true"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.MyWebApp">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>

20. Compile la aplicación y observe el resultado.

PRACTICA CALIFICADA

Bajo el mismo concepto del laboratorio, construya una calculadora mediante el uso de interfaces en
Javascript.