2 hints appearing when TextInputLayout is focused

Question

I am having some trouble with the TextInputLayout.

When the TextInputLayout is focused, I am seeing the hint text float above the text field and also stay on the text field. Attaching images:

And when I type stuff on the field, the text overlaps the hint on the text field.

This is the XML for my TextInputLayout

 <com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="32dp" android:id="@+id/email"
        android:hint="hint">

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

I am using the android material components library like so:

implementation 'com.google.android.material:material:1.0.0'

How do I get the hint TextInputLayout to hide when it is focused on has text on it?

Here is the complete layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/login"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.login.login.LoginFragment">
<ImageView
        android:layout_width="279dp"
        android:layout_height="289dp"
        android:src="@drawable/react"
        android:id="@+id/imageView" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
        android:layout_marginTop="24dp" app:layout_constraintTop_toTopOf="parent"
        android:contentDescription="@string/vitrix_logo"/>
<com.google.android.material.button.MaterialButton
        android:text="@string/login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/loginButton"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="32dp" android:contentDescription="@string/click_to_login_to_the_app"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginBottom="16dp" app:layout_constraintBottom_toTopOf="@+id/createNewAccount"/>
<com.google.android.material.button.MaterialButton
        android:text="@string/create_account"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/createNewAccount"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="32dp" app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginBottom="32dp" app:layout_constraintBottom_toBottomOf="parent"/>
<com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="32dp" android:id="@+id/email"
        android:hint="hint">

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

The base activity layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity">


<fragment
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:navGraph="@navigation/navigation_graph" app:defaultNavHost="true"
        android:id="@+id/fragment" android:layout_marginStart="8dp"
        app:layout_constraintStart_toStartOf="parent" android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp" android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"/>

Are you sure you don't have two `TextInputLayout` setups overlapping? Is this possibly in a `Fragment`? — Mike M., May 10 '19 at 13:31
Yup, I have removed all other TextInputLayout from the layout. — DrkStr, May 10 '19 at 13:33
Nah, not just being in a `Fragment`. I would guess that you might have two overlapping `Fragment`s, though. The described behavior doesn't really seem possible with a single `TextInputLayout` setup. A quick way to test would be to set a solid background color on the `Fragment`'s layout. — Mike M., May 10 '19 at 13:38
I've added the complete layout. I am pretty sure I do not have overlapping fragments. — DrkStr, May 10 '19 at 13:41
You might try the quick test I edited my comment above to suggest. If you don't see the extra hint anymore when you do that, then I would have to say that you are somehow ending up with multiple `Fragment`s. — Mike M., May 10 '19 at 13:43
Your right. It looks like I have an extra fragment. How would did I end up with an extra fragment, this is the first screen of the app. :( — DrkStr, May 10 '19 at 14:44
Not sure. There are several different ways for that to happen. One common mistake is to have a `` element in the layout, and then dynamically loading that same `Fragment` again in code. The `` element is already causing that `Fragment` to be loaded automatically by the framework. That's just one way, though. I only mention it because it's the one I most often see. We'd need more info to be certain of what's happening. — Mike M., May 10 '19 at 14:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193148/discussion-between-drkstr-and-mike-m). — DrkStr, May 10 '19 at 14:49

score 0 · Answer 1 · answered May 10 '19 at 13:26

0

Best way to achieve the result you expect:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Full name">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/etFullName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.TextInputLayout>

answered May 10 '19 at 13:26

Henrique Monte

1,272
1
15
22

Hey, thanks for the reply. I tried putting the hint on the parent TextInputLayout, no luck. I am still getting the same result :( – DrkStr May 10 '19 at 13:29
Did you remove the hint in TextInputEditText? – Henrique Monte May 10 '19 at 13:30
Yup, ive removed the other hint. – DrkStr May 10 '19 at 13:38
Can you use the layout by android.support.design.widget.TextInputLayout intead of com.google.android.material.textfield.TextInputLayout? Like my example. – Henrique Monte May 10 '19 at 13:42

score 0 · Answer 2 · answered May 10 '19 at 13:44

0

Try using android.support.design.widget.TextInputLayout intead of com.google.android.material.textfield.TextInputLayout.

answered May 10 '19 at 13:44

Henrique Monte

1,272
1
15
22

score 0 · Answer 3 · answered May 10 '19 at 13:59

try this,

  <android.support.design.widget.TextInputLayout
    android:id="@+id/input_mobnumber_box"
    android:layout_width="320dp"
    android:layout_gravity="center"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/input_mobnumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-light"
        android:hint="Mobile Number" />

</android.support.design.widget.TextInputLayout>

score 0 · Accepted Answer · answered May 15 '19 at 09:19

Turns out I was just loading the fragment twice.

I was loading in the Fragment once using navigation components and a second time from the main activity auto-generated boilerplate code you get when you use an Activity + Fragment template.

To solve the issue, just remove the FragmentTrancaction.replace from your main activity and let the Nav Component load up the fragment for you.

2 hints appearing when TextInputLayout is focused

4 Answers4