Android TextInputLayout hint overlapping EditText's background

Question

I have a typical TextInputLayout/TextInputEditText combination with a custom drawable as the EditText background:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/cvvContainer"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:expandedHintEnabled="false"
                    android:hint="@string/mango_add_card_cvv_title">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/cvv"
                        style="@style/EditTextStyle"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:imeOptions="actionDone"
                        android:inputType="number"
                        android:text="@={viewModel.cardCvv}" />
                </com.google.android.material.textfield.TextInputLayout>

<style name="EditTextStyle" parent="ComehomeTheme">
        <item name="android:background">@drawable/edit_text_background</item>
        <item name="android:padding">10dp</item>
        <item name="android:textColorHint">@color/text_L3</item>
        <item name="placeholderTextAppearance">@style/TypographyCaptionMRegular</item>
        <item name="fontFamily">@font/poppins_regular</item>
        <item name="android:textColor">@color/text_L2</item>
        <item name="android:textSize">16sp</item>
    </style>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/input_background" />
    <corners android:radius="4dp" />
    <stroke
        android:width="1dp"
        android:color="@color/neutral_300" />
</shape>

as you can see below, the hint barely overlaps the background of the EditText. Is there any way to avoid this?

I tried adding a margin to the EditText, setting the hint's textAppearance so it has paddings or lineMultiplier and other things to no avail.

anything I can do to avoid making a custom layout?

Answer 1

I had to extend TextInputLayout and manually look for the correct view to add some margin:

class MyTextInputLayout constructor(
    context: Context, attrs: AttributeSet? = null
) : TextInputLayout(context, attrs) {

    override fun onFinishInflate() {
        super.onFinishInflate()
        

        children.mapNotNull { it as? FrameLayout }.firstOrNull()?.let {
            children.mapNotNull { it as? FrameLayout }.firstOrNull()?.let { layout ->
                (layout.layoutParams as? LayoutParams)?.let {
                    if (it.topMargin != 20.toPx) {
                        val parms = it
                        it.topMargin = 20.toPx
                        layout.layoutParams = parms
                    }

                }
            }
        }
    }
}