Monday, July 16, 2012

Android help screen dialog

This article provide a simple template to construct an android help screen dialog. The actual help contents are built into a HTML file to make it easier to be reused when the application is being ported across multiple platforms. The approach uses a WebView inside a Dialog. Help contents in a raw HTML file are loaded into the WebView when the help dialog is launched.

Help pages main activity

Help pages dialog

Create a simple layout to be used for help dialog. Just has an embedded webview inside a linearlayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.webkit.WebView
        android:id="@+id/helpView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </android.webkit.WebView>

</LinearLayout>

Create a HTML file with your help contents. A contact support link can also be added if required using "mailto:" descriptor.
<br>
<a href="#feedback">Feedback</a>
<br>
<a name="about_apphelp" id="about_apphelp">
<h3>About AppHelp</h3>
AppHelp is a test application to demonstrate a help dialog.
</a>
<br>
<a name="feedback" id="feedback">
<h3>Feedback</h3>
Any comments, feedback, suggestions on AppHelp please write to us using the link below.
<br>
<a href="mailto:sourcetricks@gmail.com">Contact support</a>
</a>
<br>

All we need to do now is read the contents of the HTML file into a string and load this data into the web view. Also, we need to handle the mailto: URL. Sample code to achieve this is listed below.
@Override
public void onCreate(Bundle savedInstanceState) {
   setContentView(R.layout.help);
   WebView help = (WebView)findViewById(R.id.helpView);
   help.setWebViewClient(new WebViewClient(){
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
     if(url.startsWith("mailto:")){
  MailTo mt = MailTo.parse(url);
  Intent intent = new Intent(android.content.Intent.ACTION_SEND);
  intent.putExtra(Intent.EXTRA_EMAIL, new String[] { mt.getTo()});     
  intent.putExtra(Intent.EXTRA_SUBJECT, "AppHelp feedback");     
  mContext.startActivity(Intent.createChooser(intent, "Send feedback ..."));
  return true;
    }
    else{
  view.loadUrl(url);
    }
    return true;
      }
   });

   String helpText = readRawTextFile(R.raw.help_contents);
   help.loadData(helpText, "text/html; charset=utf-8", "utf-8");
}

private String readRawTextFile(int id) {
   InputStream inputStream = mContext.getResources().openRawResource(id);
   InputStreamReader in = new InputStreamReader(inputStream);
   BufferedReader buf = new BufferedReader(in);
   String line;
   StringBuilder text = new StringBuilder();
   try {
      while (( line = buf.readLine()) != null) 
 text.append(line);
   } catch (IOException e) {
     return null;
   }
   return text.toString();
}

This example can be downloaded here.
AppHelp

0 comments :

Post a Comment

Contact Form

Name

Email *

Message *

Back to Top