Visualizar una imagen de internet en Android

Si necesitamos tener una aplicación cuyos contenidos sean dinámicos y no estar liberando actualizaciones masivas todos los días y molestar al usuario podemos descargar dicho contenido de internet. Hoy veremos una forma media sencilla de como visualizar una imagen que se encuentra en internet solo introduciendo su URL. En este ejemplo, la URL la proporcionamos nosotros desde un editText pero tranquilamente podría ser una variable o un dato almacenado en una bd. Hay que recordar que dicha URL debe tener el protocolo http:// delante sino el ejemplo no funciona.

1) Primero debemos preparar el layout donde trabajaremos.

Agregamos un edittext, un button y un imageView


<EditText android:layout_height="wrap_content"
android:id="@+id/editText1" android:layout_width="match_parent">
</EditText>
<Button android:id="@+id/button1" android:text="Magia"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</Button>
<ImageView android:layout_height="wrap_content" android:src="@drawable/icon"
android:id="@+id/imageView1" android:layout_width="wrap_content">
</ImageView>

 

 

2) Creamos una clase Java cuyo setContentView será este layout y “levantamos” dichos componentes y los almacenamos en nuestras variables globales.

 

private Button btn;
private ImageView m_imageView;

private EditText inputUrl;

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        inputUrl = (EditText)findViewById(R.id.editText1);
        m_imageView = (ImageView)findViewById(R.id.imageView1);
        btn=(Button)findViewById(R.id.button1);
        ...
3) Establecer el comportamiento del botón, que descargara la imagen.
No se asusten en este paso porque tirara un error que todavía falta codigo
por explicar.


btn.setOnClickListener(new OnClickListener()
{
     @Override
     public void onClick(View arg0)
     {
            String url=inputUrl.getText().toString();
            if (url.length()>0)
            {
               new DownloadImageTask().execute(url);
            }
      }
});

4) Crear un clase inside de la clase que estamos trabajando.


 class DownloadImageTask extends AsyncTask<String, Void, Drawable>
     {

          final ProgressDialog progressDialog = new ProgressDialog(main.this);

            protected void onPreExecute()
            {
                progressDialog.setTitle("");
                progressDialog.setMessage("Cargando imagen...");
                progressDialog.show();
            }

            protected Drawable doInBackground(String... urls)
            {
                Log.d("DEBUG", "drawable");

                return downloadImage(urls[0]);

            }

            protected void onPostExecute(Drawable imagen)
            {

                m_imageView.setImageDrawable(imagen);
                progressDialog.dismiss();
            }

            /**
 * Devuelve una imagen desde una URL
 * @param url Url de la imagen
 * @return Una imagen
 */
            private Drawable downloadImage(String imageUrl)
            {
                try
                {
                    URL url = new URL(imageUrl);
                    InputStream is = (InputStream)url.getContent();
                    return Drawable.createFromStream(is, "src");
                }
                catch (MalformedURLException e)
                {
                    e.printStackTrace();
                    return null;
                }
                catch (IOException e)
                {
                    e.printStackTrace();
                    return null;
                }
            }
     }

Expliquemos un poco el codigo. Lo primero que hacemos es crear una tarea asíncrona. ¿Que es una tarea asíncrona? Es un hilo de ejecución adicional a nuestra aplicación para realizar una tarea que puede (o no) demorarse demasiado. Con este hilo, la aplicación funciona correctamente mientras este hilo hace su trabajo. Esta AsyncTask tiene cuatro métodos principales.

  1. onPreExecute: antes de ejecutarse. Seteamos el titulo, el mensaje y empezamos a mostrar el progress dialog.
  2. doInBackground: la tarea propiamente dicha la haremos acá. En nuestro caso descargar la imagen según la url que le hayamos pasado cuando hacemos click.
  3. onPostExecute: cuando el hilo finalizo cerramos el progress dialog y seteamos la imagen devuelta a nuestro imageView.
  4. downloadImage: [este método lo creamos nosotros. Los restantes tres son obligatorios por la implementación de la clase] acá descargamos la imagen haciendo una petición http

También deben agregar un permiso de uso de internet dentro del manifiesto (luego del tag application)

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

Aqui un video de como debería funcionar el ejemplo:


Cualquier duda o comentario del ejemplo no duden en dejar un comentario en esta entrada.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *