Saturday, October 6, 2012

How to move your focus through EditText on Android

Recently, I found many apps make the focus move through IME, like the Example I will make here, if you have 3 EditText, you need the user to fill out the username, password and the confirmed password.


Username
Password
Confirm

In the LinearLayout, we have four horizontal LinearLayout, each are pretty similar, while if you take a close look at it, you will notice for each EditText, if you need your focus goes through each, you need to make the EditText with single line and imeOptions as actionNext. For the last EditText, I personally set it as Done Button, so when you click it, you will close the IME, that thing appears on the bottom of the image. You could customize it with other functional button, like Go, Send, etc., please check the Document.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:text="Username:"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <EditText
            android:id="@+id/dialog_create_device_edittext_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:text="Password:"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <EditText
            android:id="@+id/dialog_create_device_edittext_serial"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:imeOptions="actionNext"
            android:inputType="text|textPassword"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:text="Confirm Password:"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <EditText
            android:id="@+id/dialog_create_device_edittext_address"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:imeOptions="actionDone"
            android:inputType="text|textPassword"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/dialog_create_device_button_confirm"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/newdevice_dialog_Button_confirm" />

        <Button
            android:id="@+id/dialog_create_device_button_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/newdevice_dialog_Button_cancel" />
    </LinearLayout>

</LinearLayout>