How to Remove an Image from ImageView in Android?

ImageView in Android is a UI element used to display all types of pictures, images, and drawable. So if the width and height of the ImageView are set to wrap content, then the ImageView shall occupy the area on the screen equivalent to the image dimensions. So if we wish to collapse an ImageView as a part of any animation or action, we can simply remove the image from the ImageView. The ImageView will collapse to zero width and height as these attributes are dependent on the image dimensions.

So in this article, we will show you how you could remove an image from an ImageView in Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. In this demonstration, we shall be removing an image from an ImageView on a button click. So we shall be adding an ImageView followed by a Button.

XML

<?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
        android:id="@+id/imageview_1"
        android:layout_width="300sp"
        android:layout_height="400sp"
        android:background="@color/black"
        android:src="@drawable/ic_launcher_foreground"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="clear"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/imageview_1"
        android:layout_marginTop="20sp"/>

</RelativeLayout>

Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.removeifromiv

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.Toast
import java.io.IOException

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

        // Declaring and initializing constants for
        // ImageView and Button from the layout (activity_main.xml)
        val mImageView1 = findViewById<ImageView>(R.id.imageview_1)
        val mButton1 = findViewById<Button>(R.id.button_1)


        // When button is clicked, ImageView is
        // attempted to set to null with a Toast message.
        // Else, the exception is handled along with a Toast message.
        mButton1.setOnClickListener {
            try {
                mImageView1.setImageDrawable(null)
                Toast.makeText(applicationContext,"Image removed!", Toast.LENGTH_SHORT).show()
            }
            catch (e:IOException){
                e.printStackTrace()
                Toast.makeText(applicationContext,"Some error occurred!", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Output:

You can see that when we click the button, the image is removed from the ImageView.