Inicio Apuntes FPApuntes DAW Cómo crear un navegador sencillo con el WebView de Android
Apuntes DAWApuntes FPDesarrollo Web en Entorno Cliente

Cómo crear un navegador sencillo con el WebView de Android

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Este artículo que publico hoy, viene a cuento de que me he pasado una noche en vela y el otro día leí un post «parecido»  en algún RSS, me decidí a volver a retomar un poco esto de programar en Android. El artículo que leí hablaba sobre el WebView de Android. Este permite integrar una página web como parte de la aplicación que desarrollemos. WebView viene con todas las características de un navegador de escritorio como la gestión de historial, cookies, soporte HTML5 y mucho más. Usando WebView puedes crear aplicaciones muy interesantes como integrar juegos HTML5 en la aplicación, aun que este no será el caso.

SapoBuskedas WebView

En este artículo de hoy, voy a tratar de explicar el uso básico de WebView mostrando un buscador en buscadores que  proporcione la posibilidad de navegación y soporte soporte para marcadores. Además veremos como utilizar el WebView con otros elementos materiales como CollapsingToolbar y NestedScrollView para lograr la experiencia nativa de Android.

1. El uso básico de WebView

La integración de un WebView en tu aplicación tan solo serán dos pasos. Primero debes incluir el elemento WebView en tu diseño xml.

<WebView
android:id=»@+id/webView»
android:layout_width=»match_parent»
android:layout_height=»wrap_content»/>

En segundo lugar, tienes que cargar la URL específica en la vista web de tu actividad. El siguiente paso sería colocar (por ejemplo) la página principal de google en la vista web.

WebView webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("http://google.com");
SapoBuskedas Google

A pesar de que la carga de una url simple parece muy fácil, la personalización de la WebView necesita un conocimiento profundo sobre WebView y los métodos que este proporciona. Comenzaremos con los métodos básicos que WebView proporciona. Más adelante, crearemos una actividad de navegador simple que actúe como navegador integrado que ofrecerá opciones de retroceso, avance y marcador. Vamos a ir uno por uno, iniciando un proyecto sencillo en Android Studio.

2. Creación de un nuevo proyecto

1. Vamos a crear un nuevo proyecto en Android Studio desde Archivo ⇒ Nuevo proyecto. Rellena los detalles requeridos.

2. Esperamos a que se inicie Android Studio. Como necesitamos hacer peticiones de red, será necesario agregar permiso de INTERNET en

AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.entreunosyceros.webview" >

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

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

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

        <activity android:name=".BrowserActivity"
            android:theme="@style/AppTheme.NoActionBar"></activity>
    </application>

</manifest>

3. Ahora nos dirigiremos al build.gradle y agregamos el soporte de la biblioteca Glide. Esto es necesario para cargar la imagen en CollapsingToolbar. Este paso es opcional, pero sugiero que lo sigas para que todo funcione al final de este artículo.

build.gradle

