Hint and User Input overlaying in a TextView

Viewed 94

I've never seen this happen before, and have no idea what is causing it, my first choice was to hide hint with a piece of java code within the fragment, but I failed so hard at in that now I just wanna find a XML solution. enter image description here

This is happening to every field, and I can't find anything wrong with the layout here, any insights?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="2dp"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_nome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_nome_contato"
            android:inputType="textPersonName"
            android:lines="1"
            android:padding="10dp"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_telefone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_telefone_contato"
            android:inputType="phone"
            android:lines="1"
            android:padding="10dip"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_email_contato"
            android:inputType="textEmailAddress"
            android:lines="1"
            android:padding="10dip"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_nome_empresa"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_empresa_contato"
            android:inputType="text"
            android:lines="1"
            android:padding="10dip"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_telefone_empresa"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_tel_empresa_contato"
            android:inputType="phone"
            android:lines="1"
            android:padding="10dip"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_matricula"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Digite sua matricula (Opcional)"
            android:inputType="number"
            android:lines="1"
            android:padding="10dip"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

    <sinapse.com.br.estilo.component.CustonSpinner
        android:id="@+id/faq_contato_spinner_assunto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:hintText="@string/title_spinner" />

    <EditText
        android:id="@+id/faq_contato_campo_mensagem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginEnd="2dp"
        android:layout_marginStart="2dp"
        android:gravity="center_horizontal|bottom"
        android:hint="@string/hint_areamensagem"
        android:inputType="textMultiLine" />

    <TextView
        android:id="@+id/faq_contato_numero_caracteres"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="@string/caracteres" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/faq_contato_btn_enviar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:layout_gravity="right"
        android:text="@string/enviar" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/faq_contato_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="13dp" />
</LinearLayout>
</ScrollView>
2 Answers

The problem is you setting a padding to your EditText, that's why the EditText components are not being given enough space to accommodate user's input without having to overlay with the hint. Simply get rid of paddings in your EditText components and it will run just fine. :)

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_telefone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_telefone_contato"
            android:inputType="phone"
            android:lines="1"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

If you DO NOT want your hint to float. (If you want your hint to completely disappear as soon as the user taps on the EditText box)

You can add app:hintEnabled="false" in your TextInputLayout. In this case, I think you can safely add your padding back on because the hint will disappear on user's tap.

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintEnabled="false">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/faq_contato_telefone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_telefone_contato"
            android:inputType="phone"
            android:lines="1"
            android:padding="10dp"
            android:textSize="15sp" />
    </com.google.android.material.textfield.TextInputLayout>

Try with the following code may be it will help you.

//Remove padding from edittext
//Try to set hint on TextInputLayout instead of EditText
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_nome_contato">

 <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/faq_contato_nome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:lines="1"
        android:textSize="15sp" />
    
</com.google.android.material.textfield.TextInputLayout>
Related