How to Set a Progress Bar on Toolbar Actionbar in Android Java

A progress bar is useful to let your users know that the app is doing something in the background,loading a web page etc. a progress bar is a must have element in an android app where it is required.

Without a progress bar, your users might think that your app is froze,stuck or unresponsive. this tutorial teaches you how to add a rotating progress bar in the toolbar of your android app

Progress bars on tool bar in android

 

First, we need define a progress bar in the XML code

XML code to show progress bar in the toolbar

This is a rotating progressbar

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar1"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlways">

            <ProgressBar
                android:id="@+id/toolbarprogress"
                android:layout_width="25dp"
                android:rotation="@integer/google_play_services_version"
                android:layout_height="25dp" />

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

 

You need a custom toolbar so use a theme such as Theme.AppCompat.NoActionBar in your app (Styles.xml or in manifest).

Now go to the java activity where you want set the toolbar

Java code to hide and show rotating progressbar

 

//identify the Progress bar
ProgressBar progbar = findViewById(R.id.toolbarprogress);



//to show the progressbar
 progbar.setVisibility(View.VISIBLE);


// to hide the progressbar
progbar.setVisibility(View.GONE);

Result

 

The result 1 is the rotating progressbar, 2 is the horizontal proggressbar

 




Next, let’s learn how to set a horizontal progress bar, it is a different progress bar that is used to show the correct progress of doing something

 

XML code for Horizontal Progress bar

This progressbar is placed inside a frame layout for better fit below the toolbar

<android.support.design.widget.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="?android:attr/actionBarSize"
       app:layout_scrollFlags="scroll|enterAlways">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar1"
           android:layout_width="match_parent"
           android:layout_height="?android:attr/actionBarSize"
           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           app:layout_collapseMode="parallax"
           app:layout_scrollFlags="scroll|enterAlways">

       </android.support.v7.widget.Toolbar>

   </android.support.design.widget.AppBarLayout>





       <FrameLayout
           android:layout_marginTop="-4dp"
           android:id="@+id/framlytt"
           android:layout_width="match_parent"
           android:layout_height="9dp">

           <ProgressBar
               android:id="@+id/toolbarprogress"
               style="?android:attr/progressBarStyleHorizontal"
               android:layout_width="match_parent"
               android:layout_height="8dp"
               android:layout_marginTop="2dp"
               android:progress="30"
               android:theme="@style/Progressbar.White" />

       </FrameLayout>

 

Java code for Horizontal progressbar

The java code for the rotating progressbar is not useful for the horizontal progress bar because it needs adjust its horizontal length depending on the current progress state, so we need different code, here is an example, i have set the java code to show it in a webview, you need adapt this code for your app

 

ProgressBar progbar = findViewById(R.id.toolbarprogress);

webview.setWebChromeClient(new WebChromeClient() {

          public void onProgressChanged(WebView view, int newProgress) {
              super.onProgressChanged(view, newProgress);

              progbar.setProgress(newProgress);



              //loadingTitle.setProgres s(newProgress);
              // hide the progress bar if the loading is complete
              if (newProgress == 100) {






                  loadingProgressBar.setVisibility(View.INVISIBLE);

              } else {




                  loadingProgressBar.setVisibility(View.VISIBLE);


              }
          }




, ,

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.