CODEWITHSUNDEEP
androidandroid-textinputlayout
Gober
Gober

Reputation: 3662

Visible password with TextInputLayouts passwordToggleEnabled

I am using a TextInputLayout with the new function from the Support Library: passwordToggleEnabled. This gives a nice "eye"-icon that lets the user toggle password visibility on and off.

My question is if there is a way to use this functionality but start with password visible?

My xml:

<android.support.design.widget.TextInputLayout
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:passwordToggleEnabled="true">

                    <EditText
                        android:id="@+id/password_edit"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/prompt_password"
                        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

The toggle looks similar to this: enter image description here

I have not found a way to do this in xml, and not a way to manually toggle the visibility after the view is rendered. If I set the input type of the EditText to textVisiblePassword, the toggle is not shown. If I do it in code using for instance mPasswordEditText.setTransformationMethod(null); the password is shown but the toggle is gone and the user can't hide the password again. I know I can do it all manually but just wondering if I can make it work with the new magic toggle

Upvotes: 11

Views: 17600

Answers (10)

Sava Stevanovic
Sava Stevanovic

Reputation: 1

You can add in your xml file in TextInputLayout passwordToggleEnabled="true" passwordToggleDrawable=""@drawable/show_password_selector"

and make your show_password_selector.xml

this will look the same as the picture you sent

Upvotes: 0

Azizur Rehman
Azizur Rehman

Reputation: 2113

Just removing android:inputType="textPassword" worked for me

Upvotes: 2

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

With the Material Components Library (1.1.0 , 1.2.0-beta01, 1.3.0-alpha01) to start with a visible password just use:

<com.google.android.material.textfield.TextInputLayout
    app:endIconMode="password_toggle"
/>

and in your code:

textInputLayout.getEditText().setTransformationMethod(null);

If you want to return to the default behavior:

textInputLayout.getEditText()
    .setTransformationMethod(PasswordTransformationMethod.getInstance());

Upvotes: 2

oriohac
oriohac

Reputation: 337

To start with Password visible, Do not include

android:inputType="textPassword"

In

<com.google.android.material.textfield.TextInputEditText>
.... 

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

Upvotes: 0

Anisuzzaman Babla
Anisuzzaman Babla

Reputation: 7470

You can use the bellow code:

TextInputLayout yourTextInputLayoutId = findViewById(R.id.yourTextInputLayoutId);
FrameLayout frameLayout = (FrameLayout) (yourTextInputLayoutId).getChildAt(0);

CheckableImageButton checkableImageButton = (CheckableImageButton) frameLayout.getChildAt(1);
checkableImageButton.performClick();

Here yourTextInputLayoutId is your TextInputLayout id from xml.

Upvotes: 0

Nithesh
Nithesh

Reputation: 204

try this

if (inputEditText.getTransformationMethod() == null) {
    inputEditText.setTransformationMethod(new PasswordTransformationMethod());
} else {
    inputEditText.setTransformationMethod(null);
}


inputEditText.setSelection(inputEditText.getText().length());

Upvotes: 0

Pankaj Kumar
Pankaj Kumar

Reputation: 82938

Easiest way is below Another solution is at last of this answer 

private void setupPasswordToggleView() {
    final TextInputLayout textInputLayout = mRootView.findViewById(R.id.password);

    // You can skip post-call and write directly the code which is inside run method.
    // But to be safe (as toggle-view is child of TextInputLayout, post call
    // has been added.
    textInputLayout.post(new Runnable() {
        @Override
        public void run() {
            CheckableImageButton passwordToggleView = textInputLayout.findViewById(R.id.text_input_password_toggle);
            // passwordToggleView.toggle(); // Can not use as restricted to use same library group
            // passwordToggleView.setChecked(true); // Can not use as restricted to use same library group
            passwordToggleView.performClick();
        }
    });
}

Now let me explain the answer

While looking into code of TextInputLayout.java I found that, there is a layout design_text_input_password_icon.xml which is being added to TextInputLayout.java. Below is that code 

