Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

Android: Design Password Input with Hide/Show Password

I am trying to design Password Text Input

How it should look like

enter image description here

and How does it look like.

enter image description here

I have problem when I click and focus TextInputEditText it changes background to transparent (losing blue color and color changes to the page color) and cannot get rid of white line between text and icon part. Please does anyone knows the solution?

Code attached:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/layout_Password"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginRight="24dp"
        android:background="@color/blue25"
        android:hint="Enter your password"
        app:boxBackgroundMode="filled"
        app:boxBackgroundColor="@color/blue25"
        app:endIconTint="@null"
        app:endIconMode="password_toggle"
        android:textColorHint="@color/darkBlue"
        app:endIconDrawable="@drawable/ic_password_visibility"
        app:shapeAppearance="@style/Rounded">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_Password"
            style="@style/Text.NormalText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             android:inputType="textPassword"
            android:minHeight="60dp"
            android:text=""
            android:textColor="@color/darkBlue" />

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

ic_password_visibility:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/background"
    android:width="60dp"
    android:height="60dp"

    />
<item android:width="40dp"
      android:height="30dp"
       android:gravity="center" >
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/ic_password_visibility_off" android:state_checked="false" />
        <item android:drawable="@drawable/ic_password_visibility_on" />
    </selector>
</item>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can use app:passwordToggleEnabled="true" on TextInputLayout in your xml, it will have same behaviour and icon. You have to remove all endIcon related attributes from TextInputLayout for this to work.

You can get more help from below link to make you box same as design: https://material.io/components/text-fields/android#outlined-text-field

You have to use app:boxStrokeColor and app:boxStrokeWidth in your case


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

63 comments

56.5k users

...