Android：使用隐藏/显示密码设计密码输入答案

【问题标题】：Android: Design Password Input with Hide/Show PasswordAndroid：使用隐藏/显示密码设计密码输入
【发布时间】：2021-04-17 12:51:56
【问题描述】：

我正在尝试设计密码文本输入法

How it should look like

和How does it look like.

当我单击并聚焦TextInputEditText 时遇到问题，它会将背景更改为透明（失去蓝色并且颜色更改为页面颜色）并且无法消除文本和图标部分之间的白线。请问有谁知道解决办法吗？

附上代码：

<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>

【问题讨论】：

标签： android android-layout material-components

【解决方案1】：

您可以在 xml 中的 TextInputLayout 上使用 app:passwordToggleEnabled="true"，它将具有相同的行为和图标。您必须从 TextInputLayout 中删除所有与 endIcon 相关的属性才能使其正常工作。

您可以从以下链接获得更多帮助，使您的盒子与设计相同： https://material.io/components/text-fields/android#outlined-text-field

在您的情况下，您必须使用 app:boxStrokeColor 和 app:boxStrokeWidth

【讨论】：