Position Android Popup Menu To Html Element In Web View

June 07, 2023 Post a Comment

I have a web view in my Android app with some buttons. When the use press one of the button I would like to present a PopupMenu positioned to that HTML button. I use addJavascript

Solution 1:

In case anybody's wondering, here's a rough working solution. The element in the page has a left margin of 30%. After you scroll the content into view, you tap the txt div element in the WebView, and the PopupWindow will display where the element is, relative to the WebView.

src/main/your.package/MainActivity.java:

This attaches the javascript interface to the WebView with the name "Android".

publicclassMainActivityextendsAppCompatActivity {

    private WebView webview;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webview = (WebView) findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.addJavascriptInterface(newMyJavaScriptInterface(this), "Android");

        try {
            Stringcontent=newScanner(getAssets().open("sample.html")).useDelimiter("\\A").next();
            webview.loadData(content, "text/html", null);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    privatevoidmanagePopup(int px, int py) {
        Viewview= MainActivity.this.getLayoutInflater().inflate(R.layout.view_popup, null);
        PopupWindowpopup=newPopupWindow(view,
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        popup.setBackgroundDrawable(newColorDrawable(Color.TRANSPARENT));
        popup.setOutsideTouchable(true);
        popup.showAsDropDown(webview, px, -webview.getHeight() + py);
    }

    privateclassMyJavaScriptInterface {
        private Context ctx;

        publicMyJavaScriptInterface(Context ctx) {
            this.ctx = ctx;
        }

        @JavascriptInterfacepublicvoidshowMenu(int x, int y) {
            finalintpx= (int) (x * ctx.getResources().getDisplayMetrics().density);
            finalintpy= (int) (y * ctx.getResources().getDisplayMetrics().density);

            HandlermainHandler=newHandler(Looper.getMainLooper());
            RunnablemyRunnable=newRunnable() {
                @Overridepublicvoidrun() {
                    managePopup(px, py);
                }
            };
            mainHandler.post(myRunnable);
        }
    }
}

src/main/assets/sample.html:

Here is some sample HTML that gets loaded into the WebView from the assets directory. It has a click listener on the div.

<html><style>#txt {
    margin-left: 30%;
    margin-top: 400px;
    margin-bottom: 1000px;
    border: 1px red solid;
    display: inline-block;
}
</style><body><divid="txt">some text</div><script>var element = document.getElementById("txt");
        element.addEventListener('click', function (event) {
            var rect = element.getBoundingClientRect();
            Android.showMenu(rect.left, rect.top + rect.height);
        });
    </script></body></html>

src/main/res/layout/view_popup.xml:

This is a sample menu. I'm not using PopupMenu in this example, preferring PopupWindow#showAsDropDown(View,int,int) instead.

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:background="#000"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:textColor="#FFF"android:text="Menu Item 1" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:textColor="#FFF"android:text="Menu Item 2" /></LinearLayout>

Result:

Here is a GIF of it:

Solution 2:

If it's of use to anyone I have some functionality to solve this in a library fork I have which gives the ability to extract screen rectangles using jquery and standard id, class, and tag attributes provided here. Feel free to fork or copy and paste since the primary focus of the library is not on solving this problem.

getWebJQueryRects - returns a list of rectangles based on a list of jquery strings

Baca Juga

getWebIDRects - the same as above but using document.getElementById

getWebTagRects - the same as above but using document.getElementsByTagName

getWebClassRects - the same as above but using document.getElementsByClassName

The rectangles returned represents on screen coordinates in pixels. In the posters scenario this could be used to find the buttons onscreen location.

Solution 3:

SOLVED by creating and showing the PopupMenu in the views OnLayoutChangeListener callback.

Android Devweb