Karl Viiburg
Karl Viiburg

Reputation: 832

TextInputLayout EditText nextFocusRight not working as should

I have two TextInputLayout elements side by side: firstname and lastname. Below them I have another full width TextInputLayout element: email.

I'm trying to overwrite the next button on the keyboard so that when clicking Next inside the firstname input, it should go to lastname input and from there to e-email etc.

Now the issue is that when I press Next on the keyboard it's not going to the lastname field but instead going to e-mail below it.

This is part of my xml file where I have these three inputs:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal"
    android:baselineAligned="false">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_firstname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <EditText
            android:id="@+id/register_input_firstname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_firstname"
            android:inputType="textCapSentences"
            android:nextFocusForward="@+id/register_input_lastname"
            android:nextFocusRight="@+id/register_input_lastname" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_lastname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <EditText
            android:id="@+id/register_input_lastname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_lastname"
            android:inputType="textCapSentences"
            android:nextFocusDown="@+id/register_input_email" />

    </android.support.design.widget.TextInputLayout>

</LinearLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/register_input_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_email"
        android:inputType="textEmailAddress" />

</android.support.design.widget.TextInputLayout>

I also tried targeting the TextInputLayout instead of EditText but it has no effect.

Is the next focus even possible with TextInputLayout's or is it a bug or am I just doing something very wrong?

Upvotes: 13

Views: 10045

Answers (4)

AndroidZen
AndroidZen

Reputation: 616

In my case, ids from TextInputLayout were not enough.

I've also had to set the TextInputEditText id for the right-hand side field fragment_driver_zip_edit_text in order to do this:

android:nextFocusDown="@id/fragment_driver_zip_edit_text"

This is my UI:

UI example

This is the XML to set the focus from state to zip field using TextInputLayout:

<!-- STATE -->
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/fragment_driver_state"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/fragment_driver_zip"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapWords"
        android:nextFocusDown="@id/fragment_driver_zip_edit_text"
        android:selectAllOnFocus="true"
        android:textAllCaps="true" />
</com.google.android.material.textfield.TextInputLayout>
<!-- ZIP -->
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/fragment_driver_zip"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBaseline_toBaselineOf="@id/fragment_driver_state"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/fragment_driver_state">
    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/fragment_driver_zip_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textCapWords"
        android:selectAllOnFocus="true"
        android:textAllCaps="true" />
</com.google.android.material.textfield.TextInputLayout>

Upvotes: 0

S.Prapagorn
S.Prapagorn

Reputation: 631

I used this code below it's working like a magic :)

Actually the trick is

android:imeOptions="actionNext"

android:nextFocusDown="@+id/tilAddress"

android:inputType="text"

<android.support.design.widget.TextInputLayout
        android:id="@+id/tilSchoolName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_small">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="@dimen/text_size_small"
            android:textColor="@color/colorTxt"
            android:maxLines="1"
            android:imeOptions="actionNext"
            android:nextFocusDown="@+id/tilAddress"
            android:inputType="text"
            android:hint="School Name" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tilAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="@dimen/text_size_small"
            android:textColor="@color/colorTxt"
            android:maxLines="1"
            android:hint="Address" />
    </android.support.design.widget.TextInputLayout>

Upvotes: 11

Ramz
Ramz

Reputation: 7164

The above answer is correct but i just need to add something when i try i don't get the focus to the next line so i add one more attribute in addition to the above answer

android:inputType="your input type here"

after putting this i got my edit text focus to the next one

example

android:inputType="text"//set any input type as per your requirement

android:nextFocusDown="@+id/next_id"

Complete example of a edittext

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
            android:textColorHint="@color/hint">

            <EditText                                       
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:id="@id/first_name_edt"
                android:nextFocusDown="@+id/last_name_edt"
                android:imeOptions="actionNext"
                android:inputType="text"
                android:hint="@string/str_first_name" />
        </android.support.design.widget.TextInputLayout>

Hope this will help others :)

Upvotes: 5

Yen Pei Tay
Yen Pei Tay

Reputation: 498

Change to this --> android:nextFocusDown="@+id/register_input_lastname"

Upvotes: 15

Related Questions