Progress bar isn't visible when put together with webview

Question

In the LinearLayout there is a WebView and ProgressBar element.

The WebView is full screen.

And I try to show the ProgressBar when WebView is loading something.

But seems ProgressBar is covered by WebView and thus not visible.

And if I set WebView to be invisible ,I can see that ProgressBar.

So how can I show the ProgressBar on top of the WebView?

score 5 · Answer 1 · answered Mar 09 '12 at 13:40

5

Try using a RelativeLayout rather than a LinearLayout. Have the WebView as the first child and the ProgressBar as the second, this will place the ProgressBar over the top of the WebView.

answered Mar 09 '12 at 13:40

Matt Colliss

1,394
1
11
21

By `top` I mean I want the ProgressBar to have a z-index on top of the webview. – new_perl Mar 09 '12 at 13:41
Yes, the order views are added to a RelativeLayout defines their z-ordering. – Matt Colliss Mar 09 '12 at 13:44
In LinearLayout,if I put the ProgressBar above WebView, `findViewById` won't find the Webview, do you know the reason? – new_perl Mar 09 '12 at 13:51
Is there difference when writing `` and ``? – new_perl Mar 09 '12 at 14:14
Nope is just shorthand for , normally used for views that can't have any children. – Matt Colliss Mar 09 '12 at 14:21

score 2 · Answer 2 · answered Mar 09 '12 at 13:45

You should use a RelativeLayout to do this. It will be something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#1F286D" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

You can use android:translationZ attribute in ProgressBar:

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:translationZ="2dp"
    android:layout_centerInParent="true"/>

and Use RelativeLayout

More information

edited May 23 '17 at 12:16

Community

1
1

answered Jul 27 '16 at 02:17

Abed Putra

1,153
2
17
37

score 0 · Answer 4 · answered Oct 18 '17 at 03:46

Better way + the progressBar will stay on your screen even when you scroll through the WebView: put the progressbar inside FrameLayout and below WebView...

<RelativeLayout 
    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"
        android:layout_centerVertical="true"
       />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="150dp">

           <ProgressBar
               <!-- your progress bar here-->
             />

      </FrameLayout>
</RelativeLayout>

Progress bar isn't visible when put together with webview

4 Answers4