Cómo incluir un número de teléfono clickable en una vista web en Android

Trabajar con web views puede ser un desafío para un desarrollador de aplicaciones nativas. Recientemente, me enfrenté a un desafío en particular al incluir un número de teléfono clickable en una web view.

La solicitud del cliente era más que razonable. La página web mostraría un número de teléfono. Cuando el usuario hiciera clic en el número de teléfono, la aplicación lanzaría la aplicación de marcado telefónico prellenada con el número de teléfono del sitio web.

Según todo lo que había leído, esto debería "funcionar automáticamente" en un navegador móvil. Siempre que el href en el enlace esté precedido por "tel:", el dispositivo que ejecuta el navegador móvil debe hacer lo correcto para la plataforma. En realidad, descubrí que si bien varios dispositivos de diferentes fabricantes funcionaron según lo anunciado, algunos no lo hicieron. Afortunadamente, el SDK de Android tiene un mecanismo desde la versión 1.0 que permite que la aplicación intercepte una URL de carga y anule el comportamiento según sea necesario.

Interceptar el enlace del número de teléfono

Este tutorial demuestra cómo interceptar el enlace del número de teléfono que el usuario toca en una web view y cómo lanzar la aplicación de marcado. La idea es que se pueda utilizar esta técnica independientemente de cómo el navegador móvil en el dispositivo interprete o no el href del enlace. Siéntete libre de seguir los pasos a continuación o descargar e importar todo el proyecto directamente en Eclipse.

Paso 1: Crear un nuevo proyecto de Android en Eclipse

Crea un nuevo proyecto de Android en Eclipse y selecciona Android 2.3 (Gingerbread) o una versión superior.

Paso 2: Agregar una web view a activity_main.xml

Agrega una web view al archivo activity_main.xml que se encuentra dentro de la carpeta /res/layout.

Cómo detectar cambios de orientación en Android y bloquear la actividad en modo retrato o apaisado

<RelativeLayout>
    <WebView></WebView>
</RelativeLayout>

Paso 3: Crear un nuevo cliente de web view en MainActivity.java

Crea un nuevo cliente de web view en el archivo MainActivity.java y asígnalo a la web view en el método onCreate. El resto es un intent estándar de Android para abrir el marcador y pasarle el número de teléfono incrustado en la URL.

package com.example.myapplication;

import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.app.Activity;
import android.content.Intent;

public class MainActivity extends Activity {

    private static final String HTML = "Haz clic aquí para llamar";
    private static final String TEL_PREFIX = "tel:";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView wv = (WebView) findViewById(R.id.webview);
        wv.setWebViewClient(new CustomWebViewClient());
        wv.loadData(HTML, "text/html", "utf-8");
    }

    private class CustomWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView wv, String url) {
            if(url.startsWith(TEL_PREFIX)) {
                Intent intent = new Intent(Intent.ACTION_DIAL);
                intent.setData(Uri.parse(url));
                startActivity(intent);
                return true;
            }
            return false;
        }
    }

}

Probablemente notaste que, aunque en este caso estamos abriendo el marcador telefónico, al devolver true en la función shouldOverrideUrlLoading, podemos redirigir el flujo de la aplicación de la forma que queramos. Creo que esta técnica agnóstica de dispositivos será útil en varios escenarios además del descrito aquí.

Si deseas ver la web view en acción, simplemente compila y carga el archivo APK en un dispositivo o emulador.

Capturas de pantalla

Figura A

Figura B

Cómo redondear las esquinas de un widget ImageView en Android

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo incluir un número de teléfono clickable en una vista web en Android , tenemos lo ultimo en tecnología 2023.