4

Básicamente, mi app se basa en un WebView, por lo que si hay un error de conexión, aparece un texto por defecto de Android que dice que no se puede conectar porque no existe conexión.

Para evitar esto, quiero saber como hacer visible mi propia pantalla personalizada de "no existe conexión", que mayoritariamente estaría oculto cuando exista conexión y visible cuando la conexión se haya perdido o no haya respuesta por parte del servidor.

Un amigo de la facultad de informática, me dijo que se podría llevar a cabo desde una función en java o con javascript dentro de la app. Sin embargo, no tengo idea de como se hace.

¿Alguien podría ayudarme?

Edición:

Con todo respeto, creo que la pregunta es perfectamente entendible. Solo quiero saber como mostrar una imagen cuando no hay respuesta por parte del servidor.

Por ejemplo:

Tengo la app abierta y de la nada la conexión con el servidor es nula (por "x" motivo). Entonces, en vez de que el navegador interno de Android me muestre un mensaje de "error de conexión", que se anule ese default y se haga visible una imagen que contendría un mensaje de "Ups, algo salió mal" o lo que fuere. Es solamente para no dejar esa mala imagen de que la app "se corta" con respecto a la conexión.

6
  • Criss agrega una imagen o da más detalles!
    – Jorgesys
    Commented el 7 jun. 2016 a las 0:30
  • 1
    Yo tengo una solución para lo que pide. No creo que cueste de entender su pregunta. Puede ser que el titulo confunda, pero la pregunta la entiendo. Por favor, desbloquead la pregunta y podre contestar. Gracias. @Elenasys Commented el 7 jun. 2016 a las 8:47
  • Criss mirate Phonegap, hay muchos aspectos que te lo solventa por ejemplo con javascript puedes detectar si hay conexion o no usando docs.phonegap.com/en/edge/cordova_connection_connection.md.html
    – Codelaby
    Commented el 7 jun. 2016 a las 9:01
  • 2
    @VickyVicent con la edición la pregunta es entendible, ahora dice también: "como hacer visible mi propia pantalla personalizada de "no existe conexión", voto por reabrir esta pregunta! =)
    – Jorgesys
    Commented el 7 jun. 2016 a las 11:40
  • Agregué algo de info a la pregunta. De todos modos, y con todo respeto, creo que algunos mal interpretaron la pregunta e hicieron una incorrecta edición de la misma. Sin embargo, gracias por querer ayudar.
    – Criss
    Commented el 8 jun. 2016 a las 23:36

2 respuestas 2

3

Después de estar un tiempo cerrada la pregunta, a lo mejor ya tienes tu respuesta, pero te dejo la solución que yo me ingenie para hacer lo que pides. Tengo que decir, que muy posiblemente este código sea mejorable, así que acepto mejoras, por parte de la comunidad y aclarar que este código sirve para android nativo sin necesidad de implementar ningún framework.

Leyendo tu pregunta enseguida me di cuenta de que, por eso mismo, me pelee con Android hace unos meses, porque la imagen que aparece por defecto cuando no existe conexión en un WebView es bastante horrible y quedaría muy mal mostrar un mensaje que ni siquiera el usuario entiende, por ello cree esta pantalla.

Lo que hice, básicamente fue crear un layout que tuviese en su interior el WebView y el mensaje que quería mostrar y desde la MainActivity crear una TimerTask para que estuviera comprobando la conexión a Internet mientras la app este activa.

Un TimerTask es, según Google:

La clase TimerTask representa una tarea para ejecutar en un momento determinado. La tarea se puede ejecutar una o más veces.

Ahora te explico como lo realicé paso a paso. Te recomiendo que crees un nuevo proyecto y copies el código que te dejo a continuación en su sitio para poder ver el resultado y no mezclar este código con el tuyo, hasta que no lo tengas claro:

1.- Primero creé el layout con las imágenes a mostrar:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.miapp.webapp.MainActivity"
    android:background="#ffffff">

    <WebView
        android:id="@+id/webView_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imReload"
        android:src="@drawable/no_connection"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="201dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/reload_message_1"
        android:id="@+id/tvReloadMess1"
        android:layout_below="@+id/imReload"
        android:layout_centerHorizontal="true"
        android:textSize="45sp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:textColor="@color/colorPrimary" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/reload_message_2"
        android:id="@+id/tvReloadMess2"
        android:layout_below="@+id/tvReloadMess1"
        android:layout_centerHorizontal="true"
        android:textSize="24sp"
        android:textColor="@color/colorPrimary" />

