Android TextInputLayout hint overlaps EditText hint

Question

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>

Karlow

Remove hint from AppCompatEditText – Dian

Remove hint from either AppcompatEditText or TextInputLayout. One which you will keep there will populate as your hint. – Patmos

@PallaviTapkir, that would work but as a requirement I need both hints to be there, and one of them should hide when focus moves. Or if there is any way the "label" should not move down – Karlow

Answer 1

As i know, we can't do as your wish.

Because, TextInputLayout is designed to float the hint once it gets focused So, once it went up nothing will be there in the place holder. We can do your requirement with slight changes as below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.stackoverflow.MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:text="Label"
        android:textColor="@color/colorPrimary" />

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:paddingLeft="10dp"
        app:hintEnabled="false">

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:hint="Place Holder"
            />

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

</RelativeLayout>

.

Tijuana

it's not a solution – Coper

Answer 2

Now 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">

Montgolfier

Answer 3

Perfect One!!!

xml code

<android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayoutPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:hint="Phone Number">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/edtPhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="+91"
            android:inputType="phone" />
</android.support.design.widget.TextInputLayout>

Kotlin code

 edtPhone.hint=""
 edtPhone.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
        inputLayoutPhone.isHintEnabled = hasFocus
        if(hasFocus){
            edtPhone.hint="+91"
        }else{
            edtPhone.hint= "Phone Number"
        }
    }

Java code

edtPhone.setHint("");
    edtPhone.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean hasFocus) {
            if (hasFocus){
                edtPhone.setHint("+91");
            }else{
                edtPhone.setHint("Phone Number");
            }

        }
    });

Eyelet

Answer 4

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

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

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

Bohner

Answer 5

Use the code below. It should work fine.

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:textColorHint="@color/white">

            <EditText

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Placeholder"
                android:inputType="text"
                android:textColor="@color/white"
                android:textColorHint="@color/white" />
        </android.support.design.widget.TextInputLayout>

Infernal

Answer 6

Remove hint from either AppcompatEditText or TextInputLayout

use android:hint="" only in one either AppcompatEditText or TextInputLayout

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

    <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>

for more information check this link

Midyear

Answer 7

For me best solution which I found is answered in https://mcmap.net/q/515650/-android-edittext-with-different-floating-label-and-placeholder

Proustite

Answer 8

try to set hint separately for AppCompatEditText and TextInputLayout:

xml code:

<android.support.design.widget.TextInputLayout
            android:id="@+id/inputLayoutPhone"
        ...>

        <android.support.design.widget.TextInputEditText
            android:id="@+id/edtPhone"
            ... />
</android.support.design.widget.TextInputLayout>

Kotlin code:

inputLayoutPhone.setHint("Label")
edtPhone.setHint("Placeholder")

Glad