Get the user input: Using TextFields

Building your input screen: Adding TextFields

Use EditText objects as TextFields, they’re a sub-class of TextViews.

Just add them in your layout file.

In , simply drag the text fields from the Palette on the left and place them on the screen

You can then edit the xml file if you like:

The layout file including 3 text fields

Choose your keyboard: Input types

You can enter numbers, letters, symbols, etc. into the text field.

The inputType attribute defines the type of data that is expected to be entered into the field.

You can see a full list of input types here.

You set the text type in your layout file, using the inputType attribute:

Here we specify that the input text should be of the text type and that the first letter of each word should automatically be capitalized

The text type also determines which keyboard is displayed:

A typical text keyboard is displayed for entering a name. The first letter of each word is automatically capitalized

A number keyboard is displayed when the inputType is set to phone

Choose your button: Keyboard actions

You can specify what should happen when the user has finished entering the text.

Android has a control called the Input Method Editor or IME. It enables users to enter text via TextFields. The IME manages the input.

We can tell the IME what to do once the user has entered the text. We do this by using the imeOptions attribute:

There are a number of actions that you can set like this. The common ones are:

• actionNone – no action. Displays the Carriage Return button on the keyboard
• actionNext – input cursor moves to the next text field. Displays the Next button on the keyboard
• actionDone – closes the soft input method. Displays the Done button on the keyboard

Setting the action also sets the button to replace the Carriage Return button on the keyboard.

The Carriage Return button (bottom-right)

The Next button

What! No action?

If you don’t set an action and there is another text field, then the system applies the actionNext default and moves the input cursor to the next text field when the user presses the Next button.

If there are no more text fields then the actionDone action is applied. A Done button is displayed on the keyboard.

Getting the input: Dealing with the action

Use an OnEditorActionListener to listen for the action. It’s callback method, onEditorAction() passes on the action ID for you to use like this:

Note the following:

• inputText – We use getText() to get the text entered by the user. This returns a CharSequence object so we convert it to a String using toString(). We then assign the result to the inputText String
• i – the action identifier. This is the value of the imeOptions attribute that we set in the layout file
• IME_ACTION_NEXT – usually set in the layout file using the imeOptions attribute. In this case it was not set so it defaults to actionNext. The Next button displays on the keyboard. When the user presses the Next button, the if statement matches and a Toast message displays the name
• return handled – it returns false as the input action was not handled. There are other text fields and the input cursor jumps to the next one

The email keyboard

Specifying the email address text field in the layout file

Note the following:

• inputType – set as textEmailAddress which displays the “email” keyboard
• actionNext – this imeOptions setting ensures that the Next button is displayed on the keyboard. You can then listen for this action using the OnEditorActionListener

Here’s the code for listening for IME_ACTION_NEXT:

Note the following:

• IME_ACTION_NEXT – performs a “next” operation and moves the input cursor to the next text field
• inputText – We use getText() to get the text entered by the user. This returns a CharSequence object so we convert it to a String using toString(). We then assign the result to the inputText String
• i – the action identifier. This is the value of the imeOptions attribute that we set in the layout file
• IME_ACTION_NEXT – set in the layout file using the imeOptions attribute. The Next button displays on the keyboard. When the user presses the Next button, the if statement matches and a Toast message displays the email address
• return handled – it returns false as the input action was not handled. We still have the phone number text field to complete. The input cursor jumps to the phone number text field

Nighty-night: Action done!

The phone number text field is the last one. Its imeOptions attribute has been set to actionDone.

Setting the imeOptions attribute to actionDone causes the Done button to display. Pressing this closes the Input Method Editor or IME

Here’s the code that listens for when the user presses the Done button:

Note the following:

• We’ve included code to close the keyboard
  • Use the InputMethodManager to get an instance of the IME service
  • Use hideSoftInputFromWindow() to hide the keyboard
• return handled - it returns true as the input action is finished. No more input will be expected

Hide the keyboard, or not…

You don’t have to take care of hiding the keyboard. The user can do that.

Pressing the down icon on the left will hide the keyboard

Get me outa here: Extract mode

Sometimes the keyboard is large enough to hide parts of the app so it triggers Extract Mode and displays across the full screen.

In Extract Mode, the action button appears on the right

You can provide your own text to display in this button.

Here’s the code to include in the layout file:

You may also want to have a look at our, Playing with Android's TextViews tutorial.

I hope that you have found this tutorial useful.

Please consider subscribing to our notification email. We’ll send you one email on Friday with links to our latest tutorials. That way you won’t miss out. If we didn’t publish any then we won’t send any email. No spam.

This tutorial was created using . You can download the project files here  

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.