TextInputLayout의 password visibility toggle을 시도했습니다.

Android support library 24.2.0부터 TextInputLayout에 추가 된 password visibility toggle을 시도했습니다.

시도한 샘플 코드는 Github에 있습니다.

password visibility toggle은 무엇입니까? ?

간단히 설명하면 패스워드를 입력 할 때 입력하고있는 내용을 toggle로 표시 · 숨기기로 전환하면

Material Design의 문서에 자세하게 써 있기 때문에, 그것을 보면 「아ー 이것인가―」가 될 것.

그래서 지금까지 이와 비슷한 것을 구현한 적이 있는 사람이라면 알겠지만, 지금까지 독자적인 방법으로 구현할 수밖에 없었던 것이다.

그 구현이 support library 24.2.0부터 TextInputLayout에 도입되었다는 것. 기뻐요☺

안녕, 자체 구현 ... 😇

TextInputLayout에서 password visibility toggle을 사용하는 방법

기본은 매우 간단합니다.

아래와 같은 느낌으로 TextInputLayout의 아이 View의 EditText에 android:inputType="textPassword" 를 지정하는 것만으로, 디폴트 password visibility toggle가 나옵니다.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="textPassword"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

이런 느낌으로 움직입니다! 간단하네요! !



password visibility toggle을 내고 싶지 않으면 TextInputLayout에 app:passwordToggleEnabled="false"를 추가하면 나오지 않습니다.

inputType의 xxxPassword 모든 것을 시도했습니다.

아래와 같은 느낌으로 inputType의 xxxPassword 모두 시험해 보겠습니다. (길기 때문에 layout_width와 layout_height 생략했습니다.

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

    <EditText
        android:hint="textPassword"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

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

    <EditText
        android:hint="numberPassword"
        android:inputType="numberPassword" />
</android.support.design.widget.TextInputLayout>

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

    <EditText
        android:hint="textVisiblePassword"
        android:inputType="textVisiblePassword" />
</android.support.design.widget.TextInputLayout>

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

    <EditText
        android:hint="textWebPassword"
        android:inputType="textWebPassword" />
</android.support.design.widget.TextInputLayout>

hint에 나오는 값이 각 EditText의 inputType으로 설정됩니다.


android:inputType="textVisiblePassword" 를 설정하고 있는 것은 password visibility toggle가 나오지 않네요. 당연?

passwordToggleDrawable에서 아이콘 변경

기본 눈 아이콘은 passwordToggleDrawable 속성으로 바뀝니다.

샘플 코드에서는 Vector의 드로이드 군으로 아이콘을 변경하고 있습니다 (기본 눈 아이콘도 Vector입니다.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleDrawable="@drawable/ic_android_black_24dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="passwordToggleDrawable"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

변경하면 아래와 같은 느낌으로 아이콘이 바뀝니다.

XML의 속성뿐만 아니라 메소드도 제대로 있습니다.

이번 샘플 코드에서는 모두 XML의 속성으로 지정하고 있습니다만, 제대로 속성과 매치 하고 있는 메소드도 준비되어 있습니다.

자세한 내용은 TextInputLayout 문서를 살펴보십시오.

이번에는 사용하지 않았습니다만 속성도 그 밖에 passwordToggleTint 이나 passwordToggleTintMode 가 있습니다.

자신의 앱의 디자인에 맞게 커스터마이즈하면 좋을 것 같네요.

요약

기본 디자인으로 좋다면 TextInputLayout에서 password visibility toggle을 사용하는 것은 매우 간단했습니다.

support library로 이런 것이 늘어나는 것은 독자적으로 구현하는 부분이 줄어들기 때문에 매우 도움이 되네요