'Button is not Visible in front of WebView (API 19 and among them)
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?
Solution 1:[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>
Solution 2:[2]
In a relative layout, the "z" order of elements is defined by the order those elements were added to the relative layout. So, the lower an element is in the layout, the higher its z value is. That being said, move WebViewButton to the bottom of the layout for it to be above the webview.
Solution 3:[3]
try for this
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter"
android:id="@+id/WebViewButton"
/>
<WebView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/webView"
android:layout_below="@+id/WebViewButton"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true" />
Solution 4:[4]
<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"
>
<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" />
<Button
android:id="@+id/WebViewButton"
android:text="gfjhfgj"
android:layout_width="80dp"
android:layout_height="50dp"
android:textSize="7dp"
android:alpha="0.7"
android:visibility="visible"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp" />
</RelativeLayout>
Solution 5:[5]
The only option that solved my problems with buttons that insist on not to render was:
webView.getSettings().setDomStorageEnabled(true);
I hope this helps someone.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Shashank |
| Solution 2 | Joao Sousa |
| Solution 3 | |
| Solution 4 | Mehul Santoki |
| Solution 5 | Grégori Fernandes de Lima |