[英]Android: Design Password Input with Hide/Show Password
I am trying to design Password Text Input我正在尝试设计密码文本输入
How it should look like它应该是什么样子
and How does it look like.它看起来如何。
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.当我单击并聚焦
TextInputEditText
时遇到问题,它将背景更改为透明(失去蓝色并且颜色更改为页面颜色)并且无法摆脱文本和图标部分之间的白线。 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: 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>
You can use app:passwordToggleEnabled="true"
on TextInputLayout
in your xml, it will have same behaviour and icon.您可以在 xml 中的
TextInputLayout
上使用app:passwordToggleEnabled="true"
,它将具有相同的行为和图标。 You have to remove all endIcon
related attributes from TextInputLayout
for this to work.您必须从
TextInputLayout
中删除所有与endIcon
相关的属性才能使其正常工作。
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您可以从以下链接获得更多帮助,使您的盒子与设计相同: https://material.io/components/text-fields/android#outlined-text-field
You have to use app:boxStrokeColor
and app:boxStrokeWidth
in your case你必须在你的情况下使用
app:boxStrokeColor
和app:boxStrokeWidth
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.