Button is not Visible in front of WebView (API 19 and among them)

Question

i have a WebView with a Button in front of it. The Button opens the url in extern browser which is working like a charm in Android API 21 and above. But I'm also testing in API 16 to reach more devices. In API API 19 and below, the Button is not appearing, above of them the button is visible and working. The Button is only visible, when the WebView is getting an url. Before that, the Button is invisible.

my relevant Java code is:

public void launchWebViewByURL(String url)
    {
        showSpinner();
        Button browserButton = (Button) fragmentView.findViewById(R.id.WebViewButton);
        browserButton.setVisibility(View.VISIBLE);
        webView.loadUrl(url);
    }

my relevant XMK is

<RelativeLayout
        android:id="@+id/WebViewLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_above="@+id/statusIndicators"
        android:layout_below="@+id/statusIndicatorTop">

        <Button
            android:id="@+id/WebViewButton"
            android:text="@string/webViewButton"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:textSize="7dp"
            android:alpha="0.7"
            android:visibility="invisible"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="5dp" />

        <WebView
            android:id="@+id/WebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:requiresFadingEdge="vertical"
            android:fadingEdgeLength="16dp"
            android:background="@color/colorPrimary"
            android:overScrollMode="ifContentScrolls"
            android:layout_alignParentRight="true"
            android:layout_alignParentLeft="true"
            android:visibility="visible" />


        <RelativeLayout
            android:id="@+id/WebViewOverlay"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/black"
            android:visibility="invisible"
            android:alpha="0.5">

            <com.pnikosis.materialishprogress.ProgressWheel
                android:id="@+id/ProgressWheel"
                android:layout_width="@dimen/spinner_dimen"
                android:layout_height="@dimen/spinner_dimen"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                wheel:matProg_barColor="@color/colorAccent"
                wheel:matProg_circleRadius="@dimen/spinner_dimen"
                wheel:matProg_barWidth="@dimen/spinner_breadth"
                wheel:matProg_progressIndeterminate="true"
                />

        </RelativeLayout>

    </RelativeLayout>

When the WebView has an Alpha like the Button, the Button is visible but not touchable. When the WebView is invisible, the Button is shown and working. Can someone help me to bring the Button to the front in "lower" APIs like 19 and below?

Answer 1

The reason why button isn't listening to touch is because its getting consumed by WebView as WebView is in front of your Button. When you change alpha for WebView it still drawn in ViewGroup (in your case RelativeLayout) and is consuming all the touch events within its bounds. So solution for you is to bring your Button in front. May be consider reading documentation for RelativeLayout to know how it works.

below code should work

<RelativeLayout
    android:id="@+id/WebViewLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/statusIndicators"
    android:layout_below="@+id/statusIndicatorTop">

    <WebView
        android:id="@+id/WebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:fadingEdgeLength="16dp"
        android:overScrollMode="ifContentScrolls"
        android:requiresFadingEdge="vertical"
        android:visibility="visible"/>

    <RelativeLayout
        android:id="@+id/WebViewOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0.5"
        android:background="@android:color/black"
        android:visibility="invisible">

        <com.pnikosis.materialishprogress.ProgressWheel
            android:id="@+id/ProgressWheel"
            wheel:matProg_barColor="@color/colorAccent"
            wheel:matProg_barWidth="@dimen/spinner_breadth"
            wheel:matProg_circleRadius="@dimen/spinner_dimen"
            wheel:matProg_progressIndeterminate="true"
            android:layout_width="@dimen/spinner_dimen"
            android:layout_height="@dimen/spinner_dimen"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            />

    </RelativeLayout>

    <Button
        android:id="@+id/WebViewButton"
        android:layout_width="80dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="5dp"
        android:alpha="0.7"
        android:text="@string/webViewButton"
        android:textSize="7dp"
        android:visibility="invisible"/>
</RelativeLayout>