Android TextInputLayout hint overlaps EditText hint
I am facing a strange problem, I have an InputTextLayout and an EditText and I am trying to achieve something similar (shown in the image below) (Image from material design guides: https://material.io/guidelines/components/text-fields .html # text-fields-layout ) where there are two different tooltips, I do this by adding android: tooltip 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 did not enter any data, and the text for editing is empty - both prompts overlap). Are there any pointers on how to fix this?
As a requirement, I need both hints and the "Label" should not go down when focus changes. Both clues must remain in place.
<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>
source to share
As far as I know, we cannot do as you please.
Because the TextInputLayout is meant to pop up the tooltip as soon as it is focused. So, once it rises, there will be nothing in the placeholder. We can fulfill your requirement with minor modifications as shown 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="Lable"
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>
...
source to share
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");
}
}
});
source to share
<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>
source to share
Use the below code. 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>
source to share
Remove the prompt from AppcompatEditText
orTextInputLayout
use in android:hint=""
only one or AppcompatEditText
orTextInputLayout
<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 info check this link
source to share
Try setting the 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")
source to share