No Tooltips for Android - Use Hint

This tutorial briefly discusses an alternative to tooltips for the Android platform. Android is extensively used on mobile devices where tooltips don't make sense. For data entry fields, such as the EditText widget, a watermark can be added using the hint attribute. This provides a good alternative to the tooltip.

(This article assumes that Android Studio is installed; a basic App can be created and run; and code can be correctly copied into Studio. In the test App used here the Application name is called Hint Demo and an Empty Activity is used. You are free to change this example for your own requirements.)

Android devices come in a variety of screen sizes. Mobile devices can have small screens so there may not be room for helpful explanatory text for a field, or even a label next to a field. On computer systems with Graphical User Interfaces (GUIs) a tooltip aka infotip, is often provided for fields and buttons. What is a tooltip? It is a popup label near a field or button that appears when the mouse moves over it. It provides extra information as an aid for users entering data or trying to understand the use of an application.

For example sometimes an input field needs clarification with regards to the value being entered. A stock ordering application asking for item quantities may need to state the minimum order size. Unlike Android a mouse driven personal computer (PC) or laptop with a large screen can display extra messages in the tooltip. Alternatively a large screen has space for a long descriptive label that can be used before the field.

The alternative to a tooltip for Android is to use the android:hint attribute on a View. This causes a watermark containing text to be displayed in the input field when it is empty; this disappears when the user starts typing in the field.

Here is the layout for the above screen:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hintdemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="You are ordering doughnuts."
        android:id="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Amount:"
        android:layout_below="@+id/textView"
        android:id="@+id/textView2" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:id="@+id/editText"
        android:hint="In boxes of ten"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2"
        android:maxLength="10" />
</RelativeLayout>

Hints act a guide for filling in data fields. Using hints can help with screen layouts when space is tight, allowing labels to be removed to gain more space as the hints provide the necessary prompt for the user. A screen design can sometimes be improved by removing a label and using a hint. Though like any feature over use is possible. Hints must not be used when it is obvious what is required, a field with a label of First Name would not need a hint such as Enter your first name here.

The Android hint can be set in code, function is setHint();. The color of the hint text can be set in a layout with attribute android:textColorHint, with setHintTextColor(int color); being the code function:

((EditText)findViewById(R.id.editText)).setHint("Number of tubes");
((EditText)findViewById(R.id.editText)).setHintTextColor(ContextCompat.getColor(this, R.color.colorAccent));

A version of this article appears in the Android Cookbook. Download example code containing the above screen ready for importing into Android Studio. The code can also be accessed via the Android Example Projects page.