androidandroid-layoutandroid-edittextandroid-textinputlayouttextinputlayout

Android TextInputLayout hint overlaps EditText hint


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


Solution

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

    enter image description here.