TextInputLayout passwordToggle with rounded corners

Question

I'm using TextInputLayout from android design library version 25.1.1. With the following code:

<android.support.design.widget.TextInputLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:local="http://schemas.android.com/apk/res-auto"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  local:passwordToggleEnabled="true"
  local:hintEnabled="false">
  <android.support.design.widget.TextInputEditText
    android:id="@+id/confirmationEditText"
    android:singleLine="true" />
</android.support.design.widget.TextInputLayout>

But when password toggle icon is pressed, its ripple effect is drawn above the background of TextInput:

How can I set rounded corners radius for passwordToggle? Can I reference its existing background and "wrap" it with needed properties (how to find Path for default drawable that is used by toggle)?

score 53 · Answer 1 · answered Sep 07 '19 at 22:18

Just use the Material Components library and the standard TextInputLayout component.

Add the app:boxCornerRadiusBottomEnd="xxdp", app:boxCornerRadiusTopEnd="xxdp", app:boxCornerRadiusBottomStart="xxdp", app:boxCornerRadiusTopStart="xxdp" attributes.

Something like:

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:endIconMode="password_toggle"
        app:boxCornerRadiusBottomEnd="8dp"
        app:boxCornerRadiusTopEnd="8dp"
        app:boxCornerRadiusBottomStart="8dp"
        app:boxCornerRadiusTopStart="8dp"
        ...>

Otherwise you can define a custom style and use the shapeAppearanceOverlay attribute:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/custom_end_icon"
        android:hint="Hint text"
        style="@style/OutlinedRoundedBox"
        ...>

with:

  <style name="OutlinedRoundedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
  </style>

loved the custom style work. i'm also looking to add some some shadow to the box but no luck. can you help me with that too? Thanks :) — Attique Ur Rehman, May 21 '21 at 07:10

score 9 · Accepted Answer · answered Mar 06 '17 at 11:01

I tried to implement on fresh project to understand your scenario .

Please take a look into solution.I have attached screenshot of how it will look.

You have to include drawable in drawable folder and set it into background of TextInputEditText

round_corner_toggle.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:left="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#d8d8d8" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#ecf0f1" />
            <corners android:radius="5dp" />

        </shape>
    </item>
</layer-list>

Content for TextInputLayout

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:counterEnabled="true"
                app:counterMaxLength="8"
                android:background="#FFFFFF"
                app:passwordToggleEnabled="true"
                app:passwordToggleTint="@color/colorPrimary">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/tietPassword"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Password"
                    android:background="@drawable/round_corner_toggle"
                    android:inputType="textPassword"
                    android:padding="@dimen/activity_horizontal_margin"
                    android:maxLength="8" />
            </android.support.design.widget.TextInputLayout>
    </LinearLayout>

score 6 · Answer 3 · answered Dec 04 '18 at 09:46

6

I know its been a while, but adding this to your TextInputLayout works:

 app:boxCornerRadiusBottomEnd="20dp"
 app:boxCornerRadiusBottomStart="20dp"
 app:boxCornerRadiusTopEnd="20dp"
 app:boxCornerRadiusTopStart="20dp"

answered Dec 04 '18 at 09:46

Zee

1,592
12
26

score 1 · Answer 4 · answered Mar 06 '17 at 09:36

Use Custom Shape for this:

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
         <gradient
            android:endColor="@color/something"
            android:centerColor="@color/something_else"
            android:startColor="@color/something_else_still"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>

TextInputLayout passwordToggle with rounded corners

4 Answers4

Linked