How to show a customized Popup window near the touch location, like what we have when we use ContextMenu?

Question

Background

Seeing that it's not officially possible to have a context menu which has a customized view or even icons for its rows (here), I decided to create my own solution (of custom view that acts like it).

The problem

When using a context menu on a RecyclerView, the touch position matters, so if you long touch an item, the context menu will try to appear near the touch location (sample taken from here), and without me giving this information (meaning via OnClickListener or onLongClickListener ) :

However, I can't find how to do this in the more basic classes.

What I've tried

Showing a PopupWindow can be done via long touch, as such:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val inflater = LayoutInflater.from(context)
    val holder = ViewHolder(inflater.inflate(R.layout.list_item_main, parent, false))
    holder.itemView.setOnLongClickListener {
        val contextMenuView=inflater.inflate(R.layout.context_menu,null)
        val popupWindow = PopupWindow(contextMenuView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true)
        popupWindow.showAsDropDown(holder.itemView,0,0);
        true
    }
    return holder
}

And, if you want to have a nice background for it instead of being transparent, you could use a workaround, of ListPopupWindow, and if you don't want a list, you can just set its promptView , as such (code available here) :

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val inflater = LayoutInflater.from(context)
    val holder = ViewHolder(inflater.inflate(R.layout.list_item_main, parent, false))
    val maxAllowedPopupWidth = context.resources.displayMetrics.widthPixels * 90 / 100
    holder.itemView.setOnLongClickListener {
        val contextMenuView = inflater.inflate(R.layout.context_menu, null)
        val listPopupWindow = ListPopupWindow(context)
        contextMenuView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED)
        val width = min(maxAllowedPopupWidth, contextMenuView.measuredWidth)
        listPopupWindow.setPromptView(contextMenuView)
        listPopupWindow.setContentWidth(width)
        listPopupWindow.anchorView = it
        listPopupWindow.show()
        true
    }
    return holder
}

I'm not sure about the max width that I've calculated, because I can't find what's the maximum size that a popup can have. I know that the context menu has some maximum and then it just truncates the text for some reason. Maybe it's the same as of Dialog? Except that for dialog I could find a maximum width, yet I've found a minimal : windowMinWidthMajor and windowMinWidthMinor.

But back to the issue: I can't find any function here that's related to putting the popup near the touch location.

So this is what I get, for example:

The questions

1. How to set the popup window to appear near the touch location on the screen, without even handling onTouch event, as done on the sample using ContextMenu ?

2. Does the context menu (or similar) have some attribute that I can get, to set as the max size for what I show (in short: a default max width) ? If so, how do I use it? How can I set the width&height to consider the one of the inflated view?

Answer 1

It has been a while since I have done this, but I think we had the same problem. Let me see if I can answer.

Not being able to make custom context menus for the EditText was one of the main reasons that I finally decided to create a library with custom components for Mongolian. Although the vertical Mongolian parts won't be useful to you, the concepts should be the same for other custom popups.

Here are a couple screenshots of what I have:

This one is a custom EditText that used a custom popup menu. It takes the user touch location to place the popup location.

The next one is a more general demonstration of different ways to set the popup location.

Both of these demos are included in the mongol-library demo app.

My custom menu was a PopupWindow subclass. You can find the source code here.

The way I placed it at a particular location was to use the showAtLocation method, which as I recall is just a normal method on PopupWindow:

private void showMongolContextMenu(MongolMenu menu, int xTouchLocation, int yTouchLocation) {
    float paddingPx = CONTEXT_MENU_TOUCH_PADDING_DP * getResources().getDisplayMetrics().density;
    Rect menuSize = menu.getDesiredSize();
    int y = yTouchLocation - menuSize.height() - (int) paddingPx;
    menu.showAtLocation(this, Gravity.NO_GRAVITY, xTouchLocation, y);
}

That code is from here.

Oh, yes, and I also used this in custom keyboards:

See these classes for more:

• PopupKeyCandidate
• PopupKeyCandidatesView
• Keyboard