Having issue with Popup window

Question

I am trying to set Popup window similar to the old Facebook comment section.

Rounded corner dialog box but I am facing a problem with size of dialog box and showatlocation of the Dialog box.

When I try this code on different mobile:

        val display = windowManager.defaultDisplay
        val size = Point()
        display.getSize(size)
        val popupWindow = PopupWindow(customView, size.x-30, size.y-300, true)
        popupWindow.showAtLocation(linearLayout1, Gravity.CENTER, -3, 100)
        popupWindow.setAnimationStyle(R.style.PopupAnimation)

Xml File :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/dialog_bg"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10px">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="horizontal">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/popup_rcv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <EditText
            android:id="@+id/new_comment_et"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Please enter Comment" />

        <Button
            android:id="@+id/comment_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submit" />
    </LinearLayout>
</LinearLayout>

//Animation from Source

Output On Oneplus 6T:

In one plus my animation also disable when I change .showAtLocation to other numbers

Output on Lenovo K8 Note:

In K8 note Location of Popup change if I change to another value.

Thank you in Advance.

Answer 1

Looks like these 2 phones have different screen resolutions. So you have to use DP instead of pixels. Check this post

Popup size. Firstly you have to convert dialog size to pixels. These are random values and they are hardcoded, but you can take them from resources or harcode too.

val popUpWidthDp = 200
val popUpHeightDp = 100

val popUpWidthPx = convertDpToPx(popUpWidthDp)
val popUpHeightPx = convertDpToPx(popUpHeightDp)

val popupWindow = PopupWindow(customView, popUpWidthPx, popUpHeightPx, true)

Popup position. Firstly you need to convert dp to px and then you can calculate popup position related to screen size.

val popUpLeftSideMarginDp = 50
val popUpTopMarginDp = 100

val popUpXPoint = convertDpToPx(popUpLeftSideMarginDp)
val popUpYPoint = convertDpToPx(popUpTopMarginDp)

popupWindow.showAtLocation(linearLayout1, Gravity.CENTER, popUpXPoint, popUpYPoint)

Check out this answer to understand how to convert dp into pixels and vise versa.

If popup should have size and position related to screen size then you have to change these values:

• popUpHeightPx, popUpWidthPx - popup size

• popUpXPoint, popUpYPoint - popup position

Let me know if you need detailed explanation.

Answer 2

Create PopupWindow as:

popupWindow= new PopupWindow(
                        customView,
                        LayoutParams.MATCH_PARENT,
                        LayoutParams.MATCH_PARENT
                );

And set its location as:

popupWindow.showAtLocation(linearLayout1, Gravity.CENTER, 0, 0)

And add customView top margin 10dp or 5dp in xml