I was angry with the official Facebook app for Android. It’s really heavy and I don’t mean the size of the package which is not actually a problem. The problem is that Facebook Mobile uses a lot of RAM and battery drain is not acceptable for me. That’s why I always prefered to use a mobile website rather than the official app.
When I started getting to know Android programming I decided to create an app which could help people using Facebook website. I wanted to have some cool Android features like pull to refresh and drawer layout. I did some research and found something needed to create a Web App. WebView allows you to use Android browser (Chromium) inside your app. It can support Java Script and it has actually all the features present in Google Chrome. So how to implement a simple WebView in you app? How to build something more advanced? I’m gonna show you right now.
First add INTERNET permission to your Manifest and add WebView to your layout xml file.
<uses-permission android:name="android.permission.INTERNET" />
<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Now short piece of code to your Activity.
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView1);
webView.loadUrl("http://m.facebook.com");
webView.setWebViewClient(new MyAppWebViewClient());
}
// handling back button
@Override
public void onBackPressed() {
if(webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
}
}
As you noticed I used a new WebView Client to have a possibility to customize the WebView.
package org.indywidualni.myapplication;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyAppWebViewClient extends WebViewClient {
// handling external links as intents
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if( Uri.parse(url).getHost().endsWith("facebook.com") ) {
return false;
}
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
view.getContext().startActivity(intent);
return true;
}
}
As a result I achieved a simple implementation of a WebView. But it’s not enough to have for example file upload support (including a possibility to take pictures with your camera) while using online and local forms. And what about Java Script support and error handling? A Progress Bar would be also nice. I spent some time looking for all the solutions implemented below but it is worth the result.
First error handling – I post the full code for the class MyAppWebViewClient. When error occures WebView will be refreshed one time. Sometimes there’s a random connection error not related to a real lack of connection. You can do whatever you want, for example load an internal error page from your assets. It’s just an example.
package org.indywidualni.myapplication;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyAppWebViewClient extends WebViewClient {
// variable for onReceivedError
private boolean refreshed;
// handling external links as intents
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if( Uri.parse(url).getHost().endsWith("facebook.com") ) {
return false;
}
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
view.getContext().startActivity(intent);
return true;
}
// refresh on connection error (sometimes there is an error even when there is a network connection)
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
if(!refreshed) {
view.loadUrl(failingUrl);
// when network error is real do not reload url again
refreshed = true;
}
}
}
Now full code for your Activity, with added progress bar, file upload support and a possibility to use your camera when there is a form allowing you to upload an image file.
package org.indywidualni.myapplication;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Environment;
import android.os.Parcelable;
import android.provider.MediaStore;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.ProgressBar;
import android.widget.Toast;
import java.io.File;
import java.io.IOException;
public class MainActivity extends ActionBarActivity {
private WebView webView;
private ProgressBar progressBar;
// variables for camera and choosing files methods
private static final int FILECHOOSER_RESULTCODE = 1;
private ValueCallback<Uri> mUploadMessage;
private Uri mCapturedImageURI = null;
// the same for Android 5.0 methods only
private ValueCallback<Uri[]> mFilePathCallback;
private String mCameraPhotoPath;
// error handling
private static final String TAG = MainActivity.class.getSimpleName();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// define url that will open in webView
String webViewUrl = "http://m.facebook.com";
// webView code without handling external links
webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
//webView.getSettings().setUseWideViewPort(true);
//webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setAllowFileAccess(true);
// load url in webView
webView.loadUrl(webViewUrl);
webView.setWebViewClient(new MyAppWebViewClient());
// implement WebChromeClient inner class
// we will define openFileChooser for select file from camera
webView.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);
}
progressBar.setProgress(progress);
if (progress == 100) {
progressBar.setVisibility(ProgressBar.GONE);
}
}
// for Lollipop, all in one
public boolean onShowFileChooser(
WebView webView, ValueCallback<Uri[]> filePathCallback,
WebChromeClient.FileChooserParams fileChooserParams) {
if (mFilePathCallback != null) {
mFilePathCallback.onReceiveValue(null);
}
mFilePathCallback = filePathCallback;
Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
// create the file where the photo should go
File photoFile = null;
try {
photoFile = createImageFile();
takePictureIntent.putExtra("PhotoPath", mCameraPhotoPath);
} catch (IOException ex) {
// Error occurred while creating the File
Log.e(TAG, "Unable to create Image File", ex);
}
// continue only if the file was successfully created
if (photoFile != null) {
mCameraPhotoPath = "file:" + photoFile.getAbsolutePath();
takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT,
Uri.fromFile(photoFile));
} else {
takePictureIntent = null;
}
}
Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
contentSelectionIntent.setType("image/*");
Intent[] intentArray;
if (takePictureIntent != null) {
intentArray = new Intent[]{takePictureIntent};
} else {
intentArray = new Intent[0];
}
Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
chooserIntent.putExtra(Intent.EXTRA_TITLE, getString(R.string.image_chooser));
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE);
return true;
}
// creating image files (Lollipop only)
private File createImageFile() throws IOException {
File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "DirectoryNameHere");
if (!imageStorageDir.exists()) {
imageStorageDir.mkdirs();
}
// create an image file name
imageStorageDir = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");
return imageStorageDir;
}
// openFileChooser for Android 3.0+
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
mUploadMessage = uploadMsg;
try {
File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "DirectoryNameHere");
if (!imageStorageDir.exists()) {
imageStorageDir.mkdirs();
}
File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");
mCapturedImageURI = Uri.fromFile(file); // save to the private variable
final Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, mCapturedImageURI);
// captureIntent.putExtra(MediaStore.EXTRA_SCREEN_ORIENTATION, ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
Intent chooserIntent = Intent.createChooser(i, getString(R.string.image_chooser));
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});
startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE);
} catch (Exception e) {
Toast.makeText(getBaseContext(), "Camera Exception:" + e, Toast.LENGTH_LONG).show();
}
}
// openFileChooser for Android < 3.0
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
openFileChooser(uploadMsg, "");
}
// openFileChooser for other Android versions
/* may not work on KitKat due to lack of implementation of openFileChooser() or onShowFileChooser()
https://code.google.com/p/android/issues/detail?id=62220
however newer versions of KitKat fixed it on some devices */
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
openFileChooser(uploadMsg, acceptType);
}
});
}
// return here when file selected from camera or from SD Card
@Override
public void onActivityResult (int requestCode, int resultCode, Intent data) {
// code for all versions except of Lollipop
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
if(requestCode==FILECHOOSER_RESULTCODE) {
if (null == this.mUploadMessage) {
return;
}
Uri result=null;
try{
if (resultCode != RESULT_OK) {
result = null;
} else {
// retrieve from the private variable if the intent is null
result = data == null ? mCapturedImageURI : data.getData();
}
}
catch(Exception e) {
Toast.makeText(getApplicationContext(), "activity :"+e, Toast.LENGTH_LONG).show();
}
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
}
} // end of code for all versions except of Lollipop
// start of code for Lollipop only
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
if (requestCode != FILECHOOSER_RESULTCODE || mFilePathCallback == null) {
super.onActivityResult(requestCode, resultCode, data);
return;
}
Uri[] results = null;
// check that the response is a good one
if (resultCode == Activity.RESULT_OK) {
if (data == null || data.getData() == null) {
// if there is not data, then we may have taken a photo
if (mCameraPhotoPath != null) {
results = new Uri[]{Uri.parse(mCameraPhotoPath)};
}
} else {
String dataString = data.getDataString();
if (dataString != null) {
results = new Uri[]{Uri.parse(dataString)};
}
}
}
mFilePathCallback.onReceiveValue(results);
mFilePathCallback = null;
} // end of code for Lollipop only
}
// handling back button
@Override
public void onBackPressed() {
if(webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
}
}
}
Find and replace DirectoryNameHere with your own name. It appears two times in the code. When photo is taken through a file upload form it’s saved to Pictures/DirectoryNameHere.
For a file / camera upload you need an additional permission. So finally we need 2 permissions for this example.
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Remember to add this line to your strings.xml
<string name="image_chooser">File Chooser</string>
While page loading a Progress Bar is showed so your layout file should be modified to let you use the Progress Bar. Here is full code for this example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
For people who prefer live example I uploaded an Android Studio Project. Feel free to download and reproduce the code in your apps. You can also test it directly on your phone (apk file) – WebView.tar.gz
12/03/05 – The example was updated to fix camera upload issue (Lollipop 5.1.1)
Thank you in advance for all the discussions below the post. Next time sth about shared prefs, creating a preference fragment and using it inside your Activity.