An advanced WebView with some cool features

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.

Now short piece of code to your Activity.

As you noticed I used a new WebView Client to have a possibility to customize the WebView.

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.

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.

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.

Remember to add this line to your strings.xml

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.

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.

It's only fair to shareShare on FacebookTweet about this on TwitterShare on Google+Pin on Pinterest
  • Don Richards

    I have noticed when you take a picture it will not continue back to the application has something changed in the coding or changes with facebook

  • عبدالرحمن بن سلطان

    Thank you for your guide it helped me a lot, now it working fine except when taking photo from my camera nothing happened
    i use nexus 5 OS 5.1.1

    • Great ;) It was working for Lollipop when I published this. I suppose one of the latest WebView updates broke something :( Now I don’t have a clue how to make camera upload right for 5.1.1. All versions below Lollipop are ok. Camera upload on Lollipop is the only problem.

    • It’s fixed!

  • Venkatesh Kalyani

    You are awesome, you made my day. Thanks a lot. please post more about android MS SQL

  • Half Moon
  • Leo

    thanks

    • Leo

      Error:(59, 40) error: cannot find symbol class MyAppWebViewClient
      Error:(120, 50) error: cannot find symbol variable mFilePathCallback
      Error:(121, 50) error: cannot find symbol variable mFilePathCallback
      Error:(123, 46) error: cannot find symbol variable mFilePathCallback
      Error:(132, 94) error: cannot find symbol variable mCameraPhotoPath
      Error:(135, 60) error: TAG has private access in FragmentActivity
      Error:(140, 54) error: cannot find symbol variable mCameraPhotoPath
      Error:(164, 84) error: cannot find symbol variable FILECHOOSER_RESULTCODE
      Error:(185, 46) error: cannot find symbol variable mUploadMessage
      Error:(196, 50) error: cannot find symbol variable mCapturedImageURI
      Error:(199, 98) error: cannot find symbol variable mCapturedImageURI
      Error:(209, 88) error: cannot find symbol variable FILECHOOSER_RESULTCODE

      these are my problems!

  • tyaslab

    Thanks for your post. Thought not working at first run, but it is helpful for me to understand why webView not actually acts like Chrome.

  • Ashan Musthakeem

    Hey I am getting the following error while trying to generate signed Apk

    Error:Execution failed for task ‘:app:transformClassesWithDexForRelease’.

    > com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process ‘command ‘C:Program FilesJavajdk1.7.0_79binjava.exe” finished with non-zero exit value 1

  • Mobi Inc

    I have the above code and it has worked for me. It has assisted me dig deep into knowing working with web chrome client which is un common to most blogs. Besides, it has assisted me know how to upload photo using WebView and webchrome client on Facebook with android . Very nice article

  • Pingback: Android Studio Webview Camera input Empty Link – Android Apps Development()

  • Great explanation :)

    Thanks for sharing it

  • Diego Arévalo

    I´ve been looking for this !!! thank you so much :D

  • Wahyu Artadianto

    why after open the app they ask open my browser?