Reputation: 545

Different label and hint for TextInputLayout

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>

Upvotes: 37

Answers (6)

Maede Jalali

Reputation: 326

I tried setting the floating label using android:hint="@string/EMAIL". So for the hint inside the box, I used app:placeholderText="e.g. [email protected]".

To have a floating action button enabled all the time you have to use requestFocus().

Upvotes: 1

Gabriele Mariotti

Reputation: 363469

You can use these attribute:

android:hint: for the label

placeholderText: for the placeholder text inside the EditText

      <com.google.android.material.textfield.TextInputLayout
          android:id="@+id/phone_layout"
          android:layout_width="match_parent"
          android:hint="Phone Number"
          app:placeholderText="+6281342134"
          android:layout_height="wrap_content">

          <com.google.android.material.textfield.TextInputEditText
              android:id="@+id/phone"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:hint="+6281342134"
              android:inputType="phone" />

      </com.google.android.material.textfield.TextInputLayout>

If the placeholder should be displayed also when the text field is empty just add the expandedHintEnabled="false":

        <com.google.android.material.textfield.TextInputLayout
            app:expandedHintEnabled="false"

Note: the expandedHintEnabled requires at least the version 1.3.0-alpha03.

Upvotes: 23

ShortFuse

Reputation: 6804

Here's how I'm doing it without code (just XML), while allowing both a label and a placeholder at the same time, as in the Material Design guidelines.

Layout XML:

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="My Label Text">
  <android.support.design.widget.TextInputEditText
    android:id="@android:id/input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@drawable/hint_selector"
    android:hint="Placeholder Text"/>
</android.support.design.widget.TextInputLayout>

Color Selector XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" android:color="?android:textColorHint" />
  <item android:color="@android:color/transparent" />
</selector>

The key here is to just make it transparent by default, and only show the placeholder text when it has focus. No need to change color either, since this will respect any custom theme in place, as well as light and dark themes.

Upvotes: 30

starkej2

Reputation: 11509

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:

Upvotes: 52

Rehan

Reputation: 3285

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

Upvotes: 4

Robert

Reputation: 119

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

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

Upvotes: -4

Different label and hint for TextInputLayout

Answers (6)

Related Questions