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.
Related
Below I have given the code, Here I was not able to understand the point of the line with code app:endIconCheckable, because whatever I set its value (True/False) it isn't showing and difference, Can anyone help me out in understanding and when should I use it when not?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginEnd="50dp"
android:hint="#string/foot"
app:counterEnabled="true"
app:counterMaxLength="10"
app:counterTextColor="#color/red_30k"
app:helperText="#string/required"
app:helperTextTextColor="#color/red_30k"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_launcher_background"
**app:endIconCheckable="false"**
app:errorEnabled="true"
app:layout_constraintBottom_toTopOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#id/editTextNumber"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="number"
android:maxLength="10" />
</com.google.android.material.textfield.TextInputLayout>
It does the same thing as setEndIconCheckable() called from Java/Kotlin:
Sets the current end icon to be checkable or not.
If the icon works just as a button and the fact that it's checked or not doesn't affect its behavior, such as the clear text end icon, calling this method is encouraged so that screen readers will not announce the icon's checked state.
I expect this to be used mostly if the drawable is a StateListDrawable and you have different artwork for the checked and normal states.
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>
Today I have just updated my dependencies of material design
from 1.0.0 to 1.1.0-alpha09
implementation 'com.google.android.material:material:1.1.0-alpha09'
Now i"m getting strange issue in com.google.android.material.textfield.TextInputLayout
Here is my Code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_10sdp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_enter_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"/>
</com.google.android.material.textfield.TextInputLayout>
after updating the dependencies I'm getting boxed design in my TextInputLayout
Output of above code
if i use implementation 'com.google.android.material:material:1.0.0' I'm getting expected result
Can anybody help me to solve this issue
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
UPDATE
I have already tried app:boxBackgroundMode="none" them I'm getting this
,
if i use app:boxBackgroundMode="outline" then getting this
SOLVED
No need to use boxBackgroundMode
You need to add #style/Widget.Design.TextInputLayout in your TextInputLayout
SAMPLE CODE
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_10sdp"
style="#style/Widget.Design.TextInputLayout"
app:errorTextAppearance="#style/error_appearance"
android:textColorHint="#android:color/white">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:id="#+id/emailTextInputEditText"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/white"
android:gravity="center"
android:hint="#string/hint_enter_email"
android:imeOptions="actionNext"
android:textColorHint="#android:color/white"
android:inputType="textEmailAddress"
android:textColor="#android:color/white"
android:textSize="#dimen/_15ssp"/>
</com.google.android.material.textfield.TextInputLayout>
OUTPUT
To revert back to old style with no filed background but only bottom border, one should use following style:
<com.google.android.material.textfield.TextInputLayout
...
style="#style/Widget.Design.TextInputLayout"
....
>
</com.google.android.material.textfield.TextInputLayout>
Using theme Widget.Design.TextInputLayout will generate expected output like below:
Using a material Theme the default style used by the TextInputLayout is #style/Widget.MaterialComponents.TextInputLayout.FilledBox
To obtain something similar just change the background color using the boxBackgroundColor attribute:
<style name="CustomFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxBackgroundColor">#myColor</item>
</style>
Also use the android:hint="#string/hint_enter_email" in the TextInputLayout not in the TextInputEditText
For me using #style/Widget.Design.TextInputLayout produced undesirable formatting results, specifically alignment issues with the editText box.
I used boxBackgroundMode set to none for awhile, and after updating material design in my project the error icon mentioned started showing. May be a bug (https://issuetracker.google.com/issues/122445449).
For now I'm still setting the boxBackgroundMode to none, and hiding the error icon by setting the color to transparent. This way I keep the material design.
app:boxBackgroundMode="none"
app:errorIconTint="#android:color/transparent"
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
app:boxBackgroundMode="none"
app:errorIconTint="#android:color/transparent"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/message_ellipsis"
android:inputType="textCapSentences|textMultiLine"
android:paddingTop="10dp" />
</com.google.android.material.textfield.TextInputLayout>
Set this in your TextInputLayout:
app:boxBackgroundMode="none"
Probably you have set boxBackgroundMode to filled or maybe it's set by default. Just add above line, and this should fix the issue.
Same behavior with com.google.android.material:material:1.3.0
Applying transparent background to TextInputEditText does the tricks.
android:background="#android:color/transparent"
I need to animation like this of first:
(Gif from Internet) But even with app:hintAnimationEnabled="true" the animation doesn't work. Always the second example of gif. What could be the problem? What am I doing wrong?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Login"
app:hintEnabled="true"
app:hintAnimationEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
You need to set the hint for TextInputLayout as well for animations to work, I've only tried setting hint dynamically which works as expected, try setting the hint in xml first to see if it works, if it does not then do it dynamically:
TextInputLayout inputLayout = findViewById(R.id.textInputLayout);
inoutLayout.setHint("Hint");
I have an application that uses a lot of textinputlayouts because I like the style they create
on one screen I am showing info on one object and I want it too look like the data the user entered with the textinputedittexts , small caption above and the data below
right now I have a textinputlayout with a disabled textinputedittext below
is there a way to just have a textview under the textinputlayout that will be shown in the same style?
thanks in advance for any help you can provide
edit:
as a side note here's what I am currently using to disable the edittext fully
<android.support.design.widget.TextInputLayout
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/name"
tools:text="This is where the name goes"
android:inputType="none"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false" />
what I am trying to avoid is not use clickable and inputtype etc etc in EVERY view that I'm trying to create, and instead use a single view
so other than creating a custom edittext (like NeverEnabledEditText) that starts unclickabke in every way, or add all those attributes to my xml, is there a way to do the above?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Date"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tv_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="none"
android:clickable="true"
android:focusable="false"
android:drawableEnd="#drawable/ic_keyboard_arrow_down_black_24dp"
android:paddingEnd="4dp"
android:paddingVertical="12dp"
android:drawablePadding="4dp"
android:textColor="#color/colorPrimary"
tools:text="00/00/0000" />
</com.google.android.material.textfield.TextInputLayout>
Although a TextInputEditText, now you have it acting like a textview because you can't edit it but can set text to it. You're welcome !