When I use style="#style/Widget.Design.TextInputLayout" for TextInputLayout, setting app:errorIconDrawable does nothing. It only works when I don't set the style and let it inherit the application theme (Theme.MaterialComponents.Light.NoActionBar). app:endIconDrawable also doesn't work and I cannot find an alternative/solution to this problem. Please help!
The following works while inheriting the application theme:Theme.MaterialComponents.Light.NoActionBar but I don't want this style, particularly the underline doesn't align with the texts:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_password_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
This uses the style that I need but will not show the error icon:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
style="#style/Widget.Design.TextInputLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_password_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Since you are using the legacy style Widget.Design.TextInputLayout it doesn't have support for all text field features that the *.OutlinedBox and *.FilledBox styles have.
You can't set the errorIconDrawable in the xml and you have to call TextInputLayout.setErrorIconDrawable after TextInputLayout.setError.
login_password_input_layout.setError("Error text!!");
login_password_input_layout.setErrorIconDrawable(R.drawable....);
hmm, see if you use directly below
style="#style/Widget.Design.TextInputLayout"
then your error drawable becomes null.
What I would suggest you is, create a style, modify the values as you like
<style name="TextLabel" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">#f32</item>
<item name="android:textSize">20sp</item>
<item name="colorAccent">#4CAF50</item>
<item name="errorIconDrawable">#drawable/ic_baseline_error_24</item>
<item name="colorControlNormal">#673AB7</item>
<item name="colorControlActivated">#E91E63</item>
<item name="errorEnabled">true</item>
</style>
and then apply it to via
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input_layout"
android:theme="#style/TextLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="username"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_password_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
This should solve.
Related
I'm trying to change the color of TextInputLayout's counter
I've tried the accepted answers but they do not work.
https://stackoverflow.com/a/33880925/11110509
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_custom_msg"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:hint="Message"
app:counterEnabled="true"
app:counterMaxLength="300"
//Accepted answer one
app:counterTextAppearance="#android:color/white">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_custom_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite" />
</com.google.android.material.textfield.TextInputLayout>
Accepted answer two:
https://stackoverflow.com/a/41257235/11110509
<style name="CounterStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#android:color/white</item>
<!--other parameters that you want to change -->
</style>
app:counterTextAppearance="#style/CounterStyle"
The issue maybe because my TextInputLayout uses the material version
<com.google.android.material.textfield.TextInputLayout
and theirs uses the support
<android.support.design.widget.TextInputLayout
If so, how can I do it with the Material one?
Simply use
'app:counterTextColor="YOUR_PREFERRED_COLOR"'
Resource: CounterTextColor
I have these two TextInputLayout and I want to change colors.
I want to change color Accent to color Violet (like two violet lines).
and how to change cursor color ??
and this is my XML code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/amount_lyt"
android:layout_width="0.0dp"
android:layout_height="0.0dp"
android:layout_margin="10.0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline61"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline60">
<ir.jetservice.customviews.AVEditText
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/amount"
android:text="10,000"
android:textSize="15.0sp"
android:textStyle="normal" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/account_lyt"
android:layout_width="0.0dp"
android:layout_height="0.0dp"
android:layout_margin="10.0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline62"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline61">
<ir.jetservice.customviews.AVEditText
android:id="#+id/account"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/account_number"
android:textSize="15.0sp"
android:textStyle="normal" />
</com.google.android.material.textfield.TextInputLayout>
Note: AVEditText is a normal EditText, it just changes English numbers to Persian.
You need to change the colors located in res/values/styles
<item name="colorPrimaryDark">#49C0D8</item>
If you're changing the Cursor color then see this solution: Change EditText Cursor color
For changing it's line color you've to add theme in styles.xml and appply that theme to the EditText.
Add theme in styles :
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/yourColor</item>
<item name="colorControlHighlight">#color/yourColor</item>
</style>
Apply theme to the EditText :
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/amount_lyt"
android:layout_width="0.0dp"
android:layout_height="0.0dp"
android:layout_margin="10.0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline61"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline60">
<ir.jetservice.customviews.AVEditText
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/amount"
android:text="10,000"
android:textColor="#color/yourColor"
android:textCursorDrawable="#null"
android:theme="#style/Theme.App.Base"
android:textSize="15.0sp"
android:textStyle="normal" />
</com.google.android.material.textfield.TextInputLayout>
I have tried implementing TextInputLayout with the new prefixText, using com.google.android.material:material:1.2.0-alpha02. This is a very cool feature, but when I add a prefix text the hint label floats up and aligns after the prefix. This does not look good, especially if you have more input fields on the same page without prefix, the floating labels does not align.
Relevant parts of my layout code:
<LinearLayout
android:id="#+id/login_input_fields"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_username_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/username_hint"
app:prefixText="Prefix">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_username_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:imeOptions="actionDone"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:singleLine="true"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
To use the Material Components Library you have to use a Theme.MaterialComponents.* theme.
Using your layout with this theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
</style>
Using your layout with this theme:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...
</style>
val prefixView = textInputLayout.findViewById<AppCompatTextView>(com.google.android.material.R.id.textinput_prefix_text)
prefixView.layoutParams = LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT)
prefixView.gravity = Gravity.CENTER
you may find more details here https://github.com/material-components/material-components-android/issues/773
if you wish to light prefix with input text
I want to display error message below EditText. So, I followed this answer.
This is my style:
<style name="FontLightItalic">
<item name="fontPath">#string/font_light_italic</item>
</style>
<style name="errorAppearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/color_d64425</item>
<item name="android:textSize">12sp</item>
</style>
And this is my code:
<android.support.design.widget.TextInputLayout
android:id="#+id/trip_description_input"
android:layout_width="match_parent"
android:hint="my hint"
android:layout_height="wrap_content"
app:errorTextAppearance="#style/errorAppearance"
app:errorEnabled="true">
<com.company.styles.ClearableEditText . // It extends AppCompatEditText to add clear icon
android:id="#+id/trip_description"
style="#style/FontLightItalic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginLeft="-4dp"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:drawableEnd="#drawable/ic_clear_business"
android:drawablePadding="5dp"
android:drawableRight="#drawable/ic_clear_business"
android:maxLines="1"
android:lines="1"
android:singleLine="true"
android:inputType="text"
android:text="#={userGroup.expenseDescription}"
android:textColorHint="#color/color_ccd6dd"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
This is the result. How to reduce this gap?
Remove this attribute from your ClearableEditText
android:layout_marginBottom="24dp"
I'm using a TextInputLayout wrapped around an EditText. Right now the counter is black, I'd like it to be white. I'm not sure what option to set to get it to be white.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
>
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
I decided to write this answer based on comments from previous one.
At first, you need to create the style for your counter, for example:
<style name="CounterStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#android:color/white</item>
<!--other parameters that you want to change -->
</style>
Then add this style to TextInputLayout:
app:counterTextAppearance="#style/CounterStyle"
That's all, it should works. Full code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterTextAppearance="#style/CounterStyle"
android:textColor="#color/white"
android:textColorHint="#color/white">
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
You can also use some style for the overflow counter:
app:counterOverflowTextAppearance="#style/YourOverflowTextStyleHere"
As described here (thanks #Sufian for the link)
Please add:
app:counterTextAppearance="#android:color/white"
to your TextInputLayout.
Hope this helps!