</RelativeLayout>

Como puedes ver en el layout, existe un componente WebView que ocupa toda la pantalla y una ImageView con dos TextView donde, en caso de que se pierda la conexión, se muestre un mensaje y una imagen.

Los las frases de los TextView que he utilizado en mi proyecto son los siguientes:

<string name="reload_message_1"><b>¡Ups!</b></string>
<string name="reload_message_2">Se a perdido la conexión</string>
// Tambien añadí la URL de la pagina a mostrar en el `WebView`
<string name="web_root">https://www.mipaginaweb.com/</string>

Estas frases se tiene que guardar en el archivo res/values/strings.xml. Además te dejo la imagen que utilicé para que puedas probarlo:

[IMAGEN]

2.- Una vez creado el layout, nos pasamos al MainActivity.java y aplicamos el siguiente código:

public class MainActivity extends AppCompatActivity {

    WebView myWebView;
    ImageView imgReload;
    TextView message_one, message_two;
    Timer timer;
    boolean connectNew, connectOld;
    String WEB_ROOT; // La URL de la web que se quiere mostrar
    int TIME_WAIT_CHECK;// En milisegundos. Es el tiempo que pasará desde el inicio de la App para empezar a comprobar la
    // conexión.
    int TIME_CHECK; // En milisegundos. Cada cuento tiempo revisará la conexión.



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Iniciamos constantes
        WEB_ROOT = getResources().getString(R.string.web_root);
        TIME_WAIT_CHECK = Integer.parseInt(getResources().getString(R.string.time_wait_check));
        TIME_CHECK = Integer.parseInt(getResources().getString(R.string.time_check));


        // Se enlazan las views con el código java.
        myWebView = (WebView) findViewById(R.id.webView_map);
        imgReload = (ImageView) findViewById(R.id.imReload);
        message_one = (TextView) findViewById(R.id.tvReloadMess1);
        message_two = (TextView) findViewById(R.id.tvReloadMess2);

        // Se inicia el TimerTask (una tarea en segundo plano que se ejecutará cada cierto tiempo
        // mientras esté activa la aplicación).
        networkConnected nc = new networkConnected();
        // Se inicia un timer necesario para que el TimerTask sepa cada cuanto tiempo se repetirá.
        timer = new Timer();
        timer.scheduleAtFixedRate(nc, TIME_WAIT_CHECK, TIME_CHECK);
                                // 1.- Es el TimerTask que se ejecutará.
                                // 2.- Es el tiempo que esperará para ejecutarse por primera vez.
                                // 3.- Es el tiempo que tardará en repetirse el TimerTack.

        // ¡Imprescindible! Se encarga de guardar el estado de la antigua conexión y de la nueva. Llamaremos a este if ConectionOK, acuerdate.
        if (connectNew) {
            connectOld = false;
        } else {
            connectOld = true;
        }


        // Comprobamos si existe conexión a internet la primera vez que ejecutamos. Si no aplicas este código y no existe conexión cuando ejecutas la app, esta no funcionará correctamente.
        if (isNetworkConnected()) {
            chargeWeb(String.valueOf(Html.fromHtml(WEB_ROOT)));
        }

    }

    // Comprobamos si existe conexión a internet, si no existe se cargaran unas imágenes
    // sustituyendo el WebView
    private boolean isNetworkConnected() {
        ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context
                .CONNECTIVITY_SERVICE);
        NetworkInfo info = connectivityManager.getActiveNetworkInfo();
        if (info == null || !info.isConnected() || !info.isAvailable()) { // No existe conexión
            imgReload.setVisibility(View.VISIBLE);
            message_one.setVisibility(View.VISIBLE);
            message_two.setVisibility(View.VISIBLE);
            return false;
        } else { // Existe conexión
            imgReload.setVisibility(View.INVISIBLE);
            message_one.setVisibility(View.INVISIBLE);
            message_two.setVisibility(View.INVISIBLE);
            return true;
        }
    }

    // Se utiliza para cargar la web en la aplicación
    private void chargeWeb(String web) {
        if (myWebView != null) {
            WebSettings webSettings = myWebView.getSettings();
            webSettings.setJavaScriptEnabled(true); // Activamos JavaScript
            myWebView.loadUrl(web); // Cargamos la página web

            // Indicamos que las páginas internas de la web se muestren dentro de la App
            myWebView.setWebViewClient(new WebViewClient());
            // Indicamos que las páginas externas a la web se muestren en un navegador
            myWebView.setWebViewClient(new WebViewClientExternal());
        }
    }

    // Tarea repetitiva en segundo plano. Se encarga de comprobar si la conexión se pierde o no.
    private class networkConnected extends TimerTask {
        @Override
        public void run() {
            // En los TimerTask no se puede hacer referencia a las views por lo que utilizamos
            // "runOnUiThread" para poder acceder a las view del thread principal.
            runOnUiThread(new Runnable() {
                              @Override
                              public void run() {
                                  // Comprobar si existe o no conexión a internet
                                  ConnectivityManager connectivityManager = (ConnectivityManager)
                                          getSystemService(Context.CONNECTIVITY_SERVICE);
                                  NetworkInfo info = connectivityManager.getActiveNetworkInfo();
                                  if (info == null || !info.isConnected() || !info.isAvailable()) {
                                      connectNew = false; // Desconectado
                                  } else {
                                      connectNew = true; // Conectado
                                  }

                                  // Cambiamos la vista de la actividad para mostrar una imagen (si
                                  // se pierde la conexión) o mostrar la web (si la hemos
                                  // recuperado).
                                  //
                                  // Utilizamos dos variables connectNew y connectOld:
                                  //
                                  //    - connectNew: esta variable es la que indicará si existe o
                                  //                  no conexión.
                                  //    - connectOld: esta variable detectará si se ha sufrido algún
                                  //                  cambio en la conexión desde el útlimo cambio.
                                  //
                                  // Cuando se ejecuta la aplicación, el valor de las dos variables
                                  // es null. Cuando se inicia la clase TimerTask, connectNew recibe
                                  // un valor booleano de la conexión y, como puede ser, que el valor
                                  // sea false en la primera ejecución, en el if ConnectionOK le damos a
                                  // connectOld el valor contrario al de connectNew para que entre
                                  // en la primera condición del IF siguiente (el de abajo de este parrafo).
                                  //
                                  // Esta primera condición sirve para detectar que ha habido un
                                  // cambio entre la conexión anterior y la nueva y por lo tanto la
                                  // vista de la actividad tiene que sufrir un cambio.
                                  //
                                  // Como en esta explicación hemos dado por sentado que la connectNew
                                  // seria false y connectOld seria true, entraría en la primera
                                  // condición del IF y luego solo se tendrá que comprobar el valor
                                  // connectNew para saber qué cambio es el que se tiene que
                                  // aplicar. En este caso false, desconectado.
                                  //
                                  // Por último, solo tenemos que guardar en connectOld este cambio
                                  // de conexión, por lo que connectOld se iguala a connectNew y se
                                  // vuelve a ejecutar la comprobación de la conexión, cambiando o
                                  // no el valor de connectNew. Además, como esta es la segunda vez
                                  // que ejecuta el código, ya no pasará por el if ConnectionOK para
                                  // cambiar el  valor booleano de connectOld. A partir de aquí,
                                  // connectOld solo cambiara su valor si connectNew cambia.

                                  if (connectNew != connectOld) {
                                      if (!connectNew) { //Desconectado.
                                          imgReload.setVisibility(View.VISIBLE);
                                          message_one.setVisibility(View.VISIBLE);
                                          message_two.setVisibility(View.VISIBLE);
                                          myWebView.setVisibility(View.INVISIBLE);
                                      } else { //Conectado.
                                          imgReload.setVisibility(View.INVISIBLE);
                                          message_one.setVisibility(View.INVISIBLE);
                                          message_two.setVisibility(View.INVISIBLE);
                                          myWebView.setVisibility(View.VISIBLE);
                                          chargeWeb(WEB_ROOT);
                                      }
                                  }

                                  connectOld = connectNew;
                              }
                          }

            );
        }

    }

    // Detectamos cuando el usuario pulsa el botón de retroceso
    @Override
    public void onBackPressed() {
        if (myWebView.canGoBack()) {
            myWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

Con las explicaciones que hay en el código, quedará más o menos claro. Además, en el método chargeWeb() he echo referencia a unas clases llamadas WebViewClient() y WebViewClientExternal(). Como en tu código has implementado un WebView, supongo que sabrás a que me refiero, pero por si acaso y para la gente que lea esto y no sepa lo que es, lo explico.

3.- En el código anterior, en el método chargeWeb() he echo referencia a WebViewClient() y WebViewClientExternal(), pues bueno estas clases sirven para cuando el usuario interactua con la pagina web que se muestra. Por ejemplo, imaginemos que mostramos una tienda online de fruta llamada http://www.misfrutas.com/. Cuando el usuario pulse sobre una foto de un producto, la pagina web le mostrara una nueva pagina con la descripción del producto. Este nuevo enlace se abrirá en la app sin ningún problema, pero ¿qué sucede cuando clicamos sobre un enlace que no este dentro de el dominio http://www.misfrutas.com/ como por ejemplo, clicar sobre un anuncio que aparece en la pagina de http://www.misfrutas.com/? Que se nos abrirá también dentro de la app, creando una app navegador y no es un navegador lo que queremos crear. Si queremos que en nuestra app solo muestre los enlaces relacionados con nuestro dominio y los enlaces que no estén relacionados, los abra en un navegador externo, tenemos que aplicar estas dos lineas:

// Indicamos que las páginas internas de la web se muestren dentro de la App
myWebView.setWebViewClient(new WebViewClient());
// Indicamos que las páginas externas a la web se muestren en un navegador
myWebView.setWebViewClient(new WebViewClientExternal());

La clase WebViewClient() ya existe por defecto, pero la clase WebViewClientExternal() no y se tiene que crear. Este es el código:

public class WebViewClientExternal extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        if (Uri.parse(url).getHost().endsWith(view.getResources().getString(R.string.frag_web_root))) {
            return false;
        }

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        view.getContext().startActivity(intent);

        return true;
    }
}

