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.

Why not just use dialog instead it will give your desired affect unless you want the animation.This is way simpler way to prompt user for feedback. This way you don't have to worry about where it will show up plus you can add custom styles to the dialog https://stackoverflow.com/questions/12351330/what-is-the-difference-between-popupwindow-and-dialog — skryshtafovych, Feb 04 '19 at 20:13

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 24 '19 at 10:19

Yamko

535
1
3
13

where i need to change pixel to dp means i am not using pixels anywhere not even in my xml file so can you provide more information. Sorry i am new to android designing – Ashish Jan 24 '19 at 10:23
there was animation of slider in popup but it removed after i put those values -3 and 100 – Ashish Jan 24 '19 at 10:27
Updated the answer – Yamko Jan 24 '19 at 11:41
its not working it says java.lang.Float cannot be cast to java.lang.Double – Ashish Jan 30 '19 at 11:14
I thought you are using Kotlin. Where exactly do you have exception? You need to cast Float to Double explicitly. – Yamko Jan 31 '19 at 13:03

Zumbarlal Saindane · Answer 2 · 2019-02-06T10:55:56.953

1

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

edited Feb 06 '19 at 10:55

answered Feb 06 '19 at 10:19

Zumbarlal Saindane

1,199
11
24

sir i am having issue with popup location and animation if i chnage showatlocation to 0, 0 then in oneplus it shows properly but when i use that values in k8 note then it gives issue and if i use -3, 100 then it works perfect in both but animation of dialog box does not show – Ashish Feb 06 '19 at 10:27
Hi Ashish, have u tried to set height and width parameter as "LayoutParams.WRAP_CONTENT" – Zumbarlal Saindane Feb 06 '19 at 10:29
does it show same height as oneplus image cause i need dialog box of that size – Ashish Feb 06 '19 at 10:30
1

can u please add xml code of your "customView", so I can help u more – Zumbarlal Saindane Feb 06 '19 at 10:31
can u add actual image of "Output on Lenovo K8 Note" when location set to 0,0 – Zumbarlal Saindane Feb 06 '19 at 10:35
which layoutparams i use there are lot of params – Ashish Feb 06 '19 at 10:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187982/discussion-between-zumbarlal-saindane-and-ashish). – Zumbarlal Saindane Feb 06 '19 at 10:50

Chetan Joshi · Answer 3 · 2019-02-06T11:18:04.893

0

Try with below solution : its in Java but you can convert it in Kotlin

PopupWindow popupWin = new PopupWindow(mContext);

// Measure layout here, then we can get measureHeight.
layout.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
popupWin .setWidth(layout.getMeasuredWidth()); 
popupWin .setHeight(layout.getMeasuredHeight()); //you can pass height as you want.
popupWin .setContentView(layout);
popupWin .showAsDropDown(anchorView,0 ,0, Gravity.NO_GRAVITY);

Here anchorView is a view in where we want to open PopupWindow in as dropdown.

PopupWindow

edited Feb 06 '19 at 11:18

answered Feb 06 '19 at 11:06

Chetan Joshi

5,582
4
30
43

i am looking for comment section similar to instagram but smaller in size but there is issue with dialog box. so does anchorView help me ? – Ashish Feb 06 '19 at 11:09
you can try with it to give height and anchorView . – Chetan Joshi Feb 06 '19 at 11:11
can you help me with DialogBox or popupwindow cause having issue in multiple section – Ashish Feb 06 '19 at 11:14
Please go through with link added in my answer. – Chetan Joshi Feb 06 '19 at 11:18
i tried with your link but there is no solution for my question cause it sticks to screen bottom and animation for exit also disappear – Ashish Feb 06 '19 at 11:25

score 0 · Answer 4 · answered Feb 06 '19 at 11:49

0

I think you would like to convert the pixels into dp, rather then dp into pixels, in order to fit different resolutions of screens. More information here.

This is how to convert pixels to dp.

answered Feb 06 '19 at 11:49

Daniel Reyhanian

579
4
26

Having issue with Popup window

4 Answers4