PopView in Android

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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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.Bundle
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import 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)
        }
    }
}

Output: