Como crear un WebView en Android

Android WebView Example

Hola amigos vamos a desarrollar un ejemplo utilizando el Widget WebView.

Crear Proyecto Android

Continuamos aprendiendo día a día, adelantando los pasos de crear un proyecto (Aqui). Ahora aprenderemos a usar el Widgets WebView creando un ejemplo básico para entender su funcionamiento, teniendo creado nuestro proyecto comenzaremos colocando múltiples botones en nuestra actividad de la siguiente manera.

Ahora en nuestro ejemplo mostraremos las paginas que son mas conocidas entre los usuarios, Google, Facebook y Youtube correspondiente en cada botón. Presionando doble click en cada botón podremos cambiar el nombre de cada uno de la siguiente manera.

Al finalizar lo siguiente que haremos sera agregar una nueva actividad para ello nos dirigimos a la sección de Projecto.

Presionamos click derecho sobre 'Layout' y nos desplegara las siguientes viñetas New -> Activity -> Empty Activity presionamos click.

Nos aparecerá la siguiente ventana que nos pedirá en nombre de nuestra actividad y escribiremos el nombre que sea de nuestro agrado Ejm. WebViewExample, EjmWebView para dar ejemplos.

Ahora colocaremos nuestro control WebView en el diseño de nuestra nueva actividad y colocaremos un botón y le cambiaremos el nombre a "Atras".

WebView Layout Design

<?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" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Google"
 android:id="@+id/button"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="73dp" />

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Youtube"
 android:id="@+id/button2"
 android:layout_centerVertical="true"
 android:layout_centerHorizontal="true" />

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Facebook"
 android:id="@+id/button3"
 android:layout_below="@+id/button2"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="81dp" />
</RelativeLayout>

Y el diseño de nuestras demás actividades sera el siguiente.

<?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" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin"
 tools:context="com.example.blackjack.example_webview.google">

 <WebView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/webView"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="93dp" />

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Atras"
 android:id="@+id/button4"
 android:layout_alignParentTop="true"
 android:layout_alignParentEnd="true" />
</RelativeLayout>

WebView es una vista que muestra las páginas web dentro de su aplicación. También puede especificar cadena HTML y puede mostrar dentro de su aplicación utilizando WebView. WebView hace que convierta su aplicación a una aplicación web.

Para extender nuestro Webview cambiaremos las propiedades.

android:layout_width="match_parent"
android:layout_height="match_parent"

Ahora haremos lo mismo para cada botón respectivamente creando el resto de actividades.

Regresaremos a nuestra actividad principal y comenzaremos a programar los botones que nos van a redireccionar a cada actividad correspondiente y mostrarnos la pagina en cada WebView.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
//Creamso las variables de boton
private Button button1;
private Button button2;
private Button button3;

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

button1 = (Button) findViewById(R.id.button);
button2 = (Button) findViewById(R.id.button2);
button3 = (Button) findViewById(R.id.button3);

button1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
//---Clase de la actividad ejem_Google
Intent i =new Intent(MainActivity.this, ejm_Google.class);
//--Ejecuta la redirección a la actividad
startActivity(i);
}
});
button2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
//---Clase de la actividad ejemFacebook
Intent i =new Intent(MainActivity.this, ejmFacebook.class);
//--Ejecuta la redirección a la actividad
startActivity(i);
}
});
button3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
//---Clase de la actividad ejmYoutube
Intent i =new Intent(MainActivity.this, ejmYoutube.class);
//--Ejecuta la redirección a la actividad
startActivity(i);
}
});
}
}

Quedaría de esa forma teniendo la programación de cada botón en nuestra actividad principal.

Ahora escribiremos el código para nuestras actividades restantes.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;

public class ejm_Google extends AppCompatActivity {
//Creamso las variables de boton
private Button button1;
private WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ejm__google);
//Webview que nos mostrara la pagina de google
webView = (WebView) findViewById(R.id.webView2);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://www.google.com");

//Boton para regresar a la actividad principal
button1 = (Button) findViewById(R.id.button6);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
//---Clase de la actividad ejem_Google
Intent i = new Intent(ejm_Google.this, MainActivity.class);
//--Ejecuta la redirección a la actividad
startActivity(i);
}
});
}
}

Tenemos listo nuestra programación en la actividad seria lo mismo para el resto de actividades cambiando respectivamente cada uno con su actividad y botón. Ahora teniendo listo ya nuestro proyecto a un paso de ejecutarlo nos dirigiremos a AndroidManifest.xml y agregaremos el permiso para acceso a Internet en nuestra aplicación.

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

Crear Emulador AVD

Seria el final de nuestro ejemplo ahora para ver el resultado vamos a ejecutar nuestra aplicación si aun no sabes como crear un emulador (Aquí).

Y este seria el resultado respectivamente para cada botón. Bueno espero el contenido haya sido de su agrado cualquier duda pueden dejarme un comentario y con gusto les responderé. Comparte el blog con tus amigos para promover el conocimiento. Muchas gracias por tu tiempo.

Android Studio - Curso Español