android theme Different label and hint for TextInputLayout




textinputlayout set hint programmatically (4)

I want to make a EditTextLayout, but I want a different text for label and hint.

For example : The label's text is "Phone Number", and the hint text is "+6281342134".

Is it possible?

My code is:

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

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

You can simply do it by this way:

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

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

But this will result overlapping of both hints i.e. Phone Number and +6281342134. So you need to implement OnFocusChangeListener for this. (Not so good solution but it'll work for you).

In your layout, add hint to TextInputLayout only. I have set hintAnimationEnabled to false because I think the animation might won't look smooth with different hints.

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number"
    app:hintAnimationEnabled="false">

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

In your java file, create OnFocusChangeListener:

private View.OnFocusChangeListener onPhoneNumberFocusChangeListener = new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            ((EditText)v).setHint("+6281342134");
        } else {
            ((EditText)v).setHint("");
        }
    }
};

and set it to your EditText

phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);

If you want label and hint to be within EditText , you may set these properties to EditText

android:label="Phone Number"
android:hint="+6281342134"

But , if you want label to be displayed as some other text container, you may use the following view heirarchy.

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/phoneLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textSize="22sp" 
            andrioid:text="phone number"/>

       <EditText
            android:id="@+id/phoneText"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:textSize="22sp"
            android:hint="+6281342134" />

    </LinearLayout>

Go into the xml text editting mode and add this to the edittext:

android:label="Phone Number"
android:hint="+6281342134"

I took a similar approach to Rehan

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

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            inputLayout.setHint("We did it!");
        } else {
            inputLayout.setHint("Testing 123");
        }
    }
});

The animation was good enough for me without disabling the animation:





android-textinputlayout