dependencies {
    ... 
    // glide
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

4. Descarga esta carpeta de recursos y agrega el contenido al proyecto. Esta carpeta contiene imágenes y elementos necesarios para este proyecto.

5. Ahora abrimos los archivos de diseño de tu actividad principal (activity_main.xml y content_main.xml) y el elemento WebView. Al mismo tiempo también estoy agregando CoordinatorLayout, Toolbar y un ProgressBar que se mostrará mientras se carga la página web.

activity_mail.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
         <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-7dp"
        android:indeterminate="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fadeScrollbars="false"
    android:scrollbarFadeDuration="0"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.v4.widget.NestedScrollView>

6. Ahora es el momento de abrir MainActivity.java y modificarlo como se muestra a continuación. Aquí el método initCollapsingToolbar () no tiene nada que ver con WebView, pero es para proporcionar efecto colapsante cuando se despliega la página web. El método Glide se utiliza para mostrar la imagen de encabezado en la barra de herramientas.

MainActivity.java

package info.entreunosyceros.webview;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextUtils;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;
import android.widget.ProgressBar;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
public class MainActivity extends AppCompatActivity {

    private String postUrl = "https://entreunosyceros.net/sapobuskedas/";
    private WebView webView;
    private ProgressBar progressBar;
    private ImageView imgHeader;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        webView = (WebView) findViewById(R.id.webView);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        imgHeader = (ImageView) findViewById(R.id.backdrop);

        // Inicializar barra de herramientas

        initCollapsingToolbar();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(postUrl);
        webView.setHorizontalScrollBarEnabled(false);

    }

    /**
     * Inicializar la barra de herramientas de contracción
     * Mostrará y ocultará la barra de herramientas txtPostTitle en scroll
     */

    private void initCollapsingToolbar() {

        final CollapsingToolbarLayout collapsingToolbar =
        (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle(" ");
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
        appBarLayout.setExpanded(true);

        // Ocultando y mostrando el txtPostTitle
 
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            boolean isShow = false;
            int scrollRange = -1;
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }

                if (scrollRange + verticalOffset == 0) {
                    collapsingToolbar.setTitle("Web View");
                    isShow = true;
                } else if (isShow) {
                    collapsingToolbar.setTitle(" ");
                    isShow = false;
                }
            }
        });
        // Cargando la barra de herramientas
         Glide.with(getApplicationContext()).load("https://i1.wp.com/entreunosyceros.net/wp-content/uploads/2016/12/nougat.jpg")
                .thumbnail(0.5f)
                .crossFade()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(imgHeader);
    }
}

Si ejecuta la aplicación ahora, puede ver que la página web se está cargando en el WebView. Ahora veremos los otros métodos útiles que ofrece la vista web.

2.1 Cargando Html, CSS y estilos de fuentes locales

En algunos casos es posible que tenga que cargar una página web desde el almacenamiento local de la aplicación en lugar de una url. Con el fin de hacer eso podemos mantener todos los html, css y fuentes en la carpeta de activos y cargarlos desde allí.

7. En caso de que esto sea necesario, vamos a crear una nueva carpeta en src / main llamada assets (src / main / assets) y colocaremos ahí el html, css y fuentes. Podríamos crear un archivo html con el código que necesites mostrar, lo podrías llamar local.html (por ejemplo). No voy a colocar el código de esta página, el que lo necesite que lo haga, es sencillo. También estoy agregando dos fuentes de encargo Roboto-Light.ttf y Roboto-Medium.ttf para aplicar la cara de la fuente de encargo en CSS. Estas fuentes las podrás descargar del enlace que he colocado líneas más arriba.

archivos WebView8. Para llamar el código tendríamos que llamar desde el MainActivity.java al archivo local.html que se encontraría dentro de la carpeta assets. Para ello utilizaríamos el siguiente código:

// Loading local html file into web view
webView.loadUrl("file:///android_asset/local.html");

2.2 Activación / desactivación de Javascript

Continuando con la carga de la url podríamos habilitar o deshabilitar la funcionalidad javascript en una página web llamando al método setJavaScriptEnabled ().

// enable / disable javascript
webView.getSettings().setJavaScriptEnabled(true);

2.3 Activación de controles de zoom

WebView proporciona controles de zoom incorporados para ampliar o reducir la página web. Estos controles son muy útiles cuando tengas dificultades para leer las fuentes más pequeñas en la página web. El siguiente código habilita los controles de zoom en la página web.

/**
* Activar los controles zoom-in 
* */
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(true);

2.4 Creación de un navegador sencillo en la aplicación

Llegados a este punto, con los conocimientos básicos que acabamos de adquirir, vamos a ver cómo crear una actividad de navegador simple. Añadiéndole navegaciones hacia atrás, hacia delante y opción de marcador. Este navegador en la aplicación será muy útil para mantener a los usuarios en su aplicación en lugar de navegar por ellos hasta un tercer navegador como Chrome.

9. Creearemos una clase llamada Utils.java y vamos a añadirle el siguiente código.

> IsSameDomain () comprueba si una url es del mismo dominio o no. Este método será útil para iniciar la actividad del navegador en caso de URL externa.

> Método bookmarkUrl () agrega o quita una url de la lista de marcadores usando SharedPreferences. IsBookmarked () comprueba si una url está marcada o no.

> TintMenuIcon () cambia el color del icono de la barra de herramientas. Este método consiste en cambiar el color del icono del marcador cuando una URL está marcada.

Utils.java

package info.entreunosyceros.webview;

import android.content.Context;
import android.content.SharedPreferences;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.view.MenuItem;

/**
 * Created by SapoClay 12/12/16.
 * entreunosyceros.net
 */
public class Utils {

    public static boolean isSameDomain(String url, String url1) {
        return getRootDomainUrl(url.toLowerCase()).equals(getRootDomainUrl(url1.toLowerCase()));
    }

    private static String getRootDomainUrl(String url) {
        String[] domainKeys = url.split("/")[2].split("\\.");
        int length = domainKeys.length;
        int dummy = domainKeys[0].equals("www") ? 1 : 0;
        if (length - dummy == 2)
            return domainKeys[length - 2] + "." + domainKeys[length - 1];
        else {
            if (domainKeys[length - 1].length() == 2) {
                return domainKeys[length - 3] + "." + domainKeys[length - 2] + "." + domainKeys[length - 1];
            } else {
                return domainKeys[length - 2] + "." + domainKeys[length - 1];
            }
        }
    }

    public static void tintMenuIcon(Context context, MenuItem item, int color) {
        Drawable drawable = item.getIcon();
        if (drawable != null) {
            // Si no cambiamos el drawable, todos ellos con este id tendrán un color
            // filtro aplicado a ella.
            drawable.mutate();
            drawable.setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_ATOP);
        }
    }

    public static void bookmarkUrl(Context context, String url) {
        SharedPreferences pref = context.getSharedPreferences("entreunosyceros", 0); // 0 - para modo privado
        SharedPreferences.Editor editor = pref.edit();

        // Si la url ya está marcada, no la marques
        if (pref.getBoolean(url, false)) {
            editor.putBoolean(url, false);
        } else {
            editor.putBoolean(url, true);
        }

        editor.commit();
    }

    public static boolean isBookmarked(Context context, String url) {
        SharedPreferences pref = context.getSharedPreferences("entreunosyceros", 0);
        return pref.getBoolean(url, false);
    }
}

10. En el menú Res ⇒, crea un nuevo menú denominado browser.xml. Este menú coloca los iconos de retroceso, avance y favoritos en la barra de herramientas.
Browser.xml

?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_bookmark"
        android:icon="@drawable/ic_bookmark_white_24dp"
        android:orderInCategory="100"
        android:title="@string/action_bookmark"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_back"
        android:icon="@drawable/ic_keyboard_arrow_left_white_24dp"
        android:orderInCategory="101"
        android:title="@string/action_back"
        app:showAsAction="always" />


    <item
        android:id="@+id/action_forward"
        android:icon="@drawable/ic_keyboard_arrow_right_white_24dp"
        android:orderInCategory="102"
        android:title="@string/action_forward"
        app:showAsAction="always" />
</menu>

11. Crea una nueva actividad llamada BrowserActivity.java y añade el siguiente código. Esta actividad gestiona el navegador hacia adelante y hacia atrás en la barra de herramientas junto con la opción de marcador.
BrowserActivity.java

package info.entreunosyceros.webview;

