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.PopFieldclass 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) } }} |