private void updatePasswordToggleView() {
    if (mEditText == null) {
        // If there is no EditText, there is nothing to update
        return;
    }
    if (shouldShowPasswordIcon()) {
        if (mPasswordToggleView == null) {
            mPasswordToggleView = (CheckableImageButton) LayoutInflater.from(getContext())
                    .inflate(R.layout.design_text_input_password_icon, mInputFrame, false);
            mPasswordToggleView.setImageDrawable(mPasswordToggleDrawable);
            mPasswordToggleView.setContentDescription(mPasswordToggleContentDesc);
            mInputFrame.addView(mPasswordToggleView); // << HERE IS THAT
            .........
}

Now next target was to find design_text_input_password_icon.xml and lookup id of the toggle view. So found the layout design_text_input_password_icon.xml here and it has written as

18<android.support.design.widget.CheckableImageButton
19    xmlns:android="http://schemas.android.com/apk/res/android"
20    android:id="@+id/text_input_password_toggle"
21    android:layout_width="wrap_content"
22    android:layout_height="wrap_content"
23    android:layout_gravity="center_vertical|end|right"
24    android:background="?attr/selectableItemBackgroundBorderless"
25    android:minHeight="48dp"
26    android:minWidth="48dp"/>

I found the id text_input_password_toggle of that view and now everything was easy to just find that view in it's viewgroup and perform action on that.

Another solution would be to iterate childs of TextInputLayout and check if it is CheckableImageButton and then perform click on it. By this way there would not be dependancy on id of that view and if Android changes the id of view, our solution will still work. (Although they do not change id of a view in normal cases).

private void setupPasswordToggleViewMethod2() {
    final TextInputLayout textInputLayout = mRootView.findViewById(R.id.password);

    textInputLayout.post(new Runnable() {
        @Override
        public void run() {

            View toggleView = findViewByClassReference(textInputLayout, CheckableImageButton.class);
            if (toggleView != null) {
                toggleView.performClick();
            }
        }
    });
}

Where findViewByClassReference(View rootView, Class<T> clazz) original utility class is defined as below 

public static <T extends View> T findViewByClassReference(View rootView, Class<T> clazz) {
    if(clazz.isInstance(rootView)) {
        return clazz.cast(rootView);
    }
    if(rootView instanceof ViewGroup) {
        ViewGroup viewGroup = (ViewGroup) rootView;
        for(int i = 0; i < viewGroup.getChildCount(); i++) {
            View child = viewGroup.getChildAt(i);
            T match = findViewByClassReference(child, clazz);
            if(match != null) {
                return match;
            }
        }
    }
    return null;
}

Upvotes: 5

Tyler V
Tyler V

Reputation: 10910

I was able to get it to start in clear-text mode with the following bit of code. Basically, I had to find the right View using the content description.

If they provided a setter method for mPasswordToggledVisibility that would make things a lot easier...

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

    TextInputLayout til = findViewById(R.id.password);
    CharSequence cs = til.getPasswordVisibilityToggleContentDescription();
    ArrayList<View> ov = new ArrayList<>();
    til.findViewsWithText(ov, cs,View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
    if( ov.size() == 1 ) {
        Checkable c = (Checkable)ov.get(0);
        // As far as I can tell the check for "isChecked" here isn't needed,
        // since it always starts unchecked by default. However, if you
        // wanted to check for state, you could do it this way.
        if( c != null && !c.isChecked()) {
            ov.get(0).performClick();
        }
    }
}

Upvotes: 0

Cheok Yan Cheng
Cheok Yan Cheng

Reputation: 42642

One of the ways is, we can search CheckableImageButton from TextInputLayout, and then programmatically perform onClick on it, based on the password visibility status of EditText.

Here's the code snippet.

private CheckableImageButton findCheckableImageButton(View view) {
    if (view instanceof CheckableImageButton) {
        return (CheckableImageButton)view;
    }

    if (view instanceof ViewGroup) {
        ViewGroup viewGroup = (ViewGroup) view;
        for (int i = 0, ei = viewGroup.getChildCount(); i < ei; i++) {
            CheckableImageButton checkableImageButton = findCheckableImageButton(viewGroup.getChildAt(i));
            if (checkableImageButton != null) {
                return checkableImageButton;
            }
        }
    }

    return null;
}

//...

if (passwordEditText.getTransformationMethod() != null) {
    CheckableImageButton checkableImageButton = findCheckableImageButton(passwordTextInputLayout);
    if (checkableImageButton != null) {
        // Make password visible.
        checkableImageButton.performClick();
    }
}

Upvotes: 0

Sejal Baraiya
Sejal Baraiya

Reputation: 238

You can use: 

yourEditText.setTransformationMethod(new PasswordTransformationMethod());

To re-show the readable password, just pass null as transformation method:

yourEditText.setTransformationMethod(null);

so user can hide it again.

Upvotes: -1

Related Questions