PopView in Android

Difficulty Level : Medium
Last Updated : 18 Feb, 2021

In this article, PopView is added in 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 view. It makes the user interface more attractive. If a Launcher app is to be made then in that app to close recently used applications there it can use. This view will help us to achieve better user experience.

Approach:

Step 1: Add the support Library in build.gradle file and add dependency in the dependencies section. It will allow the developers to use the inbuilt functions directly.

XML

             
dependencies {     
      implementation 'rb.popview:popview:0.1.0'
}          

Step 2: 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.

image_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_weight="1"
        android:src="@drawable/gfg_first" />
</LinearLayout> 

Step 3: Add the following code in activity_main.xml file. In this file, add ImageView to the layout.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center">
   
    <ImageView
        android:id="@+id/imageView"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="150dp"
        app:srcCompat="@drawable/gfg_first" />
   
    <ImageView
        android:layout_weight="1"
        android:id="@+id/changeImage"
        android:layout_width="0dp"
        android:layout_height="150dp"
        app:srcCompat="@drawable/gfg_second"
       />
</LinearLayout>

Step 4: Add the following code in MainActivity.java file. In this file, add OnClickListner to the ImageViews so whenever user tap on it setOnClickListener, will get invoked automatically. Here one image is removed and other is replaced so for that image_view.XML is inflated that replaces the previous image.

MainActivity.java

          
package org.geeksforgeeks.popView          
  
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import rb.popview.PopField;
  
public class MainActivity extends AppCompatActivity {
  
    ImageView popImage, changeImage;
  
    @Override
    protected void onCreate(@Nullable 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(
                 new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //It will pop the view.
                popField.popView(v);
            }
        });
  
        changeImage.setOnClickListener(
                    new View.OnClickListener() {
            @Override
            public void onClick(View 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);
            }
        });
    }
}