Enabling TalkBack for the ImageViews

In the Welcome app, we don’t need more descriptive text for the TextView, because TalkBack will read the TextView’s content. For an ImageView, however, there is no text for TalkBack to speak unless you provide it. It’s considered a best practice in Android to ensure that every GUI component can be used with TalkBack by providing text for the Content Description property of any component that does not display text. For that reason, the IDE actually warned us that something was wrong with our GUI by displaying small warning () icons in the Graphical Layout editor next to each ImageView. These warnings—which are generated by a tool in the IDE known as Android Lint—indicate that we did not set the Content Description property of each image. The text that you provide should help the user understand the purpose of the component. For an ImageView, the text should describe the image.

To add a Content Description for each ImageView (and eliminate the Android Lint warnings), perform the following steps:

1. Select the droidImageView in the Graphical Layout editor.

2. In the Properties window, click the ellipsis button to the right of the Content Description property to open the Resource Chooser dialog.

3. Click the New String... button to display the Create New Android String dialog.

4. In the String field specify "Android logo" and in the R.string field specify android_logo, then press OK.

5. The new android_logo string resource is selected in the Resource Chooser dialog, so click OK to specify that resource as the value for the droidImageView’s Content Description property.

6. Repeat the preceding steps for the bugImageView, but in the Create New Android String dialog, specify "Deitel double-thumbs-up bug logo" for the String field and "deitel_logo" for the R.string field. Save the file.

As you set each ImageView’s Content Description, the warning icon () for that ImageView in the Graphical Layout editor is removed.