Toxic Bakery

Help Activities And You!

by on Feb.04, 2011, under Android Development

One of the hardest features to include in your Android applications is the help feature. The help feature aims to teach your users how to properly use your application, avoid common pitfalls and even let them know about bugs you are aware of and currently working on. Unfortunately the more information you need to shove into the help, the more cumbersome it becomes to manage your applications help and the less likely you are to spend time keeping it current.

So what can we do to make our lives, the developer, a little easier while at the same time getting the user better content? The answer to all your problems is the WebView. WebViews can be created in the activity with only a few lines and are quite powerful. They can process Javascript, CSS and of course basic HTML although a lesser known feature may be the fact that from your activity you can actually communicate bidirectionally with your in page Javascript however thats a discussion for another day.

First lets take a look at how we can break up a large help file into a few pages.

Here we can see a ListView of help topics on the left and a help page on the right which is actually a WebView. Now I’m not going to discuss how to build a custom ListView as that is outside the scope of this tutorial instead we are just going to focus on how do you go from a ListView to a WebView fluidly. Personally I broke this into two separate Activities as I like to keep my segments of code as small as possible and multiple files just makes me feel clean.

ListView Activity

clickListener = new OnItemClickListener() {
	@Override
	public void onItemClick(AdapterView adapter, View view, int position, long id) {
		Intent myIntent = new Intent(getApplicationContext(), ActHelpWebView.class);
		myIntent.putExtra("filename", helpDisplay.get(position)[2]);
		startActivity(myIntent);
	}
};

Here we can see the listener I used for my ListView which simply launches our Activity that contains the WebView. It is also key to note that here I am passing along the data of which file to open with the Intent. This is done in my case by using a List where the array looks like this {“icon to use”, “title”, “htmlpage”}. With this knowledge it makes sense why I am passing helpDisplay.get(position)[2] as that is the help file that the user has requested to be loaded.

Now that we have passed the Intent we need to have a few things setup before we move forward. First you need to have your ‘mini’ site ready to go. For me I just created a simple style sheet in CSS and then made a single page layout that I filled in with all my content and images. You can store all of these files in the assets directory of your application as seen below. Just a reminder, your assets folder goes into your root application directory and not into the ‘res’ directory.

Assets help screenshot

Now that we have the Intent and our assets ready to go lets finally make our WebView and hopefully educate our users a little better than before. To do this we need to first receive our intent, create our WebView and finally pass the file location to the WebView for processing.

public class ActHelpWebView extends Activity {
	
	private Context context;
	private WebView webView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.context = this;
		setupWebView();
		displayHelpPage(getIntent().getStringExtra("filename"));
	}
	
	/**
	 * Private method to launch the webview for the requested filename
	 * @param filename
	 */
	private void displayHelpPage(String filename) {
        webView.loadUrl("file:///android_asset/help/" + filename);
        setContentView(webView);
	}
	
	/**
	 * Private method to initialize our webview
	 */
	private void setupWebView() {
        webView = new WebView(context);
        webView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        webView.setBackgroundColor(color.black);
	}

}

This should launch your WebView with all the default parameters. In certain cases you may want to enable additional features such as zooming, Javascript or Activity to Javascript communication as mentioned earlier. There are a variety of ways you can further this however I believe a few Stack Overflow searches can aid you past this point.

:, , , , , , , , ,

Leave a Reply

*

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!