import android.content.Context;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextUtils;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class BrowserActivity extends AppCompatActivity {

    // private String TAG = BrowserActivity.class.getSimpleName();
    private String url;
    private WebView webView;
    private ProgressBar progressBar;
    private float m_downX;
    CoordinatorLayout coordinatorLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_browser);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle("");

        url = getIntent().getStringExtra("url");

        // Si no se pasa url, cierre la actividad
        if (TextUtils.isEmpty(url)) {
            finish();
        }

        webView = (WebView) findViewById(R.id.webView);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);

        initWebView();

        webView.loadUrl(url);
    }

    private void initWebView() {
        webView.setWebChromeClient(new MyWebChromeClient(this));
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
                invalidateOptionsMenu();
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                webView.loadUrl(url);
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.GONE);
                invalidateOptionsMenu();
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                progressBar.setVisibility(View.GONE);
                invalidateOptionsMenu();
            }
        });
        webView.clearCache(true);
        webView.clearHistory();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setHorizontalScrollBarEnabled(false);
        webView.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {

                if (event.getPointerCount() > 1) {
                    //Multi touch detected
                    return true;
                }

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN: {
                        // guardar la x
                        m_downX = event.getX();
                    }
                    break;

                    case MotionEvent.ACTION_MOVE:
                    case MotionEvent.ACTION_CANCEL:
                    case MotionEvent.ACTION_UP: {
                        // Establecer x para que no se mueva
                        event.setLocation(m_downX, event.getY());
                    }
                    break;
                }

                return false;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //Esto agrega elementos a la barra de acción si está presente.
        getMenuInflater().inflate(R.menu.browser, menu);

        if (Utils.isBookmarked(this, webView.getUrl())) {
            // cambiar el color del icono
            Utils.tintMenuIcon(getApplicationContext(), menu.getItem(0), R.color.colorAccent);
        } else {
            Utils.tintMenuIcon(getApplicationContext(), menu.getItem(0), android.R.color.white);
        }
        return true;
    }


    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {

        // menu item 0-Index es icono de marcador

        // enable - Deshabilitar los iconos de navegación de la barra de herramientas
        if (!webView.canGoBack()) {
            menu.getItem(1).setEnabled(false);
            menu.getItem(1).getIcon().setAlpha(130);
        } else {
            menu.getItem(1).setEnabled(true);
            menu.getItem(1).getIcon().setAlpha(255);
        }

        if (!webView.canGoForward()) {
            menu.getItem(2).setEnabled(false);
            menu.getItem(2).getIcon().setAlpha(130);
        } else {
            menu.getItem(2).setEnabled(true);
            menu.getItem(2).getIcon().setAlpha(255);
        }

        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (item.getItemId() == android.R.id.home) {
            finish();
        }

        if (item.getItemId() == R.id.action_bookmark) {
            // Marcar / desmarcar la url
            Utils.bookmarkUrl(this, webView.getUrl());

            String msg = Utils.isBookmarked(this, webView.getUrl()) ?
                    webView.getTitle() + "añadido a marcadores!" :
                    webView.getTitle() + " eliminado!";
            Snackbar snackbar = Snackbar
                    .make(coordinatorLayout, msg, Snackbar.LENGTH_LONG);
            snackbar.show();

            // refresh the toolbar icons, so that bookmark icon color changes
            // depending on bookmark status
            invalidateOptionsMenu();
        }

        if (item.getItemId() == R.id.action_back) {
            back();
        }

        if (item.getItemId() == R.id.action_forward) {
            forward();
        }

        return super.onOptionsItemSelected(item);
    }

    // Hacia atrás la navegación del navegador
    private void back() {
        if (webView.canGoBack()) {
            webView.goBack();
        }
    }

    // La navegación del navegador
    private void forward() {
        if (webView.canGoForward()) {
            webView.goForward();
        }
    }

    private class MyWebChromeClient extends WebChromeClient {
        Context context;

        public MyWebChromeClient(Context context) {
            super();
            this.context = context;
        }
    }
}

12. Ahora abrimos el MainActivity.java para modificar el código como se indica a continuación. Aquí utilizamos un MyWebChromeClient personalizado () para interceptar los métodos de WebView. En shouldOverrideUrlLoading () detectamos si el enlace pulsado es interno o externo. Si es externo, lanzamos el BrowserActivity.

MainActivity.java

package info.androidhive.webview;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextUtils;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;
import android.widget.ProgressBar;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;

public class MainActivity extends AppCompatActivity {

    private String postUrl = "https://entreunosyceros.net/sapobuskedas/";
    private WebView webView;
    private ProgressBar progressBar;
    private float m_downX;
    private ImageView imgHeader;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        webView = (WebView) findViewById(R.id.webView);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        imgHeader = (ImageView) findViewById(R.id.backdrop);

