ListPopupWindow animation starts in textfield instead of below it

Question

I added aListPopupWindow anchored to a TextInputLayout. The issue I have with this is that the animation for the popup starts within the TextInputLayout:

Note that the issue is just where the animation starts. After the animation has finished, the popup is correctly shown below the TextInputLayout.

What do I have to do to let the animation start just below the TextInputLayout? Note that it's not my own animation, but the default one.

Layout snippet:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint" />
</com.google.android.material.textfield.TextInputLayout>

Code for the ListPopupWindow:

val arrAdapter = ArrayAdapter<String>(
        this,
        R.layout.dropdown_menu_popup_item,
        listOf("hello", "world")
)

val listPopupWindow = ListPopupWindow(this).apply {
    anchorView = findViewById(R.id.textInputLayout)
    setAdapter(arrAdapter)
}

findViewById<Button>(R.id.button).setOnClickListener {
    listPopupWindow.show()
}

Code also available on Github: https://github.com/wondering639/stack-listpopupwindow-animation-start

Hint: This is just a reduced test case. I am aware of AutoCompleteTextView, but I really need to manually show a ListPopupWindow.

lelloman · Accepted Answer · 2020-08-15T10:33:23.353

1

You can use setEpicenterBounds(Rect) and pass a Rect width the full width but a flat height at the bottom of the anchor.

Obviously the anchor view needs to be already laid out when calling setEpicenterBounds(Rect) because its size is needed, the best place for the call is probably right before show(), if you really can't do it there and the anchor view is not using fixed sizing, you might use a ViewTreeObserver.OnGlobalLayoutListener.

val anchorView = findViewById<View>(R.id.textInputLayout)
val listPopupWindow = ListPopupWindow(this).apply {       
    this.anchorView = anchorView
    setAdapter(arrAdapter)
}

findViewById<Button>(R.id.button).setOnClickListener {
    listPopupWindow.epicenterBounds = Rect(0, anchorView.height, anchorView.width, anchorView.height)
    listPopupWindow.show()
}

edited Aug 15 '20 at 10:33

answered Aug 14 '20 at 14:03

lelloman

13,883
5
63
85

thank your for your detailed reply. Unfortunately this still has the same issue ): I added a screenshot of the result to your post. – stefan.at.kotlin Aug 14 '20 at 21:52
Yeah that method would have required some hacking on the animations, found a better one :) – lelloman Aug 15 '20 at 08:30
once I realized I really shouldn't set the `epicenterBounds` already during the `listPopupWindow` definition (added a code comment as warning/reminder for others), this does exactly what it should and it also seems to be the proper solution. Accepted as correct answer, thank you very much! (bounty can't be yet awarded due to restrictions by stackoverflow, but bounty will be rewarded in some hours) – stefan.at.kotlin Aug 15 '20 at 09:50
hmm, what would happen if there is no room for the popup menu below the view? Original android controls then show the popup menu above it, but then the `epicenterBounds` need to be different. How to detect this? Any idea? – stefan.at.kotlin Aug 15 '20 at 10:13
I don't understand your concern, the popup is placed on top of your views so there shouldn't be any issues. – lelloman Aug 15 '20 at 10:26
wasn't formulated clearly, correction: what if my `TextInputLayout` is due to scrolling at the bottom of the screen, so the popup can only be shown above the `TextInputLayout`. The anchor needs to be adapted in this case to be at the top I guess. But how do I know that Android actually shows the popupmenu above my `TextInputLayout`so I change the `epicenterBounds` accordingly? – stefan.at.kotlin Aug 15 '20 at 10:32
Thanks for the clarification, now I understand the concern. Yes probably you'll need to detect where the popup is going to be shown and then set the epicenter bounds at the top of the view rather that at the bottom. I'm not sure how you can detect that but my guess is that it will be below unless there's not enough space on screen (without considering other views, just the position of the bottom of the anchor) – lelloman Aug 15 '20 at 10:43

ListPopupWindow animation starts in textfield instead of below it

1 Answers1