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"
Related
This is what is happening
I was following this article Exposed Drop-Down Menu in Android
This is the code that I wrote
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:background="#color/transparent"
android:backgroundTint="#color/transparent"
app:boxBackgroundColor="#color/transparent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<AutoCompleteTextView
android:id="#+id/autoCompleteT"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:inputType="none"
android:text="Choose Programming language" />
</com.google.android.material.textfield.TextInputLayout>
After digging into the problem I found out that if I delete
<item name="android:background">#color/white</item>
in my theme.xml the problem gets solved. The end icon no longer hides the border. But since I am using this attribute in my project so I can not remove it. I even tried to set the background transparent or #null in both TextInoutLayout and AutoCompleteTextView, nothing happened though.
One last thing this situation won't occur in EditText if I use drawableEnd
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 use com.google.android.material:material:1.1.0 and trying to make EditText with outlined box with a hint. My issue is that stroke of the box is overlaps the hint:
Here is my code:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxStrokeWidth="1dp"
app:hintEnabled="true">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/export_csv_sep_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="130dp"
android:layout_gravity="bottom"
android:digits=",;:.|/*-_"
android:fontFamily="sans-serif"
android:gravity="center"
android:imeOptions="actionDone|flagNoFullscreen|flagNoExtractUi"
android:inputType="text"
android:maxLength="1"
android:maxLines="1"
android:selectAllOnFocus="true"
android:singleLine="true"
android:text=","
android:hint="#string/separator"
android:textColor="?android:textColorPrimary"
android:textSize="#dimen/normal_font_size"
android:completionThreshold="1"/>
</com.google.android.material.textfield.TextInputLayout>
Is it bug in the material library, or something wrong with my code?
It depends by the use of android:gravity="center"
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:gravity="center"
..>
Starting from 1.2.0-alpha02 the bug is fixed and there is a different behavior.
In any case use MaterialAutoCompleteTextView or AutoCompleteTextView instead of androidx.appcompat.widget.AppCompatAutoCompleteTextView (there is an auto-inflation of MaterialAutoCompleteTextView using AutoCompleteTextView).
Something like:
<com.google.android.material.textfield.TextInputLayout
...
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
.....
/>
</com.google.android.material.textfield.TextInputLayout>
It seems there are quite some bugs with version 1.1.0
For now they have addressed some in the latest release, update your version to latest one (see latest releases here)
For now latest release is : 1.2.0-alpha06
Or use below in your app gradle :
implementation 'com.google.android.material:material:1.2.0-alpha06
Refer here for issues reported for material components or you can raise one yourselves
does anyone kn ow how to change MaterialComponents Spinner widget arrow image With AutoCompleteTextView.
code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/contractSpinnerContainer"
style="#style/TextInputLayout.FilledBox.Dense.ExposeDropDownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_padding"
app:layout_constraintEnd_toStartOf="#+id/guidelineEnd"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintTop_toBottomOf="#+id/registrationLastNameContainer">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Country"
android:imeOptions="actionNext"
android:includeFontPadding="false"
android:inputType="textPersonName"
android:maxLines="1"
android:textColor="#color/ts_black"
android:textSize="#dimen/login_input_text_size" />
</com.google.android.material.textfield.TextInputLayout>
result that want to change:
So with a help of #MatPag answer is:
app:endIconMode="custom"
app:endIconDrawable="#drawable/custom_icon"
and actually on API29 it is working without app:endIconMode="custom", haven't tested on other API's.
You need to set background using theme changes of parent.
The hint wont float if u set it using data binding
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:theme="#style/TextAppearance.TextInputLayout.Form"
>
<EditText
android:id="#+id/usernameEditTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/default_margin_3"
android:textSize="16sp"
android:singleLine="true"
android:hint="#{model.label}"
android:inputType="none"
/>
</android.support.design.widget.TextInputLayout>
But if u set the hint manually, it works.
Im using Android Studio 3.0
Also using kapt "com.android.databinding:compiler:2.3.3"
Anyone solved this one?
You have to set the hint attribute on the TextInputLayout.
With Material Components:
<com.google.android.material.textfield.TextInputLayout
android:hint="#{viewModel.textHint}"
with old support library:
<android.support.design.widget.TextInputLayout
android:hint="#{....}"
The reason is that TextInputLayout reads the hint attribute from the TextInputEditText only once (if not specified). After the inflation the changes on the TextInputEditText don't change the TextInputLayout's hint.
With the databinding on the TextInputEditText you are not updating the TextInputLayout for the same reason.