PopView in Android App

We have seen different types of app in which the view ( image, button, text, or entire view container) pop-outs with a beautiful animation. It will make the UI of your Android app more beautiful and interactive and also help the user to remember it for a long time. This type of effect is mainly seen in many apps where you delete a particular file or in many mobile launcher apps when we uninstall the app.

What is PopView?

To add the above features to our app, we need an external library and PopView is the library that is used to do this type of customizations in our android studio app. So it will make the app more attractive and UI-friendly with minimal code. You can learn more about PopView from GitHub here.

So let's implement a simple PopView in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project).

2. Choose "Empty Activity" from the project template window and click Next.

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 21: Android 5.0 (Lollipop)).

4. Next click on the Finish button after filling in the above details.

5. Now, wait for the project to finish building.

Step 2: Adding the PopView dependency

To show the pop animation in our app we have to implement the PopView in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

dependencies {
 // Adding PopView Library
    implementation 'rb.popview:popview:0.1.0'
}

Step 3: Modify activity_main.xml

Now, go to app -> res -> layout -> activity_main.xml, remove the default TextView and change the Layout to RelativeLayout and then add an ImageView, TextView, Button, and LinearLayout with orientation horizontal and inside LinearLayout we add several ImageViews and changes the background with different colors as shown below:

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity">


    <!-- image view with simple drawable image -->
   <ImageView
       android:src = "@drawable/color_umberala"
       android:id = "@+id/imageViewPop"
       android:layout_alignParentTop = "true"
       android:layout_marginBottom = "16dp"
       android:layout_marginTop = "16dp"
       android:layout_marginRight = "16dp"
       android:layout_marginLeft = "16dp"
       android:layout_centerInParent = "false"
       android:layout_centerHorizontal = "true"
       android:layout_width = "200dp"
       android:layout_height = "200dp"/>

    <!-- simple textView with color background -->
    <TextView
        android:id = "@+id/textViewPop"
        android:paddingBottom = "8dp"
        android:paddingTop = "8dp"
        android:paddingLeft = "16dp"
        android:paddingRight = "16dp"
        android:gravity = "center"
        android:text = "Hello World inside TextView"
        android:fontFamily = "sans-serif"
        android:textStyle = "bold"
        android:textSize = "24sp"
        android:background = "#000000"
        android:textColor = "#FFFFFF"
        android:layout_alignParentTop = "false"
        android:layout_marginLeft = "8dp"
        android:layout_marginRight = "8dp"
        android:layout_centerInParent = "true"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

    <!-- button with 2 different ( text and background ) colors -->
    <Button
        android:id = "@+id/buttonPop"
        android:textAlignment = "center"
        android:textAllCaps = "true"
        android:textColor = "#03A9F4"
        android:textSize = "19dp"
        android:textStyle = "italic"
        android:text = "Simple Button View"
        android:layout_marginBottom = "41dp"
        android:layout_marginEnd = "21dp"
        android:layout_marginStart = "22dp"
        android:layout_alignParentBottom = "true"
        android:layout_width = "match_parent"
        android:layout_height = "80dp"/>


    <!-- linear layout container with multiple colorful imageView -->
    <LinearLayout
        android:paddingBottom = "16dp"
        android:paddingTop = "18dp"
        android:paddingStart = "12dp"
        android:paddingEnd = "13dp"
        android:layout_marginRight = "8dp"
        android:layout_marginTop = "10dp"
        android:layout_marginLeft = "8dp"
        android:foregroundGravity = "center"
        android:gravity = "center"
        android:id = "@+id/linearLayoutPop"
        android:orientation = "horizontal"
        android:layout_marginBottom = "160dp"
        android:layout_alignParentBottom = "true"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <!-- image view with solid red color background -->
        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#F44336"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>
        
        <!-- image view with solid purple color background -->
        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#673AB7"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>

        <!-- image view with sky blue color background -->

        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#2196F3"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>

        <!-- image view with light green color background -->

        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#009688"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>

        <!-- image view with light yellow color background -->

        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#E8FF05"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>

        <!-- image view with solid orange color background -->

        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#FF9800"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>

        <!-- image view with light purple color background -->

        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#9C27B0"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>

        <!-- image view with solid black color background -->

        <ImageView
            android:paddingRight = "4dp"
            android:paddingLeft = "4dp"
            android:paddingTop = "4dp"
            android:paddingBottom = "2dp"
            android:layout_marginBottom = "1dp"
            android:layout_marginTop = "2dp"
            android:layout_marginStart = "3dp"
            android:layout_marginEnd = "4dp"
            android:background = "#151208"
            android:layout_width = "40dp"
            android:layout_height = "40dp"/>


    </LinearLayout>

