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:
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.