Como crear un ImageView en Android

Android ImageView Example

Hola amigos. Seguimos avanzando poco a poco en este curso, aprendiendo mas cada día en este siguiente nivel les enseñare a utilizar el control Widget ImageView que se utiliza para mostrar imágenes.

Crear Nuevo Proyecto Android Studio

Primer paso que haremos sera crear nuestro proyecto y para resumirlo pueden revisar el siguiente enlace (Crear Proyecto).

Teniendo esto podremos proceder a comenzar con el control, y lo que haremos ahora se buscarlo entre la barra de herramientas en la sección de Widgets. Si quieres aprender un poco mas de este control puedes revisar el siguiente enlace (Widgets).

Ahora arrastraremos el control al activity para poder comenzar con el diseño, utilizaremos 3 controles para visualizar 3 imágenes.

Descargar imgenes ( 1, 2, 3, 4, 5, 6)


Una vez teniendo las imágenes vamos a crear una carpeta en nuestro proyecto y le pondremos Imágenes o para los que desean simplemente pueden copiar y pegar las imágenes en la carpeta Drawable.

Nos mostrara una ventana para poner el nombre de nuestro directorio/carpeta.

Escribimos el nombre y presionamos Ok

Una vez teniendo hecha nuestra carpeta podremos pegar nuestras imágenes. Ahora comenzaremos con la programación para mostrar un mensaje al dar click en una de las imágenes. Primeramente daremos click en los ImageView y luego agregaremos la ruta de nuestras imágenes en la propiedades de los controles.

Una vez agregando la ruta ya mostrara las imágenes en nuestros controles de la siguiente forma.

ImageView 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">

 <TextView android:text="Hello World!"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:id="@+id/textView" />

 <ImageView
 android:layout_width="match_parent"
 android:layout_height="150dp"
 android:id="@+id/imageView"
 android:layout_below="@+id/textView"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="41dp"
 android:src="@drawable/android" />

 <ImageView
 android:layout_width="match_parent"
 android:layout_height="150dp"
 android:id="@+id/imageView2"
 android:layout_below="@+id/imageView"
 android:src="@drawable/android2" />

 <ImageView
 android:layout_width="match_parent"
 android:layout_height="150dp"
 android:id="@+id/imageView3"
 android:layout_below="@+id/imageView2"
 android:src="@drawable/android3" />
</RelativeLayout>

De esta forma ahora podremos comenzar con la programación, ubicaremos la carpeta donde se encuentras las clases java para abrir la clase MainActivity y escribiremos el codigo.

public class MainActivity extends AppCompatActivity {

//--Declaramos las variables de tipo control 
ImageView imageView,imageView2,imageView3; 
@Override protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main);
//--Asignamos las propiedades de los controles a las 
imageView = (ImageView) findViewById(R.id.imageView); 
imageView2 = (ImageView) findViewById(R.id.imageView2); 
imageView3 = (ImageView) findViewById(R.id.imageView3);
//--Evento que espera que a la imagen se le de click
imageView.setOnClickListener(new View.OnClickListener() { 
@Override public void onClick(View arg0) { 
//--Mostrara un mensaje tostada al dar click a la imagen
Toast.makeText(getApplicationContext(), "Estrellas 1", Toast.LENGTH_SHORT).show(); } });
//--Evento que espera que a la imagen se le de click 
imageView2.setOnClickListener(new View.OnClickListener() { 
@Override public void onClick(View arg0) { 
//--Mostrara un mensaje tostada al dar click a la imagen 
Toast.makeText(getApplicationContext(), "Estrellas 2", Toast.LENGTH_SHORT).show(); } });
//--Evento que espera que a la imagen se le de click 
imageView3.setOnClickListener(new View.OnClickListener() { 
@Override public void onClick(View arg0) { 
//--Mostrara un mensaje tostada al dar click a la imagen 
Toast.makeText(getApplicationContext(), "Estrellas 3", Toast.LENGTH_SHORT).show(); 
} }); 
} 
} 

Crear Emulador AVD

Ahora teniendo la programación nuestro paso siguiente sera ejecutar el emulador y ver el resultado de nuestro proyecto. Si no saben como crear un emulador AVD pueden dar click al siguiente enlace para observar los pasos. (Crear Emulador AVD).

Este es el resultado que obtenemos nos mostrara el mensaje tostada de la imagen a la que le demos click.

Bueno gracias por seguir con este curso de desarrollo comparte este blog con tus amigos para promover el conocimiento eso me ayudara a crecer y seguir subiendo contenido. Cualquier duda o comentario puedes escribirme. Gracias por tu tiempo!

Android Studio - Curso Español