Align password toggle icon

Question

How to position and align the password toggle drawable to the right of TextInputEditText?

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/passwordTextInputLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            style="@style/DefaultTextInputLayout"
            android:paddingStart="@dimen/activity_default_margin"
            android:paddingEnd="@dimen/activity_default_margin"
            app:passwordToggleEnabled="true"
            app:passwordToggleDrawable="@drawable/select_show_password"
            app:passwordToggleTint="#AFB5C0"
            app:errorEnabled="true" 
            app:layout_constraintBottom_toTopOf="@+id/rememberPasswordCheckBox"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"   
            app:layout_constraintTop_toBottomOf="@+id/emailTextInputLayout" >

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/passwordEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/login_password"
                android:textSize="16sp"
                android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

I need to position the password toggle to the right of TextInputEditText like on the image (where the red arrow are pointing).

Answer 1

You can try the following:

1) MainActivity.class:

public class MainActivity extends AppCompatActivity {

private final String TAG = MainActivity.class.getSimpleName();
private TextInputLayout textInputLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    textInputLayout = (TextInputLayout) findViewById(R.id.passwordTextInputLayout);

    /**
     * By inspecting the source code of TextInputLayout, one can find that:
     *
     * - edit text (called editText) and show password (
     * called startIconView) views are both placed inside
     * a frame layout (called inputFrame).
     * - edit text view is the first child of the frame layout
     * and that the show password view is the third child of this layout.
     *
     */
    FrameLayout inputFrame = null;
    TextInputEditText editText = null;
    CheckableImageButton startIconView = null;

    for (int i = 0; i < textInputLayout.getChildCount(); i++) {
        View child = textInputLayout.getChildAt(i);
        if (child instanceof FrameLayout) {
            inputFrame = (FrameLayout) child;
            for (int j = 0; j < inputFrame.getChildCount(); j++) {
                View child1 = inputFrame.getChildAt(j);
                if (child1 instanceof TextInputEditText) {
                    editText = (TextInputEditText) child1;
                } else if (child1 instanceof CheckableImageButton) {
                    if (j == 2) {
                        startIconView = (CheckableImageButton) child1;
                    }
                }
            }
            break;
        }
    }

    /**
     *
     * - relocate editText and startIconView inside inputFrame.
     * In our case we want startIconView to be located to the
     * right of editText
     *
     **/
    if (inputFrame != null) {

        RelativeLayout rl = new RelativeLayout(MainActivity.this);
        FrameLayout.LayoutParams params_rl = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        rl.setLayoutParams(params_rl);

        if (editText != null &&
                startIconView != null) {

            inputFrame.addView(rl);
            inputFrame.removeView(startIconView);
            inputFrame.removeView(editText);

            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            params.addRule(RelativeLayout.ALIGN_PARENT_END);
            startIconView.setLayoutParams(params);
            rl.addView(startIconView);

            RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            params1.addRule(RelativeLayout.ALIGN_PARENT_START);
            params1.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
            params1.addRule(RelativeLayout.LEFT_OF, startIconView.getId());
            params1.addRule(RelativeLayout.START_OF, startIconView.getId());
            editText.setLayoutParams(params1);
            rl.addView(editText);

        }
    }
}
}

2) activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
tools:context=".MainActivity">

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/passwordTextInputLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    android:layout_marginTop="100dp"
    app:passwordToggleDrawable="@drawable/select_show_password"
    app:passwordToggleTint="#AFB5C0"
    app:errorEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:hint="123"
        android:text=""
        android:background="@color/colorPrimary"
        android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/passwordTextInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    android:layout_below="@id/passwordTextInputLayout2"
    app:passwordToggleDrawable="@drawable/select_show_password"
    app:passwordToggleTint="#AFB5C0"
    app:errorEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:hint="123"
        android:text=""
        android:background="@color/colorPrimary"
        android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

</RelativeLayout>

3) Result:

Answer 2

I solved using negative padding, maybe it not a good pratic, but I can't think how to do it using good practics

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/passwordTextInputLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            style="@style/DefaultTextInputLayout"
            android:paddingStart="@dimen/activity_default_margin"
            android:paddingEnd="@dimen/activity_default_margin"
            app:passwordToggleEnabled="true"
            app:passwordToggleDrawable="@drawable/select_show_password"
            app:passwordToggleTint="#AFB5C0"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@+id/rememberPasswordCheckBox"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/emailTextInputLayout" >

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/passwordEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/login_password"
                android:textSize="16sp"
                android:paddingEnd="-10dp"
                app:setDebugText="@{password}"
                android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>

Answer 3

I think this will help

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/input_layout_password"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:passwordToggleEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edtxt_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:imeOptions="actionNext"
            android:paddingTop="10dp"
            android:paddingBottom="20dp"
            android:paddingStart="10dp"
            android:inputType="textPassword"
            android:drawableRight="@drawable/ic_visibility_off"
            android:maxLines="1"/>
</com.google.android.material.textfield.TextInputLayout>

Answer 4

Below is working code for me

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_layout_password"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:hint="Password"
                app:layout_constraintTop_toBottomOf="@id/input_layout_username"
                app:passwordToggleEnabled="true">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edtxt_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:imeOptions="actionNext"
                    android:inputType="textPassword"
                    android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

Below is my output