How To Build A Simple Help Screen in Android

I released my first app to the Android Market recently. It was just complicated enough that I thought I should provide some help screens inside the app. I have taken what I did there and built a demo app, in order to illustrate how one can build a simple help screen in Android.

My simple Help screen consists of a summary page where there is an image and a brief description for each help topic. Touching the image takes you to the full help text for a topic. The figures below show what the two activities look like.

Figure 1 – Help screen

Figures 2-3 – Topic screen for topics 1 and 2

It is easy to build this kind of help screen. You need two layouts: one for the help activity and one for the topics. All of the help text comes from xml files in the resource folders. The help text can include paragraphs, text formatting (bold, italics), and even links to web pages. Even if you do not need a Help screen for your app, knowing how to have formatted Html text in an Android text view could be of use to you.

Help Activity

The demo app starts out in the HelpActivity. Its layout file is help.xml.

<LinearLayout xmlns:android=""
 android:orientation="vertical" >
<ScrollView android:id="@+id/ScrollView1"


The first thing to note is that it starts with a ScrollView that encloses a single LinearLayout. Doing that is all you need to have scrolling on the Help screen.

After the two items that support scrolling and the text view for the introduction, there are four LinearLayout views that use the horizontal orientation. Each one includes an image button and some summary text. This is what the first one looks like.

 <Button android:id="@+id/help_button1"

The image button has an image with text underneath it. The text comes from the resource string help_title_section1 (which has a value “Topics”). The drawable is defined by the help_image1 definition in the drawable folder. What makes this interesting is that it is not an image file, but an xml file.

<selector xmlns:android="">
 <item android:state_focused="true" android:state_pressed="true" 
 <item android:state_focused="false" android:state_pressed="true"
 <item android:state_focused="true" android:drawable="@drawable/light_bulb_selected"/>
 <item android:state_focused="false" android:state_pressed="false"

I used three distinct images so that the “selected” button looks different from the “pressed” button, and both are different from the button in its normal state. (For more on how to use these state lists, see StateListDrawable.)

Like other buttons, you can define the onClick handler in the xml file. In this case, the handler is onClickHelp. In fact, all four of the buttons use the same handler. The id of the view is used to determine which of the buttons was clicked.

The definition of onClickHelp is in HelpActivity. It looks at the id of the view to determine the resource id of the text to display in a TopicActivity. Note how it passes that argument as it starts the TopicActivity using an Intent.

