Superponer varias imágenes en un solo ImageView en Android

En Android, una imagen se puede mostrar dentro de un ImageViewen el diseño. ImageView acepta solo una imagen a la vez como entrada. Sin embargo, puede ser necesario mostrar dos o más imágenes en el mismo ImageView. Digamos que nuestra aplicación muestra el estado del modo avión. Cuando el modo avión está habilitado, debe mostrar la imagen de un avión y cuando está deshabilitado, debe superponer la misma imagen con algo como una cruz o un símbolo de bloque. Como ImageView solo acepta una única fuente de entrada, es imposible configurar dos imágenes como fuente. Entonces, en tal caso, tendremos que crear un recurso que consista en una lista de imágenes y configurar este recurso como el atributo de origen de ImageView. Entonces, a través de este artículo, le mostraremos cómo puede crear un recurso que contenga varias imágenes y configurarlo en ImageView.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: importa imágenes de tu elección en la carpeta dibujable

Importamos dos recursos vectoriales de la imagen prediseñada local. Guárdelos en la carpeta dibujable.

dibujable/ic_airplane

dibujable/ic_block

Consulte este artículo: ¿Cómo agregar una imagen a una carpeta dibujable en Android Studio?

Paso 3: cree un archivo de recursos dibujable con el elemento raíz como lista de capas (layer.xml)

Cree un archivo de recursos dibujable dentro de la carpeta dibujable con el elemento raíz como una lista de capas. Dale un nombre como una capa. El archivo generado tiene una extensión XML.

Paso 4: agregue elementos (imágenes importadas) a la capa.xml

Agregue elementos de tal manera que el siguiente elemento se superponga al anterior.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!-- Any number of images of our choice -->
    <item android:drawable="@drawable/ic_airplane"/>
    <item android:drawable="@drawable/ic_block"/>
  
</layer-list>

Paso 5: 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 . Agregue ImageView y un botón en el archivo de diseño. ImageView mostrará la lista de capas al hacer clic en el botón.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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 to display multiple images -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:layout_centerInParent="true"
        android:background="#0f9d58"/>
  
    <!-- A button to load the images in the ImageView -->
    <Button
        android:id="@+id/button"
        android:layout_below="@id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Overlay"
        android:layout_centerHorizontal="true"/>
  
</RelativeLayout>

Paso 6: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declaring and Initializing
        // ImageView and Button from the layout
        val mImageView = findViewById<ImageView>(R.id.imageView)
        val mButton = findViewById<Button>(R.id.button)
  
        // When button is clicked
        mButton.setOnClickListener {
  
            // Set the drawable resource file
            // (layer-list of images) in the ImageView
            mImageView.setImageResource(R.drawable.layer)
        }
    }
}

Producción:

Podemos ver que cuando hacemos clic en el botón de superposición, ImageView se configura con las dos imágenes, una superpuesta a la otra.