Android: Design Password Input with Hide/Show Password

Question

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

Answer 1

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