TextInputEditText hint is covered by box outline

Question

I'm using TextInputEditTexts as text entry, and when I select them, the hint moves up as it should, but is covered by the outline of the box. Does anyone know why that would be happening?

Photo:

Code:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/title_layout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/grey"
        android:theme="@style/OutlinedEditText"
        app:boxStrokeColor="@color/blue"
        app:hintTextColor="@color/blue"
        app:layout_constraintTop_toBottomOf="@id/cover_art">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:hint="@string/title"
            android:inputType="textCapWords" />

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

Answer 1

Remove in the TextInputEditText

android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"

In this way you are adding a margin between the main container (TextInputLayout) and the EditText

Use:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/title_layout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="24dp"
        android:hint="...."
        ...
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:inputType="textCapWords" />

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