PopUpWindow in Android. Tutorial

Today we will consider such not quite common element of the interface as PopUpWindow.

It is present from the first versions of the API, but not as popular as other dialog boxes due to the need for additional configuration, which is not always necessary. But from this it follows its main advantage — wide customizability, you can place anything you want in this element, use it as a notification element or a dialog box, while controlling the display interface completely.

For example, consider an application with one button, which, when clicked, will call PopUpWindow in the form of a CardView with text and a button. So we learn how to call the dialog box and handle events inside it.

In the next lesson, we will also look at the animation of the dialog box and use it in conjunction with the RecyclerView list.

To begin, add a dependency to display CardView in your build.gradle

dependencies {
    implementation 'com.android.support:cardview-v7:28.0.0'
}

After that, we will edit the basic layout of our application, add a button and change the background color for greater contrast.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:background="@color/cardview_dark_background"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/buttonPopup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textButtonMain"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Now we will create another layout that will represent the PopUpWindow layout, add a CardView with an attached LinearLayout with text and a button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:gravity="center">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="5dp">

        <LinearLayout
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/titleText"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/textTitle"
                android:textSize="20sp"
                android:textStyle="bold"
                android:padding="10dp"/>


            <Button
                android:id="@+id/messageButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/textButton" />

        </LinearLayout>

    </android.support.v7.widget.CardView>
</LinearLayout>

Consider the implementation of PopUpWindow as a separate class for sharing responsibility, create a class PopUpClass and proceed to the analysis of the code

package com.evanbishop.ept.popupwindowtestapp;

import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.Toast;

public class PopUpClass {

    //PopupWindow display method

    public void showPopupWindow(final View view) {


        //Create a View object yourself through inflater
        LayoutInflater inflater = (LayoutInflater) view.getContext().getSystemService(view.getContext().LAYOUT_INFLATER_SERVICE);
        View popupView = inflater.inflate(R.layout.pop_up_layout, null);

        //Specify the length and width through constants
        int width = LinearLayout.LayoutParams.MATCH_PARENT;
        int height = LinearLayout.LayoutParams.MATCH_PARENT;

        //Make Inactive Items Outside Of PopupWindow
        boolean focusable = true;

        //Create a window with our parameters
        final PopupWindow popupWindow = new PopupWindow(popupView, width, height, focusable);

        //Set the location of the window on the screen
        popupWindow.showAtLocation(view, Gravity.CENTER, 0, 0);
       
        //Initialize the elements of our window, install the handler

        TextView test2 = popupView.findViewById(R.id.titleText);
        test2.setText(R.string.textTitle);

        Button buttonEdit = popupView.findViewById(R.id.messageButton);
        buttonEdit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //As an example, display the message
                Toast.makeText(view.getContext(), "Wow, popup action button", Toast.LENGTH_SHORT).show();

            }
        });



        //Handler for clicking on the inactive zone of the window

        popupView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                //Close the window when clicked
                popupWindow.dismiss();
                return true;
            }
        });
    }

}

Now it remains only to add a call to our PopUpClass class to our activity. To do this, create a button click handler and call the PopUpClass class method in it.

package com.evanbishop.ept.popupwindowtestapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

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

// Create a button handler and call the dialog box display method in it
        Button popupButton = findViewById(R.id.buttonPopup);
        popupButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                PopUpClass popUpClass = new PopUpClass();
                popUpClass.showPopupWindow(v);
            }
        });
    }
}

Check how our dialog box is displayed, click on the button.

Now let’s see if the click processing works in the window itself.

Conclusion

Now you know how to implement your own dialog with your content and can use it in your projects.

In the following lessons we will cover the animation of PopUpWindow and the use of the RecyclerView list item as a detail.

I hope everything was clear, if you have any questions, write to evanbishop.dev@yahoo.com