Android TextInputLayout hint overlaps EditText hint

Himanshu Chhabra picture Himanshu Chhabra · Aug 2, 2017 · Viewed 10.5k times · Source

I am facing a weird issue, I have a InputTextLayout and an EditText in it, and I am trying to achieve something like this (shown in image below) (Image from material design guidlines: https://material.io/guidelines/components/text-fields.html#text-fields-layout), where there are two separate hints. I am doing this by adding android:hint to both layouts. This works fine, but when the focus moves away from this, the "label" moves down and overlaps the "placeholder" text. (Only when the user has not given any input and the edit text is empty - both hints overlap). Any pointers on how to fix this?

As a requirement I need both hints to be there, and the "Label" should not move down on focus change. Both hints should remain in their position

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

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Placeholder"
            android:inputType="textCapWords"
            />

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

enter image description here

Answer

Aegir picture Aegir · Jan 17, 2020

enter image description hereNow the material components (alpha03) have support for placeholder text:

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.2.0-alpha03'
    // ...
  }

  <com.google.android.material.textfield.TextInputLayout
      ...
      app:placeholderText="Placeholder text">