        if (!TextUtils.isEmpty(getIntent().getStringExtra("postUrl"))) {
            postUrl = getIntent().getStringExtra("postUrl");
        }

        initWebView();
        initCollapsingToolbar();
        renderPost();


        // enable / disable javascript
        // webView.getSettings().setJavaScriptEnabled(true);

        // URL de carga en la vista web
        // webView.loadUrl("http://www.google.com");

        /**
         * Activación de los controles de acercamiento
         * */
        /*
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(true);
        */


    }

    private void initWebView() {
        webView.setWebChromeClient(new MyWebChromeClient(this));
        webView.setWebViewClient(new WebViewClient() {

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

                if (Utils.isSameDomain(postUrl, url)) {
                    Intent intent = new Intent(MainActivity.this, MainActivity.class);
                    intent.putExtra("postUrl", url);
                    startActivity(intent);
                } else {
                    // Iniciar navegador en la aplicación, es decir, BrowserActivity
                    openInAppBrowser(url);
                }

                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.GONE);
            }
        });
        webView.clearCache(true);
        webView.clearHistory();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setHorizontalScrollBarEnabled(false);
        webView.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {

                if (event.getPointerCount() > 1) {
                    //Multi touch detectado
                    return true;
                }

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN: {
                        // guardar la x
                        m_downX = event.getX();
                    }
                    break;

                    case MotionEvent.ACTION_MOVE:
                    case MotionEvent.ACTION_CANCEL:
                    case MotionEvent.ACTION_UP: {
                        //Establecer x para que no se mueva
                        event.setLocation(m_downX, event.getY());
                    }
                    break;

                }

                return false;
            }
        });
    }

    private void renderPost() {
        webView.loadUrl(postUrl);
    }

    private void openInAppBrowser(String url) {
        Intent intent = new Intent(MainActivity.this, BrowserActivity.class);
        intent.putExtra("url", url);
        startActivity(intent);
    }

    /**
     * Inicializar la barra de herramientas de contracción
     * Mostrará y ocultará la barra de herramientas txtPostTitle en scroll
     */
    private void initCollapsingToolbar() {
        final CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle(" ");
        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
        appBarLayout.setExpanded(true);

        // ocultar y mostrar el txtPostTitle cuando la barra de herramientas se expandió y se derrumbó
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            boolean isShow = false;
            int scrollRange = -1;

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }
                if (scrollRange + verticalOffset == 0) {
                    collapsingToolbar.setTitle("Buskeda Web");
                    isShow = true;
                } else if (isShow) {
                    collapsingToolbar.setTitle(" ");
                    isShow = false;
                }
            }
        });

        // cargando la barra de herramientas header image
        Glide.with(getApplicationContext()).load("https://i1.wp.com/entreunosyceros.net/wp-content/uploads/2016/12/nougat.jpg")
                .thumbnail(0.5f)
                .crossFade()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(imgHeader);
    }

    private class MyWebChromeClient extends WebChromeClient {
        Context context;

        public MyWebChromeClient(Context context) {
            super();
            this.context = context;
        }


    }
}

Una vez terminado todo esto, podemos ejecutar la aplicación. Si hace clic en el botón del buscador se abrirá el enlace externo de la página web. Puedes ver el navegador de aplicaciones iniciado con la navegación.

webview funcionando

Aquí el bloque de código que lanza el navegador en la aplicación. Pasa la URL deseada que desea cargar.

Intent intent = new Intent(MainActivity.this, BrowserActivity.class);
intent.putExtra("url", url);
startActivity(intent);

Con esto podemos disponer de nuestro propio navegador dentro de nuestra APP. Para ver el ejemplo aquí desarrollado, puedes descargarte la APP de SapoBuskedas, con la que podrás realizar búsquedas en multitud de servidores (de diferentes temáticas). Para descargarla, sigue este enlace.

 

También te puede interesar ...

Cómo crear un tema hijo en Wordpress

Iconos de redes sociales fluorescentes, crea los tuyos...

Posicionamiento de capas con CSS3

Deja un comentario

Guardar mi nombre, email y sitio web en el navegador para la próxima vez que comente en esta web.

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.