Progress bar in the content area

Question

I use this "method" to create the progressbar. It work's until I don't use fragments.

Now I use fragments, a material drawer, and a WebView (of course inside a fragment). I created the progress bar, but it shows in the top of the screen.

Here is my code:

the progress bar:

progressBarLoad = new ProgressBar(getActivity().getBaseContext(), null, android.R.attr.progressBarStyleHorizontal);
        progressBarLoad.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 24));
        progressBarLoad.setProgress(100);
        progressBarLoad.setProgressDrawable(getResources().getDrawable(R.drawable.progress_horizontal_holo_light));
        FrameLayout decorView = (FrameLayout) getActivity().getWindow().getDecorView();
        decorView.addView(progressBarLoad);
        ViewTreeObserver observer = progressBarLoad.getViewTreeObserver();
        observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                progressBarLoad.setY(Main.getActionBarSize() + (float) Math.ceil(25 * getResources().getDisplayMetrics().density) - 10);

                ViewTreeObserver observer = progressBarLoad.getViewTreeObserver();
                observer.removeOnGlobalLayoutListener(this);
            }
        });

the main layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Main.Main">

    <android.support.v7.widget.Toolbar
        android:id="@+id/Toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/green"
        app:popupTheme="@style/Theme.AppCompat"
        app:theme="@style/ToolbarTheme" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frameLayout" />

</LinearLayout>

and finally the webView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/SwipeContainer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <WebView
            android:id="@+id/WebViewMain"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

And here the screenshot: shows the progressbar shows the progressbar in the top of the screen

So, the question is, how can I add this progress bar in to the content screen? Not to the whole device screen.

You don't want the progress bar to be over the navigational drawer? Strictly under the toolbar. — Eugene H, Mar 27 '15 at 15:23

score 0 · Answer 1 · answered Mar 27 '15 at 15:25

0

Try adding the progress bar to your activity's frame layout instead of the decor view after you've added a fragment.

answered Mar 27 '15 at 15:25

rahul.taicho

1,339
1
8
18

score 0 · Answer 2 · answered Mar 27 '15 at 15:29

You could put it in the XML which is the easiest way.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".Main.Main">

<android.support.v7.widget.Toolbar
    android:id="@+id/Toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/green"
    app:popupTheme="@style/Theme.AppCompat"
    app:theme="@style/ToolbarTheme"/>

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_below="@+id/Toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<FrameLayout
    android:layout_below="@+id/progressBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/frameLayout"/>

</RelativeLayout>

Or you could put the progress bar in the layout you inflate.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <android.support.v4.widget.SwipeRefreshLayout
        android:layout_below="@+id/progressBar"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/SwipeContainer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <WebView
            android:id="@+id/WebViewMain"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

The first one working, but the layout params now working... :( the second one too... I tried, but now I can't see the progress bar :D — Zoltan Szilagyi, Mar 27 '15 at 15:45
Hey sorry for not getting back soon enough. Don't set the layout params pragmatically. Set it through XML. If you still have issues let me know and we can solve it. — Eugene H, Mar 27 '15 at 16:58
For the second solution, try moving the code for the ProgressBar below the SwipeRefreshLayout. That's what did it for me. — Louie Bertoncin, May 27 '15 at 18:06

score 0 · Accepted Answer · answered Mar 27 '15 at 18:32

So, first of all thanks all the answers. I tried a lot of things, searched a lot, but I find nothing. And then... suddenly I remember that if I put below some object/layout in a relative layout they will be the top of the screen. So I do wrong in the begining. I put the progress bar in the top of the relative layout --> that's why I didn't see. So I put at the bottom of the relative layout, and woala! it works... but wait not correctly..

Why? because I added the toolbar size again, and of course the prog. bar was above about 40px from the toolbar. So I figured out, and now with this code it works on any screen:

progressBarLoad = (ProgressBar) view.findViewById(R.id.progressBar);
            progressBarLoad.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, 24));
            progressBarLoad.setProgress(100);
            progressBarLoad.setProgressDrawable(getResources().getDrawable(R.drawable.progress_horizontal_holo_light));
            ViewTreeObserver observer = progressBarLoad.getViewTreeObserver();
            observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    //THIS IS IMPORTANT 
                    progressBarLoad.setY(((float) Math.ceil(12.5*getResources().getDisplayMetrics().density)-38));
                    ViewTreeObserver observer = progressBarLoad.getViewTreeObserver();
                    observer.removeOnGlobalLayoutListener(this);
                }
            });

Progress bar in the content area

Here is my code:

3 Answers3