ImageView en Android con ejemplo – Part 1

La clase ImageView se usa para mostrar cualquier tipo de recurso de imagen en la aplicación de Android, ya sea android.graphics.Bitmap o android.graphics.drawable.Drawable (es una abstracción general para cualquier cosa que se pueda dibujar en Android). La clase ImageView o android.widget.ImageView hereda la clase android.view.View, que es la subclase de la clase Kotlin.Any. La aplicación de ImageView también consiste en aplicar tintes a una imagen para reutilizar un recurso dibujable y crear superposiciones en las imágenes de fondo. Además, ImageView también se utiliza para controlar el tamaño y el movimiento de una imagen. 

Agregar un ImageView a una actividad

Cada vez que se agrega ImageView a una actividad, significa que existe un requisito para un recurso de imagen. Por lo tanto, se olvida proporcionar un archivo de imagen a esa clase ImageView. Se puede hacer agregando un archivo de imagen que está presente en el propio Android Studio o podemos agregar nuestro propio archivo de imagen. Android Studio posee una amplia gama de recursos dibujables que son muy comunes en el diseño de aplicaciones de Android. Los siguientes son los pasos para agregar un recurso dibujable a la clase ImageView.

Nota: Los pasos se realizan en Android Studio versión 4.0

Abra el archivo activity_main.xml en el que se agregará la imagen 

Cambie de la vista de código a la vista de diseño del archivo activity_main.xml. 

Para agregar una imagen de Android Studio Arrastre el widget ImageView al área de actividad de la aplicación, se abrirá un cuadro de diálogo emergente, elija entre la amplia gama de recursos dibujables y haga clic en «Aceptar». 

Para agregar un archivo de imagen que no sean recursos dibujables de Android Studio: 
haga clic en la pestaña «Administrador de recursos» en el panel más a la izquierda y seleccione la opción «Importar dibujables». 

Seleccione la ruta del archivo de imagen en su computadora y haga clic en «Aceptar». Después de eso, configure el «Tipo de calificador» y el «valor» del archivo de imagen según sus necesidades y haga clic en «Siguiente» y luego en «Importar». 
 

Arrastre la clase ImageView en el área de actividad, aparecerá un cuadro de diálogo emergente que contiene su archivo de imagen importado. Elija su archivo de imagen y haga clic en «Aceptar», su imagen se agregará a la actividad. 

Nota: Después de agregar una imagen, establezca su diseño de restricciones tanto vertical como horizontalmente; de ​​lo contrario, mostrará un error.

Atributos XML de ImageView 

Ejemplo

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?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">
  
    <ImageView
        android:id="@+id/GfG_full_logo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.078"
        app:srcCompat="@drawable/full_logo" />
  
    <ImageView
        android:id="@+id/GfG_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/GfG_full_logo"
        app:srcCompat="@drawable/logo" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Nota : Todos los atributos de ImageView que comienzan con app:layout_constraint son las restricciones verticales y horizontales para fijar la posición de la imagen en la actividad. Esto es muy necesario para agregar la restricción a ImageView; de lo contrario, todas las imágenes tomarán la posición (0, 0) del diseño de la actividad.  

Paso 4: trabajar con el archivo MainActivity

Vaya al archivo MainActivity y consulte el siguiente código. A continuación se muestra el código para el archivo MainActivity . Se agregan comentarios dentro del código para comprender el código con más detalle. Dado que en la actividad, solo se agregaron 2 imágenes y no se hace nada más como tocar un botón, etc. Entonces, el archivo MainActivity simplemente se verá como el siguiente código. 

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

Producción: