In this article we will develop an Android application which facilitates users to load a webpage or image in a WebView widget by entering its url. While loading the url, the application will display a progress bar on the title bar to show the percentage of url downloaded.
The requested url will be opened in a web browser if the requested url contains any redirections. In order to prevent this opening of web browser , we need to override the method shouldOverrideUrlLoading() to return false.
Since this application loads the url from the Internet, it requires the permission android.permission.INTERNET, which can be defined in the the file AndroidManifest.xml.
If you want to display an indeterminate progress bar, please read the article titled “Showing indeterminate progress bar on title bar while loading URL in WebView”
This application is developed in Eclipse ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3) .
1. Create a new Android application project namely “WebViewProgress”
Figure 1 : New Android Application Project
2. Design application launcher icon
Figure 2 : Design Application Launcher Icon
3. Create a blank activity for defining MainActivity
Figure 3 : Create a blank Activity
4. Enter MainActivity details
Figure 4 : Enter MainActivity Details
5. Remove the Android’s Support library from this project, if exists
By default Eclipse ( 4.2.0) adds Android Support Library to Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.
6. Update the file res/values/strings.xml
<resources>
<string name="app_name">WebViewProgress</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">WebView Demo</string>
<string name="str_hnt_et_url">Enter URL</string>
<string name="str_et_url">http://</string>
<string name="str_btn_load">Load URL</string>
</resources>
7. Update the layout file res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="@+id/et_url"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/str_hnt_et_url"
android:text="@string/str_et_url"
android:inputType="textUri"
/>
<Button
android:id="@+id/btn_load"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/str_btn_load"
android:layout_below="@id/et_url"
/>
<WebView
android:id="@+id/wv_url"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
tools:context=".MainActivity"
android:layout_below="@id/btn_load"
/>
</RelativeLayout>
8. Update the class MainActivity in the file src/in/wptrafficanalyzer/webviewprogress/MainActivity.java
package in.wptrafficanalyzer.webviewprogress;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends Activity {
WebView mWvUrl;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/** Enabling Progress bar for this activity */
getWindow().requestFeature(Window.FEATURE_PROGRESS);
setContentView(R.layout.activity_main);
mWvUrl = (WebView) findViewById(R.id.wv_url);
/** Enabling Javascript for the WebView */
mWvUrl.getSettings().setJavaScriptEnabled(true);
OnClickListener btnLoadClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
/** Getting reference to edittext widget
* of the layout activity_main.xml
* */
EditText etUrl = (EditText) findViewById(R.id.et_url);
/** Load the url entered in the edittext box */
mWvUrl.loadUrl(etUrl.getText().toString());
}
};
Button btnLoad = (Button) findViewById(R.id.btn_load);
btnLoad.setOnClickListener(btnLoadClickListener);
final Activity activity = this;
mWvUrl.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
/** The value of progress for webview varies from 0 to 100
* The value of progress for the activity varies from 0 to 10000
* So, progress value of webview has to be multiplied by 100
*/
activity.setProgress(progress * 100);
}
});
mWvUrl.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
/** This prevents the loading of pages in system browser */
return false;
}
/** Callback method, executed when the page is completely loaded */
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Toast.makeText(getBaseContext(),
"Page loaded Completely",
Toast.LENGTH_SHORT).show();
/** Progress reaches to 100% when progress value
* is Window.PROGRESS_END (10000) */
activity.setProgress(Window.PROGRESS_END);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
9. Update the file AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="in.wptrafficanalyzer.webviewprogress"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="4"
android:targetSdkVersion="15" />
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
10. Screenshots of the application in execution
Figure 5 : Entering URL to the application
Figure 6 : Progressing the loading of a URL
11. Download
12. Reference
http://developer.android.com/guide/index.html
I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
Ready to test your knowledge in Android? Take this quiz :
