Signup/Sign In
APRIL 19, 2021

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:

    pop view example

    When we click on the ImageView:

    pop view example  clicked on imageView

    When we click on the TextView:

    pop view example  clicked on TextView

    When we click on the Button:

    pop view example  clicked on button

    When we click on the LinearLayout:

    pop view example  clicked on linear layout

    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.

    K S Lohan is an accomplished author and expert in technical writing on Android language and develop android App. He is highly skilled at communicating complex programming concepts in a clear and concise manner.
    IF YOU LIKE IT, THEN SHARE IT
    Advertisement

    RELATED POSTS