</RelativeLayout>

Note: we have added the color umberala image to the app -> res ->drawable as color_umberala.png, you can use any image you want according to your need.

Step 4: MainActivity.java file

Now, open the MainActivity.java file and import some basic classes as shown below:

import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
//pop view library
import rb.popview.PopField;

Next, we create the objects of ImageView, TextView, Button, and LinearLayout inside MainActivity class as shown below

 //creating object of ImageView , TextView , Button and LinearLayout
    ImageView imageViewPop;
    TextView textViewPop;
    Button buttonPop;
    LinearLayout linearLayout;

Now, inside the onCreate method, we initialize the PopField, view, and layout as shown below.

  // initializing the different views and layout
        imageViewPop=(ImageView)findViewById(R.id.imageViewPop);
        textViewPop=(TextView) findViewById(R.id.textViewPop);
        buttonPop=(Button) findViewById(R.id.buttonPop);
        linearLayout=(LinearLayout) findViewById(R.id.linearLayoutPop);



        // Attaching the  popField to the layout
        final PopField popField = PopField.attach2Window(MainActivity.this);

Now, we create OnClickListener for all views and inside @Override public void onClick(View v) pop the view as shown below.

  //adding OnClickListener to imageViewPop
        imageViewPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the imageViewPop
                popField.popView(v);
            }
        });

        //adding OnClickListener to textViewPop
        textViewPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the textViewPop
                popField.popView(v);
            }
        });

        //adding OnClickListener to Button
        buttonPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the buttonPop
                popField.popView(v);
            }
        });

        //adding OnClickListener to LinearLayout
        linearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the linearLayout
                popField.popView(v);
            }
        });

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
//pop view library
import rb.popview.PopField;

public class MainActivity extends AppCompatActivity {

    //creating object of ImageView , TextView , Button and LinearLayout
    ImageView imageViewPop;
    TextView textViewPop;
    Button buttonPop;
    LinearLayout linearLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initializing the different views and layout
        imageViewPop=(ImageView)findViewById(R.id.imageViewPop);
        textViewPop=(TextView) findViewById(R.id.textViewPop);
        buttonPop=(Button) findViewById(R.id.buttonPop);
        linearLayout=(LinearLayout) findViewById(R.id.linearLayoutPop);



        // Attaching the  popField to the layout
        final PopField popField = PopField.attach2Window(MainActivity.this);


        //adding OnClickListener to imageViewPop
        imageViewPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the imageViewPop
                popField.popView(v);
            }
        });

        //adding OnClickListener to textViewPop
        textViewPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the textViewPop
                popField.popView(v);
            }
        });

        //adding OnClickListener to Button
        buttonPop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the buttonPop
                popField.popView(v);
            }
        });

        //adding OnClickListener to LinearLayout
        linearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //pop the linearLayout
                popField.popView(v);
            }
        });

    }
}

Now our app is ready, below is the output of the app.

Output:

In the below snapshots, you can see how PopView will look in the android application.

When App is opened for the first time:

When we click on the ImageView:

When we click on the TextView:

When we click on the Button:

When we click on the LinearLayout:

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a pop animation using PopView in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.