Free Android app covering all aspects of addiction, including prevention and treatment

Capturing user input with Android's TextFields

  • Written by  Clive

Get the user input: Using TextFields

TextField iconNeed to get user’s names, email addresses, telephone numbers?

In fact you can get the user to enter any text. Just define your fields in your layout. Then when the user touches the field, a keyboard pops up and they can enter the text.

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.

Android Studio TextField Palette

In Android Studio, 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:

TextField layout file

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:

Name TextField

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:

Text keyboard

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

Phone keyboard

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

TextField inputType 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:

TextField IME action next

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.

Keyboard carriage return

The Carriage Return button (bottom-right)

Keyboard next button

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:

TextField OnEditorActionListener

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

Email keyboard

The email keyboard

email TextField layout code

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:

Code for handling the email TextField input

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.

TextField keyboard action done button

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:

Phone number input handling code

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.

Hide keyboard button

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.

Extract mode button

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:

Custom Extract mode xml code

Custom Extract mode screenshot

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 Android Studio. You can download the project files here  File download icon

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