sábado, 23 de enero de 2010

Importando imágenes en android


Aquí va un sencillo programa donde se utiliza el widget ImageView y HttpURLConnection para mostrar imágenes de la web en nuestro dispositivo celular. La aplicación solicita ingresar el nombre del usuario y el URL de una imagen en el internet y luego de pulsar el botón nos muestra 2 imágenes, una cuyo URL se encuentra grabado en el código y otra imagen que es la solicitada por el usuario.

el código es el siguiente:

XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/widget1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<LinearLayout
android:id="@+id/widget2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/nombre_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nombre: "
>
</TextView>
<EditText
android:id="@+id/nombre_txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
>
</EditText>
</LinearLayout>
<LinearLayout
android:id="@+id/widget3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:id="@+id/widget5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/url_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" URL: "
>
</TextView>
<EditText
android:id="@+id/url_txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="http://"
>
</EditText>
</LinearLayout>
<Button
android:id="@+id/mostrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mostrar Imagen"
>
</Button>
</LinearLayout>
<LinearLayout
android:id="@+id/widget4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="@+id/nombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="_"
android:layout_gravity="center_horizontal"
>
</TextView>
</LinearLayout>
<LinearLayout
android:id="@+id/widget5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/imagen"
android:layout_width="120px"
android:layout_height="120px"
android:layout_gravity="center_horizontal"
>
</ImageView>
<ImageView
android:id="@+id/imagen2"
android:layout_width="120px"
android:layout_height="120px"
android:layout_gravity="center_horizontal"
>
</ImageView>
</LinearLayout>

</LinearLayout>



Código en java:

public class Imagenes2 extends Activity {

ImageView imagen; //variables que almacenan las imagenes
ImageView imagen2; //que seran asociadas a la imagenes generadas en el XML

//URL de una imagen en la web
String imageUrl="http://vpn.webcindario.com/fotosgpweb1/VPN7.jpg";

String imageUrl2="";

TextView nombre;
EditText nombre_txt;
EditText url_txt;
Bitmap bmImg; //Aqui se almacena la imagen recibida

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);

//Aqui se asocian las variables en java con los widgets en el xml
Button boton= (Button)findViewById(R.id.mostrar);
nombre=(TextView) findViewById(R.id.nombre);
nombre_txt=(EditText) findViewById(R.id.nombre_txt);
url_txt=(EditText) findViewById(R.id.url_txt);
boton.setOnClickListener(getImgListener);
imagen = (ImageView)findViewById(R.id.imagen);
imagen2 = (ImageView)findViewById(R.id.imagen2);
}

View.OnClickListener getImgListener = new View.OnClickListener()
{

@Override
public void onClick(View view) {
// TODO Auto-generated method stub

//lectura del URL
imageUrl2=url_txt.getText().toString();

nombre.setText("Hola "+nombre_txt.getText()+"\n\nTu URL es: "+imageUrl2);
//LLamado a la función que carga la imagen,
// se pasa el parametro del URL
cargarImagen(imageUrl);
//Muestra la imagen en el dispositivo
imagen.setImageBitmap(bmImg);
cargarImagen(imageUrl2);
imagen2.setImageBitmap(bmImg);

}

};



void cargarImagen(String Url){
URL miUrl =null;
try {
miUrl= new URL(Url);
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {

//Creando la conexión http
HttpURLConnection conn= (HttpURLConnection)miUrl.openConnection();
conn.setDoInput(true);
conn.connect();
//leyendo el stream de datos de la imagen
InputStream is = conn.getInputStream();

//reconstruyendo el stream de datos a una imagen
bmImg = BitmapFactory.decodeStream(is);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

}

No se olviden de darle permisos de internet a la aplicación, agreguen al archivo AndroidManifest.xml la siguiente línea:
<uses-permission android:name="android.permission.INTERNET" />




12 comentarios:

  1. hola mira copio tanto el codigo XML como el de java y al momento de compilar no me da ningun problema pero ya cuando corre la aplicacion las imagenes no se muestran!! cual puede ser el problema??

    Raúl

    ResponderEliminar
  2. hola Raúl, me olvide de comentar que para el uso de aplicaciones se debe dar permiso a la aplicación para que acceda al Internet poniendo


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

    con ello ya no deberías tener problemas

    ResponderEliminar
  3. pero en que parte pongo eso!!

    ResponderEliminar
  4. jeje lo siento, debes colocarlo en el archivo AndroidManifest.xml, lo pegas justo antes de lo que dice application

    ResponderEliminar
  5. Ahora sí!!! ya funcionó!!
    buen post y gracias por el dato!!

    ResponderEliminar
  6. Gracias por el ejemplo Pablito... Hay muy pocas aplicaciones en Android en la web

    ResponderEliminar
  7. Esta ineteresante el tema, y voy a intentar hacerlo, cualquier novedad te comunico.

    ResponderEliminar
  8. LAS APLICACIONES PARA DISPOSITIVOS MOVILES SON EXCELENTES EJEMPLOS DE QUE EL MUNDO VIRTUAL ESTA EN TODAS PARTES. YA NO SE NECESITAN CABLES PARA ESTAR CONECTADOS A INTERNET. Y SE PUEDE INTERACTUAR DESDE CUALQUIER SITIO...
    BUEN EJEMPLO DEL USO DE LA TECNOLOGIA DE PUNTA...

    ResponderEliminar
  9. Pablin la aplicación como siempre muy buena, veo que se ha utilizado un poco del android draw. Y como lo hicimos en clase me gusto mucho aunque un poco lenteja pero me imagino que fue por el internet de la U.

    ResponderEliminar
  10. jajaja gracias David , es verdad es bastante lenta al cargar la aplicación pero depende el tamano de la imagen que quieras mostrar pero mas que eso fue el "ancho de banda" de la universidad

    ResponderEliminar
  11. Pablito una aplicación excelente y lo mejor que funciona bien en Netbeans y Eclipse. Cinco estrellas por ese buen código jeje. Felicitaciones

    ResponderEliminar
  12. Hola Pablo, soy Alfonso, respecto al ejemplo de como mostrar una foto ¿podrías poner las librerías que cargas?, a ver si me falta algo
    Gracias

    ResponderEliminar