I'm trying to add a second endIcon to Material TextInputLayout like so:
But feels like it's almost impossible, I've already tried this solution but it's not working (at least for me).
Right now I've just a simple TextInputLayout with only one icon (toggle password), and I've no idea how to add a second one like at the screenshot above.
Do you have and advices?
Thanks:)
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed_password_label"
app:endIconMode="password_toggle"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
I am using databinding together with the TextInputLayout/TextInputEditText combo as shown in the xml.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/lastname_input_layout"
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:endIconMode="clear_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/firstname_input_layout"
app:visible="#{viewModel.showFields}">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/lastname_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lastname"
android:inputType="textCapWords"
android:text="#={viewModel.lastName}"
android:textAppearance="#style/TextAppearance.Input" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/email_input_layout"
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:endIconMode="clear_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lastname_input_layout"
app:visible="#{viewModel.showFields}">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/email_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#{viewModel.watchMediaTextHint}"
android:inputType="#{viewModel.watchMediaInputType}"
android:text="#={viewModel.mediaText}"
android:textAppearance="#style/TextAppearance.Input" />
</com.google.android.material.textfield.TextInputLayout>
As you can see, both fields are theoretically the same, the only difference is that one of them has the hint text given with a string resource, the other one with a databinding. Both have the same style, text appearance and so on, yet, the hint on the TextInputEditText using the databinding has different color. Also, when the view gets focus, the label doesn't animate up, as it does with the first field.
Setting the hint with a string resource gets this behavior to go back to normal, any ideas on why is this anomaly happening? I would prefer to solve this with a databinding rather than a programmatic solution.
Thanks.
The hint attribute only works in combination with databinding, if it is set to <TextInputLayout> instead of <TextInputEditText>.
The <TextInputEditText>s hint attribute is only applied once during inflation and thereby will not be updated/applied when used in combination with databinding.
Heads up for #Mike M.'s comment. I converted it as an answer, in order to be found more easily by others.
I need to use "errorValidation" and "hint" in TextInputLayout.
I want to fixed hint in TextInputLayout that it does not go to the label of my TextInputLayout.
Actually, I want the hint to be as a label at first.
in other words:
I use the hint as TextView for the label of TextInputLayout but the problem is too much margin !!!
how can I handle this?
the attached picture define how I use TextView for the label of TextInputLayout.
the code I used:
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_label_previous_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar_change_password"
android:layout_marginTop="#dimen/spacing_5x"
android:layout_marginStart="#dimen/spacing_3x"
android:text="#string/label_previous_password"
style="#style/TextHintYekanRegularHintColor16" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_previous_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tv_label_previous_password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginStart="#dimen/spacing_3x"
android:layout_marginEnd="#dimen/spacing_3x"
style="#style/TextInputLayoutAppearance" >
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_previous_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TextYekanRegularColorPurpleOne16"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
You can solve margin problem of TextInputLayout with two tricks. You have used one trick that use a normal EditText instead of hint. Then you must set
app:hintEnabled="false"
to remove the margin on top of your TextInputLayout.
Second trick is that you should enable error for TextInputLayout in your fragment or activity instead of the layout file. This will remove the margin in the bottom of TextInputLayout. And when error is gone you should disable error for TextInputLayout. This code will do the trick for you:
your_text_input_layout.isErrorEnabled = true // to enable the error
your_text_input_layout.isErrorEnabled = false // to disable the error
I'm using an EditText with a drawable as background and a TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:hintEnabled="false">
<EditText
android:id="#+id/input_edittext"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#drawable/input_border"
android:textColor="#color/black"
android:textColorHint="#color/gray" />
</android.support.design.widget.TextInputLayout>
Every time there an error it looks like the error was clear
But when I touch the EditText (doesn't change the focus of the editText) again all the EditText becomes red
For setting the error and clear in the TextInputLayout I'm using
input_layout.setError(getResources().getString(id));
input_edittext.getBackground().clearColorFilter();
Do you have any idea how to solve it? When we don't use the background, it doesn't happen
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
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?
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");
}
This will wrap the text to the width of the hint as you type (not saying this is how it goes for all devices)
Then expand the width when you've entered the text.
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:
As we're typing:
If you have any other questions about this, please ask a new question.
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
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>
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
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
Try doing this.
<android.support.design.widget.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="This is a hint"/>