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