Descargar Imagen desde Url en Android

Buenos días, en esta entrada veremos como podemos bajar una imagen para mostrarla en nuestro Android, mediante una simple función.

---

Cuando creamos aplicaciones, podemos encontrarnos en la necesidad de tener que bajar imágenes y tener que mostrarlas luego en un ImageView, y a partir de la versión 3.X de Android, llamada Honeycomb, cualquier operación que requiera el uso de Internet debe ir en otro hilo aparte, no puede ir en el hilo principal de la aplicación, es por eso por lo que tendremos que usar un AsyncTask para usar la red de nuestro dispositivo.

• GUI

  Una vez creado nuestro proyecto en Android, vamos a modificar el xml de la actividad, con lo que nos quedará algo así:

  			<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=".MainActivity" >
  			
  			    <ImageView 
  			        android:id="@+id/imagen"
  			        android:layout_width="wrap_content"
  			        android:layout_height="wrap_content"
  			        android:layout_centerInParent="true"/>
  			
  			</RelativeLayout>
  			

  Con este xml tendremos un elemento ImageView que estará posicionado en el centro de nuestra pantalla.

• Activity

  Aquí viene la parte importante de nuestro ejemplo, ya que toda la funcionalidad principal se desarrolla aquí.

  Vamos a empezar declarando 1 constante, la cual contendrá la url de una imagen, yo he cogido una del buscador de Google, podeis usar cualquiera que esté alojada en la red. A continuación, tenemos la variable de instancia del ImageView, en el cual pondremos la imagen descargada.

  			public class MainActivity extends Activity {
  	
  				public static final String URL = "http://www.thebiblescholar.com/android_awesome.jpg";
  				private ImageView imgImagen;
  			}
  			

  Método onCreate()

  En este método inicializaremos el ImageView, y llamaremos a la AsyncTask, la cual descargará la imagen y la establecerá en el ImageView.

  			@Override
  			protected void onCreate(Bundle savedInstanceState) {
  				super.onCreate(savedInstanceState);
  				setContentView(R.layout.activity_main);
  				
  				imgImagen = (ImageView)findViewById(R.id.imagen);
  				
  				CargaImagenes nuevaTarea = new CargaImagenes();
  				nuevaTarea.execute(URL);
  				
  			}
  			

  En este punto nuestra aplicación aún no será funcional, ya que no tenemos creada la AsyncTask, la cual yo he llamado CargarImagenes, pero cualquier otro nombre valdría.

  AsyncTask CargaImagenes

  Aquí viene una de las partes principales de nuestra aplicación, será la tarea que se encargue de bajar la imagen y establecerla en el ImageView, y todo esto se realiza en segundo plano mientras muestra un ProgressDialog, para que el usuario sepa que nuestra aplicación no ha explotado.

  			private class CargaImagenes extends AsyncTask<String, Void, Bitmap>{
  		
  				ProgressDialog pDialog;
  		
  				@Override
  				protected void onPreExecute() {
  					// TODO Auto-generated method stub
  					super.onPreExecute();
  					
  					pDialog = new ProgressDialog(MainActivity.this);
  					pDialog.setMessage("Cargando Imagen");
  					pDialog.setCancelable(true);
  					pDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
  					pDialog.show();
  					
  				}
  		
  				@Override
  				protected Bitmap doInBackground(String... params) {
  					// TODO Auto-generated method stub
  					Log.i("doInBackground" , "Entra en doInBackground");
  					String url = params[0];
  					Bitmap imagen = descargarImagen(url);
  					return imagen;
  				}
  				
  				@Override
  				protected void onPostExecute(Bitmap result) {
  					// TODO Auto-generated method stub
  					super.onPostExecute(result);
  					
  					imgImagen.setImageBitmap(result);
  					pDialog.dismiss();
  				}
  				
  			}
  			

  Como vemos, la AsyncTask tiene un ProgressDialog, el cual es inicializado y lanzado en el método onPreExecute(), el cual es llamado automáticamente antes de empezar el método doInBackground().

  En el método doInBackground() se realiza la funcionalidad principal de la aplicación. Primero cogemos el parámetro de la lista de parámetros, en este caso es param[0], porque solo hemos pasado uno, y este se encuentra en la posición 0, como si de un Array se tratase.

  Luego definimos un objeto de la clase Bitmap, que será el encargado de guardar la imagen.

  • Método descargarImagen()

    Este método es simple, es el siguiente:

    					private Bitmap descargarImagen (String imageHttpAddress){
    						URL imageUrl = null;
    						Bitmap imagen = null;
    						try{
    							imageUrl = new URL(imageHttpAddress);
    							HttpURLConnection conn = (HttpURLConnection) imageUrl.openConnection();
    							conn.connect();
    							imagen = BitmapFactory.decodeStream(conn.getInputStream());
    						}catch(IOException ex){
    							ex.printStackTrace();
    						}
    						
    						return imagen;
    					}
    					

    En este método recibimos la url de la imagen a descargar, el cual pasaremos mas tarde como argumento para crear una nueva instancia de la clase URL.

  Por último, en el método onPostExecute(), el cual se inicia al terminar el método doInBackground(), y en este es donde podremos interactuar con el hilo principal de la aplicación, por tanto quitaremos el ProgressDialog, con lo cual el usuario verá que la tarea habrá terminado, y a continuación con el método setImageBitmap(), establecemos la imagen en el ImageView.

• AndroidManifest.xml

  Nada funcionará en nuestra aplicación si no añadimos una linea en nuestro AndroidManifest.xml. Es simple, en nuestra aplicación estamos usando Internet para descargar una imagen, y es un permiso que tenemos que declarar. Para ello, nos iremos al directorio raiz de nuestro proyecto y abriremos el archivo AndroidManifest.xml.

  Pinchamos en la última pestaña que vemos en la parte inferior de la ventana, la cual se llama AndroidManifest.xml, y añadimos la linea correspondiente, con lo cual quedará así:

  

  			<?xml version="1.0" encoding="utf-8"?>
  			<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  			    package="sekth.droid.bajarimagen"
  			    android:versionCode="1"
  			    android:versionName="1.0" >
  			
  			    <uses-sdk
  			        android:minSdkVersion="8"
  			        android:targetSdkVersion="16" />
  			
  			    <application
  			        android:allowBackup="true"
  			        android:icon="@drawable/ic_launcher"
  			        android:label="@string/app_name"
  			        android:theme="@style/AppTheme" >
  			        <activity
  			            android:name="sekth.droid.bajarimagen.MainActivity"
  			            android:label="@string/app_name" >
  			            <intent-filter>
  			                <action android:name="android.intent.action.MAIN" />
  			
  			                <category android:name="android.intent.category.LAUNCHER" />
  			            </intent-filter>
  			        </activity>
  			    </application>
  			
  			</manifest>
  			

  La línea que hemos agregado es la siguiente:

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

  Con esta línea nuestra aplicación podrá usar internet para realizar acciones que tengan que ver con ello.

Con esto nuestra aplicación es finalmente funcional, y podemos ver que al abrirla se nos carga la imagen. A continuación dejo una foto y un video de como es en funcionamiento.

Aquí la foto

Aquí un video demostrativo

Sin más esto es todo, cualquier aporte o corrección es bienvenido, espero que os sirva.

Saludos!!