In this article, PopView is added to android. When users tap on the view a pop animation with a circular dust effect will appear. A new view can also appear after the popping of the older view. PopView can be used to hide the view or change the view. It makes the user interface more attractive. Suppose a Launcher app is to be made then in that app close recently used applications where it can use. This view will help us to achieve a better user experience.
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. The code for that has been given in both Java and Kotlin Programming Language for Android.
Step 2: Adding Dependency to the build.gradle File
 Go to Module build.gradle file and add this dependency and click on Sync Now button.
implementation 'rb.popview:popview:0.1.0'
Step 3: Working with the XML Files
Add the following code in image_view.xml file. In this file, add ImageView to the layout. This file is used to inflate the view.Â
XML
<?xml version="1.0" encoding="utf-8"?>Â Â Â Â android:layout_width="match_parent"Â Â Â Â android:layout_height="match_parent"Â Â Â Â android:orientation="horizontal">Â
    <ImageView        android:id="@+id/imageView2"        android:layout_width="0dp"        android:layout_height="150dp"        android:layout_weight="1"        android:src="@drawable/gfg_first" /></LinearLayout> |
Next, go to the activity_main.xml file, which represents the UI of the project.
Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<?xml version="1.0" encoding="utf-8"?>Â Â Â Â android:layout_width="match_parent"Â Â Â Â android:layout_height="match_parent"Â Â Â Â android:gravity="center"Â Â Â Â android:orientation="horizontal">Â
    <ImageView        android:id="@+id/imageView"        android:layout_width="0dp"        android:layout_height="150dp"        android:layout_weight="1"        app:srcCompat="@drawable/gfg_first" />Â
    <ImageView        android:id="@+id/changeImage"        android:layout_width="0dp"        android:layout_height="150dp"        android:layout_weight="1"        app:srcCompat="@drawable/gfg_second" /></LinearLayout> |
Step 4: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. In this file, add OnClickListener to the ImageViews so whenever the user tap on it setOnClickListener, will get invoked automatically. Here one image is removed and the other is replaced so that image_view.XML is inflated that replaces the previous image.Â
Java
import android.content.Context;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import androidx.appcompat.app.AppCompatActivity;import rb.popview.PopField;Â
public class MainActivity extends AppCompatActivity {Â
    ImageView popImage, changeImage;Â
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);Â
        // Attach popField to the layout        final PopField popField = PopField.attach2Window(this);Â
        popImage = findViewById(R.id.imageView);        changeImage = findViewById(R.id.changeImage);Â
        popImage.setOnClickListener(v -> {            // It will pop the view.            popField.popView(v);        });Â
        changeImage.setOnClickListener(v -> {            // It is used to inflate the image_view so that when the gfg_two image            // will pop gfg_first image will take place of it.            LayoutInflater layoutInflater = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);            final View addView = layoutInflater.inflate(R.layout.image_view, null);            ImageView newImageView = addView.findViewById(R.id.imageView2);            newImageView.setImageDrawable(getResources().getDrawable(R.drawable.gfg_first));            popField.popView(v, addView);        });    }} |
Kotlin
import android.os.Bundleimport android.view.LayoutInflaterimport android.view.Viewimport android.widget.ImageViewimport androidx.appcompat.app.AppCompatActivityimport rb.popview.PopFieldÂ
class MainActivity : AppCompatActivity() {         private lateinit var popImage: ImageView    private lateinit var changeImage: ImageView         override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)Â
        // Attach popField to the layout        val popField: PopField = PopField.attach2Window(this)        popImage = findViewById(R.id.imageView)        changeImage = findViewById(R.id.changeImage)        popImage.setOnClickListener { v: View? ->            // It will pop the view.            popField.popView(v)        }        changeImage.setOnClickListener { v: View? ->            // It is used to inflate the image_view so that when the gfg_two image            // will pop gfg_first image will take place of it.            val layoutInflater = applicationContext.getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater            val addView: View = layoutInflater.inflate(R.layout.image_view, null)            val newImageView = addView.findViewById<ImageView>(R.id.imageView2)            newImageView.setImageDrawable(resources.getDrawable(R.drawable.gfg_first))            popField.popView(v, addView)        }    }} |