Como se puede ver, en el if se hace refecencia a una string del archivo strings.xml. Este string es el siguiente y hay que tener en cuenta que se tiene que poner la url de nuestra pagina web sin / y sin www, como en el ejemplo:

<string name="frag_web_root">mipaginaweb.com</string>

Con todo esto tendrás lo que piden. Espero que lo uses adecuadamente, me costo mucho llegar a esta solución y te lo doi completamente explicado. Dentro de unas semanas subiré el proyecto a GitHub para que se pueda ver mejor y dejaré el link aquí.

Suerte y si necesitas cualquier cosa, no dudes en preguntar.

3
  • No lo he probado aun, mas lo leí casi completo y ya me has ayudado muchísimo con todo el esfuerzo que le pusiste al comentario y con lo del WebViewClientExternal(). Sos una genia! Gracias!!
    – Criss
    Commented el 10 jun. 2016 a las 17:03
  • "Trata a los demás como te gustaría que te tratasen a ti" y ojalá fuese así, porque a veces me gustaría que la gente explicase un poco mejor las cosas y no escriban una respuesta solo por ganar puntos, sobre todo si son campos que no dominas. Gracias por el cumplido y si acabas de leer y no entiendes algo, comentamelo. ¡Suerte! Commented el 10 jun. 2016 a las 17:30
  • Lamentablemente, muchos tienen intenciones netamente guturales y no les importa el ayudar realmente a alguien. Es lindo ver a alguien que rompe con ese estúpido pensamiento y ayuda de verdad. Por supuesto, si tengo alguna duda te la consulto. Muchas gracias y suerte a ti!
    – Criss
    Commented el 10 jun. 2016 a las 17:36
0

Lo mejor en este caso que si tu app de basa en un webView, es decir una HybridApp manejes un framework, por ejemplo ionic, es uno de los mejores y puede ayudar a controlar lo que quieres hacer.

Basicamente puedes manejar el estado de la respuesta del servidor y de acuerdo a eso mostrar o no una Imagen o varible en tu app.

Pero si tu app es nativa, igual puedes manejar la respuesta del server y depende a eso, controlar cualquier variable o estado en la vista.

4
  • 1
    Me resulta razonable y útil. Sin embargo, ¿cómo lo hago?
    – Criss
    Commented el 8 jun. 2016 a las 23:34
  • 1
    Claro pero dime cual es tu opcion lo va a hacer nativo o con ionic? depende a eso esa hare diferente =) Commented el 10 jun. 2016 a las 0:15
  • Soy diseñador y programador web. La app es solo uns pagina que se muestrs en un webview. No se practicamente nada de android y no tengo tiempo para estudiar. Es por eso que necesito que sea cual fuere la respuesta, me digan "es asi y asa" y listo. Sin ofender, pero si alguien peegunta algo, espera respuestas.
    – Criss
    Commented el 10 jun. 2016 a las 17:02
  • Osea, quieres que te hagan todo el trabajo ya que no sabes programar en android, wow.
    – ESCM
    Commented el 7 sept. 2017 a las 20:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.