Material3 styled TextInputLayout Outlined Shape - app:endIconMode causes issue with app:boxBackgroundMode="outline"

[JalalJanKhan3336]

Description: Hi guys! I need help regarding Material3 styling. I'm basically designing an outlined TextInputLayout - Password field. I'm facing a problem and that is when I apply endIconMode=password_toggle then it shows white color over outlined field right side.

Did anyone face such an issue? Thanks in Advance!

Screenshot -> https://ibb.co/XJtMqNM

[paulfthomas]

Hi @JalalJanKhan3336,

Could you please share a code sample?

Thanks!

[JalalJanKhan3336]

Thanks for consideration and Here's the code snippet for Password field

`<com.google.android.material.textfield.TextInputLayout android:id="@+id/tilPassword" android:hint="@string/password" style="@style/Style_InputLayout" app:endIconMode="password_toggle" app:endIconCheckable="true" app:endIconTintMode="src_atop" app:endIconDrawable="@drawable/selector_toggle_password" app:layout_constraintTop_toBottomOf="@id/tilEmail" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:drawablePadding="8dp"
        android:text="@string/password"
        android:inputType="text"
        android:textAppearance="@style/TextAppearance.Material3.BodyLarge"
        app:drawableStartCompat="@drawable/ic_security"
        app:drawableTint="@color/colorPrimaryDark" />

</com.google.android.material.textfield.TextInputLayout>`

Here's the custom style i.e. Style_InputLayout

`<style name="Style_InputLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="boxStrokeColor">@color/colorPrimaryDark</item>
    <item name="boxBackgroundColor">@android:color/white</item>
    <item name="boxBackgroundMode">outline</item>
    <item name="boxCornerRadiusTopEnd">@dimen/_6sdp</item>
    <item name="boxCornerRadiusTopStart">@dimen/_6sdp</item>
    <item name="boxCornerRadiusBottomEnd">@dimen/_6sdp</item>
    <item name="boxCornerRadiusBottomStart">@dimen/_6sdp</item>
    <item name="errorEnabled">true</item>
    <item name="errorTextColor">@color/colorRed</item>
    <item name="errorTextAppearance">@style/TextAppearance.Material3.BodySmall</item>
    <item name="hintTextAppearance">@style/TextAppearance.Material3.LabelMedium</item>
    <item name="hintEnabled">true</item>
    <item name="hintTextColor">@color/colorPrimaryDark</item>
</style>`

I tried to play with it a little and found out that outline is causing issue with TextInputLayout attribute app:endIconMode="password_toggle".

[drchen]

I'm not able to reproduce the issue. Is this still happening?

[leticiarossi]

Closing due to lack of updates, if issue is still happening in the latest version of the library feel free to reopen!