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
Related
I got a "Insufficient text color contrast ratio" warning in my layout. When I used the "Fix" option in the warning screen, it added an attribute android:hintTextColor to my text view in the xml file.
When I built the project, I got an error saying that the above attribute was not found. When I searched through all the attributes for the TextView, the most similar attribute I could find is textColorHint.
Is this a bug in Android Studio? Or did I get something wrong?
Thanks
This warning does not require any Attribute to be added, all you need to do is to enhance the contrast between the text and the background.
e.g. Set font to white if your background is black
If there is no improvement, you can try to use less complicated patterns as background.
Use android:background="#color/white" and android:textColorHint="#color/white" in TextInputEditText and the warning will be gone. see below how I used it.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/dru_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type Something"
android:textColorHint="#color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dru_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/black"
android:background="#color/white"/>
</com.google.android.material.textfield.TextInputLayout>
Edit: As the above code will hide InputLayout border to avoid that set you parent view color to white see the below code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/dru_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type Something"
android:textColorHint="#color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dru_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/black"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
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.
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.
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"
Android has a default green tear drop that appears under the text to help select text or position. How can I change the color of it without #drawables? I tried android:textSelectHandle="#color/colorPrimary" but that just made it disappear.
<EditText
android:inputType="text"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/imgMagnifyingGlass"
android:textAlignment="viewStart"
android:backgroundTint="#color/colorWhite"
android:textCursorDrawable="#null"
android:textSelectHandle="#color/colorPrimary"
android:textColor="#color/colorGray"
android:id="#+id/editTextWord" />
I fixed it by adding this to my styles.xml:
<item name="colorControlActivated">#color/colorPrimary</item>
All the other accepted answers on this topic involve #drawables and this seems the simplest way.