Changing the Enter Key to "Next" on the Soft Keyboard

Published? true
FormatLanguage: WikiFormat

Problem:

Several apps, including the Web Browser and the Contacts app, replace the "Enter" key on the on-screen keyboard with a "Next" key that gives focus to the next data entry view. How do you add this kind of polish to your own apps?

Solution:

Set the appropriate Input Method Editor (IME) attribute on the views in question.

Discussion:

Here is a simple layout with three text fields (EditText views) and a submit button:

Note the enter key in the bottom right. Pressing it causes the currently-focused text field to expand vertically to accommodate another line of text. Not what you normally want!

Here is the code for that layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<EditText
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Field 1" />
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Field 2" />
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Field 3" />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" 
    android:text="Submit" />
</LinearLayout>

Here's a better version of the same UI, with a Next key where Enter used to be:

Besides being more convenient for users, this also prevents people from entering multiple lines of text into a field that was only intended to hold a single line.

Here's how to tell Android to display a Next button on your keyboard. Note the android:imeOptions attributes on each of the three EditText views:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<EditText
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Field 1"
    android:imeOptions="actionNext" />
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Field 2"
    android:imeOptions="actionNext" />
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Field 3"
    android:imeOptions="actionDone" />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" 
    android:text="Submit" />
</LinearLayout>

Finally, notice the actionDone on the third text field: the button that follows is not focusable in touch mode, and if it was, it wouldn't display a keyboard anyway. As you might guess, actionDone puts a Done button where the enter key normally goes. Pressing the Done button simply hides the keyboard.

There are a number of refinements you can make to the appearance of the software keyboard, including hints about the input type, suggested capitalization, and even select-all-on-focus behaviour. They are all worth investigating. Every little touch can make your app more of a pleasure to use.

See Also:

The Android API documentation from TextView, especially the section on ImeOptions.