public void onClickHelp (View v)
 int id = v.getId ();
 int textId = -1;
 switch (id) {
 case :
   textId = R.string.topic_section1;
 case :
   textId = R.string.topic_section2;
 case :
   textId = R.string.topic_section3;
 case :
   textId = R.string.topic_section4;
 if (textId >= 0) startInfoActivity (textId);
 else toast ("Detailed Help for that topic is not available.", true);
public void startInfoActivity (int textId)
 if (textId >= 0) {
   Intent intent = (new Intent(this, TopicActivity.class));
   intent.putExtra (ARG_TEXT_ID, textId);
   startActivity (intent);

Topic Activity

It may be a bit of a surprise to see how little code there is in the TopicActivity. It starts up and sets its content view. Then it reads the id of the string resource that is to be displayed on the screen. It locates the resource string and processes it as Html text and assigns that to the text view defined in the topic.xml.

protected void onCreate(Bundle savedInstanceState)
 setContentView (R.layout.topic);
 // Read the arguments from the Intent object.
 Intent in = getIntent ();
 mTextResourceId = in.getIntExtra (HelpActivity.ARG_TEXT_ID, 0);
 if (mTextResourceId <= 0) mTextResourceId = R.string.no_help_available;
 TextView textView = (TextView) findViewById (;
 textView.setMovementMethod (LinkMovementMethod.getInstance());
 textView.setText (Html.fromHtml (getString (mTextResourceId)));

The line with the LinkMovementMethod is also important. Without that, links displayed on the screen are not active.

The Html.fromHtml method allows you to define paragraphs, bold, italics and links in the resource strings that define the help text. Figures 2-3 above showed what the formatted text looks like. The following is the string topic_section2 defined in the help_strings.xml file.

<string name="topic_section2">
 You can display simple forms of Html in a text view.
 You use the Html class and its fromHtml static method.
 <a href="">Html
  on Android Developers</a>.
 As shown here, paragraphs are supported,
 as are <b>bold text</b> and <i>italics</i>.
 The preceding paragraph has a link in it.
 <p><b>Return to the previous screen by touching the Back button.</b>

Source Code

The source code for this demo app can be downloaded here: download zip file from

This demo app was built with Android API 10. Be sure to rebuild the project using the “Clean” command on the Build menu in Eclipse.

Integrating Help Into Your App

If you decide to you want a Help screen in your app, you can start with the code above. If you would like to have a form of context-sensitive help, you could consider doing what I did in my Gomoku League app.

In Gomoku League, I used the Help and Topic activities so I could explain how to play the game of Gomoku and how the league part of the app works. Gomoku League has a user interface based on the dashboard pattern. In the action bar for each section of the app, there is a “?” button that takes you directly to the help for that activity.

Even if you do not have an action bar at the top of the screen, you can find other ways to support context-sensitive help. The simplest is to include a Help item on the menu that you display when the user pushes the Menu button.

About Bill Lahti

Bill Lahti is a software engineer building mobile applications and knowledge management solutions. Two of his interests are writing for this blog and building Android apps, with strategy games being an area of particular interest.
This entry was posted in Android and tagged , , , , . Bookmark the permalink.

9 Responses to How To Build A Simple Help Screen in Android

  1. Roger says:

    Or you could just use a WebView, put your help in your assets and use that. Then any regular content tool can be used and you can put the same content on your website.

    • blahti says:

      That’s a good suggestion. I have to admit that I did not consider that for my app. Now I am asking myself why not. It might be that I had tried using a web view in an iPhone app that I had worked on before I switching to Android. For that one, I know I spent a lot of time handling the special cases for page redirection and the like. I might then have assumed that WebView in Android would be similarly trying. Or it might be that I was determined to have an app that requires no special permissions from users — not even what I regard as non-threatening: Internet access.
      I do like the simplicity of using TextView in combination with the HTML class. So, in some situations, I think it’s a good solution. However, you’ve got me thinking about other possibilities. Thanks for your comment.

      • Mike says:

        I found this article because I am have a big problem with WebView. I use webview to display a HTML file, which it does correctly, but as soon as I setContentView for the layout with the WebView element, it generates a webview.db file (and associated files) in my /data/data/user/databases file. This is OK, but while displaying this webview, I execute a SQLBuilder query command which fails. Despite having passed (and verified) the DB name as mydb.db, the query command fails because it can’t find my column in “webview.db”.
        I am assuming the webview.db file is open and takes precedence in the SQLBuilder query – very frustrating.
        I am looking forward to implementing your idea here. But if anybody has an apparent cause for this webview.db error, I would greatly appreciate your feedback.

  2. Thank you so much!!! I did everything listed above on my own but for the one line of code:
    textView.setMovementMethod (LinkMovementMethod.getInstance());

    I spent nearly and hour trying to figure out what I was doing wrong. I had almost given up and was about to recreate twelve views worth of content in HTML before stumbling onto this page. You have saved me several days worth of work. Thank you so much for posting this.

  3. alienuv says:

    ya this code is nice .but i want to display images and paragraph in webview
    how can i do that?

    • blahti says:

      Sorry, I do not have any suggestions to make related to webview. I have not tried it, mainly because it was so easy to get a little bit of formatting in a text view.

  4. Your coding is so good.You did a very good job but your way to use overriding method is very nice.In past i have some doubt about super keyword now my al doubt is cleared.Thanks for writing such coding in that simple way.

  5. RBaillie says:

    This is a good explanation of how to do help pages in an Android app. Thanks!

    Is there any way to modify your html so that one section could have a link to another section within the same file?

    • blahti says:

      I have not tried this, but you could try to see if they support relative links in the Html text. Use <a name=”foo” rel=”nofollow”> somewhere in the text and then try <a href=”#foo” rel=”nofollow”> elsewhere.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s