How to position a Button on top of a WebView in Android

Question

I am really new to Android development and I am working on an existing codebase.

I have a android.webkit.WebView instance that I need to add a Button to the bottom-right corner of. And I also need the button to stay fixed. I do not want it to scroll with the content of the webview. I would like for the button to always be in the bottom-right corner of the webview itself, not of its content.

To do this, I have extended the WebViewClient class and am overriding the onPageStarted method and this is where I am thinking about adding the code to add the button.

My code looks something like:

public class MyWebViewClient extends WebViewClient {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        
        //TODO: create a Button instance here and place it on top of the webview
    }
}

To create and add the button, I have tried the following different options, but none of them are working like I want. They all end up with the button at the very top-left of the webview (at coordinate (0,0) in the coordinate system of the webview) and also when the webview is scrolled, the button scrolls with the content.

@Override
public void onPageStarted(WebView webview, String url, Bitmap favicon) {
    super.onPageStarted(webview, url, favicon);

    //TODO: create a Button instance here and place it on top of the webview
    Button button = new Button(webview.getContext());
    button.setText("35");

    RelativeLayout.LayoutParams layoutParams = new 
    RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, 
    RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.width = 44;
    layoutParams.height = 44;
    layoutParams.rightMargin = 20;
    layoutParams.bottomMargin = 20;
    button.setLayoutParams(layoutParams);

    webview.addView(button);
}

I also tried this with LinearLayout too, but that resulted in similar behavior where the button was at the top of the web view and the button scrolled with the content of the web view.

I have been trying to find an answer and it seems that possibly FrameLayout might be a way to do this too but, assuming that is correct, I am not sure if I would need to do webview.setLayoutParams(new FrameLayout(...)) or if that needs to be applied to the button instead, or does that need to be set on both?

Just to recap, I am trying to add a button on top of a web view such that:

• It is in the bottom-right corner of the web view.
• It does not scroll with the content of the web view. It should stay fixed in the same bottom-right corner place no matter if the web view is scrolled or not.

My question is: what is the best way to do this (programmatically, if possible, instead of by using XML). Should I be using the FrameLayout or something else?

Answer 1

I recommend you use XML instead, that way you have WAY more control over your individual Views and their positions on the layout.

EDIT:

Assuming you're using an Activity or a Fragment as the container for these Views, simply add these Views to your XML to start playing with them.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <WebView
        android:id="webView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>

Once they're in the appropriate XML file, you can access them directly thru your Activity/Fragment.