Using WebView Class to Build Your Own Simple Twitter App

If you want to deliver a web application as your Android application, you can do it so by using the Android.Webkit.WebView class. This post will explain how to utilize this class to simply display an online content in a Mono for Android application. Twitter’s mobile site will be used as an online content, so you will have your own but fake Twitter application.

CREATE NEW PROJECT

Create a new project in your Visual Studio by using the Mono for Android Aplication project template.

This step is the same as the one mentioned in the “Hello World” Application post.

DESIGN and CODING

WebView class utilizes the WebKit as its rendering engine, and it contains methods to navigate through the browser history, to zoom in and out, to save form data and passwords, etc.. It allows you to create your own activity to view and visit web pages.

AndroidManifest.xml is needed!

Your activity will need to access the internet to load the web pages, therefore the required permission should be added to the AndroidManifest.xml file.

Read this post to create an AndroidManifest.xml file in a Mono for Android application.

Once you created it, select INTERNET from the “Required permissions” listbox:

This will automatically add the permission to the AndroidManifest.xml file:

Layout Design

Open the Main.axml file, and place the following code for the layout design:

The Strings.xml file will be very simple since it will not be used much in this application:

Coding for Activity File

First, add the Android.Webkit package before the activity class. Declare the WebView object inside the activity, and then place the following code as your OnCreate method:

Notice that we have changed the default label name to “My Twitter” as a custom attribute.

Run via Emulator

Launch the emulator and deploy your application to your selected virtual device:

Note: How to accomplish this step was explained before in the “Launch Emulator and Debug” section of the “Hello World” Application post.

Even though everything looks good with this picture, you will have a problem when you sign in or click any link on the page because the default Android browser will handle any intent to view a new page. For instance, you will have the following screen after you click on the “Sign up now!” link on the above page:

To avoid this issue and to let the activity to handle its own URL requests, ShouldOverrideUrlLoading method should be overridden:

Place this method as a nested class inside the activity class, and then create an instance of this new class after defining the view:

ENHANCEMENTS

Before redeploying the application, we can place a few additional enhancements to our Mono for Android application.

Disable Saving Passwords and Form Data, and Zooming

Place the following code inside the OnCreate method before where the URL is loaded:

Change The Application Icon

Add a new icon image to the application by right-clicking on the Drawable folder:

For this sample application, we will use the following PNG file from AndroidIcons.com:

You can either name it differently and change the custom attribute in your activity or simply overwrite the existing icon in the folder. We will take the first route and name the icon as icon2.png and will make the necessary code update in the activity:

Android SDK tools automatically compresses PNGs when packaging application resources into the application binary.

Remove Title Bar

While you are updating the custom attributes, you can also remove the gray title bar (where it says “My Twitter”) by using the NoTitleBar theme for the activity in order to provide more space for the content:

Handle Back Button Key Press

If you want to navigate back to the previous pages in your application, it also needs to be handled by overriding the OnKeyDown method:

This method is called whenever the back button on the emulator (and the phone as well) is pressed and it takes you to the previous age if there exists any.

Ready to go!

At the end of all these enhancements, the activity class should look like:

Run via Emulator

Now, redeploy the application to the available virtual device on the emulator:

CONCLUSION

This sample application demonstrated how WebView class can become handy if you have a mobile web application that needs internet connection to provide data to its users. All you have to do is designing your mobile we pages so that they are tailored for the Android devices (like Twitter’s mobile pages that we use in this post), and then implement this class in your Android application to load them.