How to Add Progress Bar in App | Webview App Development Series Part 4

Hi, In the previous post I have shown Open Url within the Webview App Not in Browser  Today I will show you how to add a Progress bar in the Android /Webview app. Watch the full video for better understanding. Let's start.

First, you need to go activity_main.xml, in the activity_main.xml file above WebView(the previous post I have shown how to set up WebView) you need to take a Progress Bar.you need to select "width" is "match_parent" and "height" is "wrap_content".Then you need to take an Id, I have given that id name is progressBar, then have to take ProgressBar Style like you can take circle type, Horizontal Bar type e.t.c.I am taking Horizontal type ProgressBarStyleHorizontal

Code:

<ProgressBar style="?android:attr/progressBarStyleHorizontal" android:id="@+id/progressBar" android:layout_width="match_parent" android:layout_height="wrap_content"/> [

We have finished our code for the progress bar in activity_main.xml. So, the final code will be in activity_main.xml is:

Code:

<?xml version="1.0" encoding="utf-8"?> <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=".MainActivity"> <ProgressBar style="?android:attr/progressBarStyleHorizontal" android:id="@+id/progressBar" android:layout_width="match_parent" android:layout_height="wrap_content"/> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/myweb"/> </LinearLayout>

Now we will write code in MainActivity.java file, First, we will take a global variable ProgressBar, I am giving the name of that variable is progressBar.

Code:

private ProgressBar progressBar;

Now we will retrieve ProgressBar layout from activity_main.xml file and will store in our global variable progressBar.

Code:

progressBar = (ProgressBar) findViewById(R.id.progressBar);

Then we will write a WebChromeClient() function, in that function we will write code for if our website has not loaded 100% and our progressBar has gone, then ProgressBar visibility will be Visible, else if our website loaded finish and still showing progress bar then ProgressBar visibility will be Gone from Webview App.

Code:

progressBar = (ProgressBar) findViewById(R.id.progressBar); web.setWebChromeClient(new WebChromeClient() { // page loading progress, gone when fully loaded public void onProgressChanged(WebView view, int progress) { if (progress < 100 && progressBar.getVisibility() == ProgressBar.GONE) { progressBar.setVisibility(ProgressBar.VISIBLE); } if (progress == 100) { progressBar.setVisibility(ProgressBar.GONE); } progressBar.setProgress(progress); } });

That's it. We have finished writing code in activity_main.xml and MainActivity.java file. Now we will run our Project.

As you can see in my above picture my app is running in Emulator, And you can see its showing ProgressBar and work perfectly also, So we have successfully added ProgressBar in our Webview App. Thanks.