Skip to content
Related Articles

Related Articles

Improve Article
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
    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
    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);
            }
        });
    }
}

Output:

References:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :