placing Item over WebView in Android

shokarta

hello,

so we all know, that once I use WebView on Android, then its always topmost with no options to put anything over it...
however, we must have some options...

AI offered 3 options:

~~use Dialog{} or Popup{} which will get topmost~~ - it doenst
Use a FrameLayout: Place your WebView inside a FrameLayout and then add the overlay view as a sibling to the WebView. This way, the overlay view can be positioned above the WebView:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    <View
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#80000000" /> <!-- Semi-transparent overlay -->
    
</FrameLayout>

Custom WebView: Create a custom WebView by extending the WebView class and overriding the onDraw method to draw your overlay:

public class CustomWebView extends WebView {
    private Paint paint = new Paint();

    public CustomWebView(Context context) {
        super(context);
        init();
    }

    public CustomWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint.setColor(Color.parseColor("#80000000")); // Semi-transparent color
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0, 0, getWidth(), getHeight(), paint); // Draw overlay
    }
}

do we know any other options? best just a QML so i dont need to go to Java/C++
however if there is no other option, can I kindly ask you guys for the example step by step to make option 2 or 3 happen? I have never used Java or the XML layout, I work only with c++ and QML

shokarta

at the end, only thing i figure out I can do is place an item (image/svg/etc) to the webpage via JS, something like:

onLoadingChanged: (status) => {
	if (!loading) {
		const jsCode = `const img = document.createElement('img');
			img.src = 'https_//www.google.com/image.jpg';		// note, some pages have security that wont allow images which is not from their domain... to me best oslution is not to create img here but svg which jas no link to the image, but its draw via JS
			img.alt = 'Example Image';

			img.style.position = 'fixed';	// absolute / relative, etc
			img.style.width = '20px';
			img.style.height = '20px';
			img.style.top = '20px';
			img.style.left = '20px';
			img.style.zIndex = '999999';	// to make sure its always topmost

			document.body.appendChild(img);

			img.addEventListener('click', function() {
				window.location.href = 'https://www.google.com';
			});`;
			webview.runJavaScript(jsCode);
	}
}