ImageView En Android

En este tutorial verás el uso del ImageView En Android para mostrar imágenes en la interfaz de tus aplicaciones, a partir de recursos drawables o elementos de la clase Bitmap.

Aprender los fundamentos sobre este widget te permitirá enriquecer a tus layouts con imágenes para logos, fotos de galerías, miniaturas de elementos de listas, animaciones y mucho más.

Puedes descargar el código de del ejemplo que usaremos en este tutorial desde el siguiente enlace:

Añadir Un ImageView En Android Studio

Añade una imagen desde el editor de layouts de Android Studio, yendo a Palette > Widgets > ImageView. Luego arrastra y suelta en el lienzo.

En seguida, se te mostrará una ventana para que elijas el recurso que será asignado al ImageView. Puedes elegir entre drawables de ejemplo para avatars o backgrounds (antecedidos por la dirección @tools:sample), los de tu proyecto o los del sistema.

Elige la opción de backgrounds de ejemplo por el momento y presiona OK para agregar la etiqueta XML al layout. Esto producirá una definición similar a la siguiente:

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

Claramente si estás dentro de un ConstraintLayout, la imagen aparecerá desconectada de restricciones y se verá desparramada sin rumbo sobre el lienzo.

En este ejemplo conectaremos sus límites con los del padre y si tienes un TextView por defecto, como es nuestro caso, entonces limita el borde inferior de la imagen con el superior del texto.

El código final del layout terminaría con las siguientes configuraciones:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

</androidx.constraintlayout.widget.ConstraintLayout>

Asignar Drawable A ImageView

Sin embargo, el atributo tools:srcCompat es solo una herramienta para renderizar la imagen de ejemplo en el diseño, por lo que al correr el aplicativo no verás la imagen.

Asignar realmente un drawable consiste en aplicar una dirección al atributo android:src o app:srcCompat en caso de que el drawable sea un vector:

app:srcCompat="@drawable/sunset"

En nuestro ejemplo usamos una imagen JPG del sitio Freepik de un atardecer como se ve a continuación:

También es posible asignar el valor a este atributo en Kotlin a través de los siguientes métodos:

• setImageBitmap(): Asigna una instancia Bitmap como fuente de imagen
• setImageDrawable(): Asigna como fuente una instancia de la clase Drawable
• setImageResource(): Asigna como fuente un recurso drawable

Si quisiéramos asignar a sunset.jpg en el ImageView de ejemplo, el código en la actividad sería así:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val sunset: ImageView = findViewById(R.id.sunset)
        sunset.setImageResource(R.drawable.sunset)
    }
}

Modificar Escala De La Imagen

Usa el atributo android:scaleType para controlar como redimensionar o mover el contenido de la imagen para que coincida con el rectángulo del ImageView. La siguiente es una tabla con las constantes que puedes asignarle a este atributo:

Constante	Descripción
center	Centra la imagen en el view sin realizar escalado.
centerCrop	Escala el ancho y alto de la imagen, manteniendo la relación de aspecto. De tal forma que ambas dimensiones sean iguales o mayores a las del view. Luego es centrada.
centerInside	Igual que centerCrop, solo que el escalado hace que las dimensiones de la imagen sean iguales o menores a las del view.
fitCenter	Computa un matriz que mantenga el ratio de la imagen, asegurándose que encaje en el view por completo. Al menos uno de los ejes (X o Y) será ajustado y luego se centrará el resultado final.
fitEnd	Igual que fitCenter, solo que se ajusta la imagen hacia el borde inferior derecho del view
fitStart	Igual que fitCenter, solo que se ajusta la imagen hacia el borde superior izquierdo del view
fitXY	Escala el alto y ancho independientemente para que coincidan con el tamaño del view. Claramente no se conservará el ratio.
matrix	Usa una matrix de transformación que proveas a través de setImageMatrix(Matrix)

La siguiente ilustración te muestra cómo se vería la imagen de atardecer en cada caso:

Crear ImageView Programáticamente

Al igual que los otros views, ImageView dispone de varios constructores que usan el contexto para crear instancias.

Tomemos como ejemplo la necesidad de crear en tiempo de ejecución un ImageView para proyectar la imagen de una cascada en la mitad inferior del ConstraintLayout que tenemos.

El código para resolver esta situación sería el siguiente:

private fun createImageViewAndAdd() {
    val layout: ConstraintLayout = findViewById(R.id.constraintlayout) // (1)

    val waterfall = ImageView(this).apply { // (2)
        id = ViewCompat.generateViewId()
        scaleType = ImageView.ScaleType.CENTER_CROP
        setImageResource(R.drawable.waterfall)
    }

    layout.addView(waterfall) // (3)

    val constraintSet = ConstraintSet() // (4)
    constraintSet.clone(layout) // (5)
    with(constraintSet){// (6)
        constrainedHeight(waterfall.id, true)
        constrainedWidth(waterfall.id, true)
        connect(waterfall.id, TOP, R.id.guideline_vertical_center, BOTTOM)
        connect(waterfall.id, LEFT, PARENT_ID, LEFT)
        connect(waterfall.id, RIGHT, PARENT_ID, RIGHT)
        connect(waterfall.id, BOTTOM, PARENT_ID, BOTTOM)
        applyTo(layout)
    }
}

Veamos los pasos que seguimos:

1. Obtenemos la referencia del layout que contendrá al ImageView
2. Creamos una instancia llamada waterfall, pasando a la actividad como contexto. Luego aplicamos las siguientes configuraciones con la función apply():
   1. Generamos un ID con generateViewId() y lo asignamos
   2. Asignamos la transformación CENTER_CROP equivalente al atributo XML centerCrop
   3. Añadimos a waterfall al layout
   4. Creamos un conjunto de restricciones para el ConstraintLayout
   5. Clonamos las restricciones actuales de layout
   6. Aplicamos las restricciones para la imagen de cascada necesarias para que sea mostrada en la parte inferior

Al ejecutar la aplicación el resultado será el atardecer que agregamos por XML en la parte superior y la cascada añadida dinámicamente en la inferior.