Android - TextInputLayout doesn't wrap hint of TextInputEditText

user_4910764 0
Viewed 4792

I have a simple TextInputEditText nested in TextTnputLayout.

I am trying to make the of TIL to be as long as the hint given in TIET.

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

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="This is a hint"/>

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

But the problem is, it doesn't show anything Nothing

I have to set TIL's width to match_parent or just any other width other than wrap_content. But I want to the width to be dynamic as in, the width of TIL follows the length of the hint provided. Is it possible? If yes, how to do that?

I am using support library version 26.0.2 btw.

Yvette Colomb's answer is close, the TIL wraps the TIET but the fancy animation doesn't work there. It might be because the animation won't start if hints are set in execution?

android-textinputlayout android
6 Answers

You can do so, by setting the hint in the java code.

Remove the hint from the xml:

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

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

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

Declare and initialise the TextInputEditText in the activity and set the hint.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final TextInputEditText inputTxt = (TextInputEditText) findViewById(R.id.inputTxt);
    inputTxt.setHint("This is a hint");
}

enter image description here

This will wrap the text to the width of the hint as you type (not saying this is how it goes for all devices)

enter image description here

Then expand the width when you've entered the text.

enter image description here

To answer your updated question.

How to make the input layout grow as we enter input.

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

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

The Java. 

final TextInputEditText inputTxt = (TextInputEditText) findViewById(R.id.inputTxt);
inputTxt.setHint("This is a hint");
final TextInputLayout txtInputL = (TextInputLayout) findViewById(R.id.txtInputL);
txtInputL.setMinimumWidth(300);
txtInputL.setHint("This is a hint");

I've added a floating hint:

enter image description here

As we're typing:

enter image description here

If you have any other questions about this, please ask a new question.

Admin1

You can achieve this from xml instead, just set the hint for both TextInputLayout and TextInputEdittext and it will work then to make the TextInputEdittext grow as you are typing you have to set the it maxlines="1" and the layout_height to wrap_content as below

 <android.support.design.widget.TextInputLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="This is edittext">

            <android.support.design.widget.TextInputEditText
                android:hint="This is edittext
                android:maxLines="1"
                android:inputType="numberDecimal"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

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

I hope this help someone
user_78779500

Try this:

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

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/edt_gift_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="This is hint." />
            </android.support.design.widget.TextInputLayout>
user_60214690

I found a type of workaround, for me I wanted to show Country Code in a disabled Material Design styled EditText, but same as you I was unable to use the wrap_context inside TextInputLayout.

So as a workaround I added the hint text in both TextInputLayout and TextInputEditText, and since I had a predefined text inside the TextInputEditText, the hint of TextInputEditText never appeared on screen, but made space for the hint of TextInputLayout to be visible.

Here is what I did...

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp">
    ...
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/country_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Country code"
        app:hintTextColor="#737373"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+91"
            android:hint="Country Code"
            android:enabled="false"
            android:textColor="#737373"
            .../>

    </com.google.android.material.textfield.TextInputLayout>
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

P.S. You might want to add a few more characters in the TextInputEditText hint, as that is what is controlling the spacing. Also the constraint layout is there just because I had other elements in the activity, you can avoid it and use any of your root view.

Screenshot

enter image description here

user_64603970

set your xml like so:

<com.google.android.material.textfield.TextInputLayout
     android:id="@+id/text_field_layout"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="15sp">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/input_text_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        />

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

Now, adjust the size of the input_text_field to be BY THE SIZE OF THE HINT, depending on the hint size, like so:

val tf = input_text_field
val layout = text_field_layout
val hint = "Hint"

val measureText = tf.paint.measureText(hint).toInt()
tf.width = tf.paddingLeft + tf.paddingRight + measureText.toInt()
layout.hint = hint
user_40363900

Try doing this.

 <android.support.design.widget.TextInputEditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="This is a hint"/>
user_66429270
Related