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

 

 

by TS Durjoy  

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:

Top of Form

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

Bottom of Form

 

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:

Top of Form

<?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>

Bottom of Form

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:

Top of Form

private ProgressBar progressBar;

 

Bottom of Form

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

Code:

Top of Form

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

Bottom of Form

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:

Top of Form

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); } });

 

Bottom of Form

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.