Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

You can read this article in: English :: Español

Tutorial paso a paso de Cómo crear tu propia aplicación Android Web-View y tenerla lista para Google Play en menos de una hora

December 10, 2015 Difficulty: 30 / 50 Tweet

This article is old. Be careful! It might contain outdated information.
Here's an alternate resource that I am recommending for this topic.

android-green-figure

Si tienes una página web mobile friendly y no estas sacando provecho del tráfico que viene de Google Play, entonces probablemente estás perdiendo. En este tutorial te mostrare lo fácil que es crear una aplicación Webview usando Android SDK

He sacado el código fuente de mi propia aplicación en GitHub para que puedas copiarlo desde aquí y modificarlo.

Aquí esta como hacerlo, paso a paso:

  1. Descarga e instala el Android SDK desde aquí. Es un paquete gratuito que contiene todo lo que necesitas para empezar a desarrollar tu aplicación Android. Luego abre el IDE Eclipse contenido en el paquete, navegando por New->Android Application Project y sigue los pasos en pantalla para crear tu propia aplicación en blanco.
  2. El archivo manifiesto (archivo XML) necesita ser modificado para permitir trabajar al Webview. Edita tu AndroidManifest.xml usando el que tengo como ejemplo:
    • El paquete, versión de código y nombre de la versión se explican por sí mismo
    • La versión SDK es la versión del API que seleccionaste cuando creaste la aplicación. Yo use la 1.9
    • El uses-permission es necesario porque tu aplicación requerirá acceso al internet para funcionar.
    • La etiqueta de la aplicación contiene datos acerca de la interface en que la que se cargara tu aplicación, nombre de la aplicación, configuración, etc. Asegúrate que tienes todo preparado justo como se muestra en el ejemplo de abajo.
      
        <?xml version="1.0" encoding="utf-8"?>
        <manifest xmlns:android="http://schemas.android.com/apk/res/android"
            package="com.yourpackagename"
            android:versionCode="3"
            android:versionName="1.02" >
    
            <uses-sdk
                android:minSdkVersion="14"
                android:targetSdkVersion="19" />
          <uses-permission android:name="android.permission.INTERNET" />
            <application
                android:allowBackup="true"
                android:icon="@drawable/ic_launcher"
                android:label="@string/app_name"
                android:theme="@android:style/Theme.NoTitleBar" >
                <activity
                    android:name="com.yourpackagename.thenameofyouractivity"
                    android:label="@string/app_name" 
                    android:configChanges="orientation|screenSize" >
                    <intent-filter>
                        <action android:name="android.intent.action.MAIN" />
                        <category android:name="android.intent.category.LAUNCHER" />
                    </intent-filter>
                </activity>
                </application>
        </manifest>
      
    
  3. El manifiesto layout también necesita ser actualizado para que la aplicación sepa que estará tratando con un layout Webview. Además, también vamos a añadir (un layout) una barra de progreso para que el usuario sepa que la aplicación de la página está cargando. Edita tu diseño (layout) correctamente – debería estar en "/res/layout"
      
        <?xml version="1.0" encoding="utf-8"?>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">
    
        <ProgressBar
           android:layout_height="wrap_content"
           android:layout_width="wrap_content"
           android:layout_gravity="center"
           android:id="@+id/progressBar1"
        />
            
        <WebView 
            android:id="@+id/webview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
        />
        </LinearLayout>
      
    
  4. Dentro de /src/com/APPNAME deberías encontrar un archivo con el mismo nombre de tu main. Yo llame el mío index, solo porque soy desarrollador web y me suena familiar. Copia y pega el siguiente código dentro del archivo.

    Pese a que el código se explica a sí mismo, aquí hay unas cuantas cosas acerca de la clase main. Cuando una aplicación Android es abierta por el usuario, el framework llama automáticamente el método “onCreate” de la clase main, así que lo que hacemos es que creamos un override para ese método en el que decidimos cargar nuestro Webview layout. Además, el método "onKeyDown" es el que usaremos para manejar el comportamiento del botón “atrás”, que esta presente en todos los dispositivos Android.

      
        package com.codepunker; // replace this with your package name
    
        import android.os.Bundle;
        import android.annotation.SuppressLint;
        import android.app.Activity;
        import android.content.Intent;
        import android.view.KeyEvent;
        import android.view.View;
        import android.webkit.WebView;
        import android.webkit.WebViewClient;
        import com.codepunker.codePunkerWebViewC;
        import android.net.Uri;
        import android.graphics.Bitmap;
        import android.widget.ProgressBar;
    
        public class Index extends Activity //rename Index with your activity name
        {
          private WebView codePunkerWebView;
          private ProgressBar progressBar;
    
          @Override
          public boolean onKeyDown(int keyCode, KeyEvent event)
          {
              if ((keyCode == KeyEvent.KEYCODE_BACK) && codePunkerWebView.canGoBack()) 
              {
              codePunkerWebView.goBack();
                return true;
              }
              return super.onKeyDown(keyCode, event);
          }
    
          @SuppressLint("SetJavaScriptEnabled") //remove the stupid warning
          @Override
          protected void onCreate(Bundle savedInstanceState) 
          {
          super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_index);
    
            codePunkerWebView = (WebView) findViewById(R.id.webview);
            progressBar = (ProgressBar) findViewById(R.id.progressBar1);
    
            WebViewClient client = new codePunkerWebViewC() 
            {
                @Override
                public void launchExternalBrowser(String url) 
                {
                  Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                  startActivity(intent);
                }
              
                @Override
                public void onPageStarted(WebView codePunkerWebView, String url, Bitmap favicon)
                {
                  super.onPageStarted(codePunkerWebView, url, favicon);
                }
    
                @Override
                public void onPageFinished(WebView codePunkerWebView, String url)
                {
                  super.onPageFinished(codePunkerWebView, url);
                  progressBar.setVisibility(View.GONE);
                }
            };
            
            codePunkerWebView.setWebViewClient(client);
            codePunkerWebView.getSettings().setJavaScriptEnabled(true);
            codePunkerWebView.getSettings().setUserAgentString("Codepunker.com/0.1 (http://codepunker.com/CodePunker/; info@codepunker.com)"); //change the useragent I've set up to whatever you want as your user agent string
            codePunkerWebView.loadUrl("http://www.codepunker.com"); //change this to your own website url
          }
        }
      
    
  5. Dentro de la carpeta /src/com/APPNAME haz un nuevo archivo llamado codePunkerWebViewC.java y pega el siguiente código. Esto es un override de la clase cliente del Webview del Android SDK. El "shouldOverrideUrlLoading" chequea si la petición viene desde el dominio yourwebiste.com y si es así, mantiene al usuario dentro del webview si no, llama al método launchExternalBrowser() del archivo main.
      
        package com.codepunker; //replace this with your package name
        import android.webkit.WebView;
        import android.webkit.WebViewClient;
        import android.net.Uri;
    
        public abstract class codePunkerWebViewC extends WebViewClient 
        {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
            {
                if (Uri.parse(url).getHost().equals("www.codepunker.com")) //replace this with the url for your website
                    return false;
                
                launchExternalBrowser(url);            
                return true;
            }
            
            public abstract void launchExternalBrowser(String url);
        }
      
    
  6. Para compilar la aplicación en un archivo “apk” que pueda ser cargado en tu dispositivo Android para ser probado, haz click derecho en tu proyecto, luego ve a Android Tools->Export Signed Android Package...

Espero hayas disfrutado este tutorial y si logras publicar tu aplicación en Google Play, hazme saber, le echare un vistazo y ¡le daré un gran pulgar arriba!

comments powered by Disqus

Better Docs For A Better Web - Mozilla Developer Network