CODEWITHSUNDEEP
androidandroid-layoutkotlinmaterial-components-androidandroid-textinputlayout
Cameron
Cameron

Reputation: 1581

TextInputEditText hint is covered by box outline

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: enter image description here

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>

Upvotes: 4

Views: 1405

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

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

enter image description here

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>

enter image description here

Upvotes: 2

Son Huynh
Son Huynh

Reputation: 939

You are placing android:hint="@string/title" attribute in com.google.android.material.textfield.TextInputEditText.

The android:hint="@string/title" should be placed in com.google.android.material.textfield.TextInputLayout

<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"
        android:hint="@string/title"
        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:inputType="textCapWords" />

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

Upvotes: 0

Related Questions