Global style for TextInputLayout is not working - android

I want to set custom style on TextInputLayout globally as:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.BudgetTracker" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
...
<!-- Secondary brand color. -->
...
<!-- Status bar color. -->
...
<!-- Customize your theme here. -->
<item name="fontFamily">#font/regular</item>
<!-- TextInputLayout-->
<item name="textInputStyle">#style/Widget.MyNiceAppName.TextInputLayout.OutlinedBox</item>
</style>
<style name="Widget.MyNiceAppName.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:imeOptions">actionNext</item>
<item name="android:maxLines">1</item>
</style>
</resources>
and my fragment layout is
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/outlinedTextField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="32dp"
android:hint="#string/label_email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/acll">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
but it never works. Any suggestions for mentioned issue resolution is highly appreciated.

You have to apply these attributes to TextInputEditText not the TextInputLayout.
In your case you can use:
<style name="Widget.MyNiceAppName.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">
#style/ThemeOverlay.App.TextInputEditText.OutlinedBox
</item>
</style>
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="editTextStyle">#style/Widget.App.TextInputEditText.OutlinedBox</item>
</style>
<style name="Widget.App.TextInputEditText.OutlinedBox" parent="Widget.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="android:imeOptions">actionNext</item>
<item name="android:maxLines">1</item>
</style>
Also you can you to add the android:inputType="textEmailAddress" to the TextInputEditText:
<com.google.android.material.textfield.TextInputEditText
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Related

How to remove padding for the bottom line of the TextInputEditText

I'm trying to remove all padding of a TextInputLayout and a TextInputEditText, but with padding=0dp the line at the bottom of the TextInputEditText keeps it padding left and right. How I can remove this padding?
This is the xml code that I've used.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ti_input_otp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/zp_otpfragment_input_otp"
android:padding="0dp"
android:theme="#style/TextInputLayout"
app:hintTextAppearance="#style/FloatingLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_input_otp_description">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_input_otp"
android:layout_width="match_parent"
android:layout_height="#dimen/text_input_layout_height"
android:layout_marginTop="16dp"
android:ems="10"
android:gravity="start|center_vertical"
android:imeOptions="actionNext"
android:importantForAutofill="no"
android:inputType="numberSigned"
android:labelFor="#string/zp_otpfragment_input_otp"
android:lines="1"
android:padding="0dp"
android:singleLine="true"
android:textSize="#dimen/text_info_size"
android:theme="#style/InputText" />
</com.google.android.material.textfield.TextInputLayout>
The styles are:
<style name="FloatingLabel" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorPrimary</item>
</style>
<style name="TextInputLayout" parent="AppTheme">
<item name="boxStrokeColor">#color/colorPrimary</item> <!-- Line Color -->
<item name="android:textColorHint">#color/colorGray</item> <!-- Hint Color -->
<item name="boxStrokeWidth">1dp</item>
<item name="boxBackgroundColor">#color/colorCeruleanBlue</item>
</style>
<style name="InputText" parent="AppTheme">
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:backgroundTint">#color/colorCeruleanBlue</item>
<item name="colorControlNormal">#color/colorCeruleanBlue</item> <!-- cursor y línea normal-->
<item name="colorControlActivated">#color/colorAccent</item> <!-- cursor y línea con foco-->
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
Thank you
You can use your own custom style for TextInputLayout as below:
Your layout:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Your hint text"
style="#style/My.TextInputLayout.Theme" >
Then define your custom theme as below:
<style name="My.TextInputLayout.Theme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemePadding</item>
</style>
<style name="MyThemePadding">
<item name="editTextStyle">#style/MyTextInputEditText_padding</item>
</style>
<style name="MyTextInputEditText_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- Set left and right padding here -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- Set top and bottom padding here -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>

How can I change the background color of the hint text of TextInputLayout

I am programming a view of TextInputLayout
My style.xml is :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/colorPrimary</item>
<item name="hintTextColor">#color/colorPrimary</item>
<item name="boxBackgroundColor">#android:color/white</item>
<item name="boxStrokeWidth">2dp</item>
</style>
</resources>
My color overrides in color.xml are:
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#c2261a</color>
My TextInput Layout is:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/weightInput"
style="#style/MyTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:hint="#string/hint_weight"
app:errorEnabled="true"
app:helperTextEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textViewTitle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:imeOptions="actionDone"
android:importantForAutofill="no"
android:inputType="numberDecimal"
android:maxLength="5"
android:maxLines="1"
android:singleLine="true"
android:textAlignment="center"
android:textColor="#color/colorPrimary" />
</com.google.android.material.textfield.TextInputLayout>
And the final result is
As we can see the background color of the hint text is transparent. How can I find that view.
I tried that style without success:
My style.xml is :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="HintText" parent="TextAppearance.Design.Hint">
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:background">#android:color/white</item>
</style>
<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/colorPrimary</item>
<item name="hintTextColor">#color/colorPrimary</item>
<item name="hintTextAppearance">#style/HintText</item>
<item name="boxBackgroundColor">#android:color/white</item>
<item name="boxStrokeWidth">2dp</item>
</style>
</resources>
Updating to material components 1.4.0-alpha01 resolves this issue.
This is the commit responsible: https://github.com/material-components/material-components-android/commit/6015a4e901dc55a02f86e12703820d520684f95e
Its Works for me.. I wish its also works for you..
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:textSize="14sp"
android:hint="Add Your Text Watermark"
android:textColorHint="#color/yellowcolor" // this line can change hint text color
android:textColor="#color/yellowcolor"
android:fontFamily="#font/inter_light"
android:textAlignment="center"/>
This is to change the line color of edit text.
android:backgroundTint="#color/colorPrimaryDark"
sample code:
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorPrimaryDark"
android:imeOptions="actionNext"
tools:text="Full name" />

how to change google.android.material.textfield.TextInputLayout line colour [duplicate]

I am using android design library's TextinputLayout. But couldn't customize the hint color, label color and the underline color of EditText inside TextinputLayout. Please help.
Change bottom line color:
From this answer
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/accent</item>
<item name="colorControlHighlight">#color/accent</item>
Change hint color when it is floating
<style name="MyHintStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/main_color</item>
</style>
and use it like this:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="#style/MyHintStyle">
Change hint color when it is not a floating label:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="#style/MyHintStyle"
android:textColorHint="#c1c2c4">
Thanks to #AlbAtNf
With the Material Components Library you can use the com.google.android.material.textfield.TextInputLayout.
You can apply a custom style to change the colors.
To change the hint color you have to use these attributes:
hintTextColor and android:textColorHint.
<style name="Custom_textinputlayout_filledbox" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
<!-- The color of the label when it is collapsed and the text field is active -->
<item name="hintTextColor">?attr/colorPrimary</item>
<!-- The color of the label in all other text field states (such as resting and disabled) -->
<item name="android:textColorHint">#color/selector_hint_text_color</item>
</style>
You should use a selector for the android:textColorHint. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>
To change the bottom line color you have to use the attribute: boxStrokeColor.
<style name="Custom_textinputlayout_filledbox" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
....
<item name="boxStrokeColor">#color/selector_stroke_color</item>
</style>
Also in this case you should use a selector. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
You can also apply these attributes in your layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/selector_stroke_color"
app:hintTextColor="?attr/colorPrimary"
android:textColorHint="#color/selector_hint_text_color"
...>
Based on Fedor Kazakov and others answers, I created a default config.
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="Widget.Design.TextInputLayout" parent="AppTheme">
<item name="hintTextAppearance">#style/AppTheme.TextFloatLabelAppearance</item>
<item name="errorTextAppearance">#style/AppTheme.TextErrorAppearance</item>
<item name="counterTextAppearance">#style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">#style/TextAppearance.Design.Counter.Overflow</item>
</style>
<style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
<!-- Floating label appearance here -->
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textSize">20sp</item>
</style>
<style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
<!-- Error message appearance here -->
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">20sp</item>
</style>
</resources>
activity_layout.xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text hint here"
android:text="5,2" />
</android.support.design.widget.TextInputLayout>
Focused:
Without focus:
Error message:
Add this attribute in Edittext tag and enjoy:
android:backgroundTint="#color/colorWhite"
This Blog Post describes various styling aspects of EditText and AutoCompleteTextView wrapped by TextInputLayout.
For EditText and AppCompat lib 22.1.0+ you can set theme attribute with some theme related settings:
<style name="StyledTilEditTextTheme">
<item name="android:imeOptions">actionNext</item>
<item name="android:singleLine">true</item>
<item name="colorControlNormal">#color/greyLight</item>
<item name="colorControlActivated">#color/blue</item>
<item name="android:textColorPrimary">#color/blue</item>
<item name="android:textSize">#dimen/styledtil_edit_text_size</item>
</style>
<style name="StyledTilEditText">
<item name="android:theme">#style/StyledTilEditTextTheme</item>
<item name="android:paddingTop">4dp</item>
</style>
and apply them on EditText:
<EditText
android:id="#+id/etEditText"
style="#style/StyledTilEditText"
For AutoCompleteTextView things are more complicated because wrapping it in TextInputLayout and applying this theme breaks floating label behaviour.
You need to fix this in code:
private void setStyleForTextForAutoComplete(int color) {
Drawable wrappedDrawable = DrawableCompat.wrap(autoCompleteTextView.getBackground());
DrawableCompat.setTint(wrappedDrawable, color);
autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}
and in Activity.onCreate:
setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
if(hasFocus) {
setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
} else {
if(autoCompleteTextView.getText().length() == 0) {
setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
}
}
});
If you want to change the bar/line color and the hint text color of the TextInputLayout (what the accent color normally is), then just create this style:
<style name="MyStyle">
<item name="colorAccent">#color/your_color</item>
</style>
Then apply it to your TextInputLayout as a theme:
<android.support.design.widget.TextInputLayout
...
app:theme="#style/MyStyle" />
This basically sets a theme (not style) to one view (as opposed to the whole activity).
A TextinputLayout is not a view, but a Layout, as very nicely described by Dimitrios Tsigouris in his blog post here. Therefore, you don't need a Style, which is for Views only, but use a Theme. Following the blog post, I ended up with the following solution:
Start in your styles.xml with
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<!-- reference our hint & error styles -->
<item name="android:textColor">#color/your_colour_here</item>
<item name="android:textColorHint">#color/your_colour_here</item>
<item name="colorControlNormal">#color/your_colour_here</item>
<item name="colorControlActivated">#color/your_colour_here</item>
<item name="colorControlHighlight">#color/your_colour_here</item>
</style>
And in your layout add
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/TextInputLayoutAppearance"
...
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
<item name="hintTextAppearance">#style/TextAppearance.Design.Hint</item>
<item name="errorTextAppearance">#style/TextAppearance.Design.Error</item>
</style>
You can override this style for layout
And also you can change inner EditText-item style too.
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/actionBar_background</item>
<item name="colorControlActivated">#color/actionBar_background</item>
<item name="colorControlHighlight">#color/actionBar_background</item>
<item name="colorAccent">#color/actionBar_background</item>
<item name="android:textColorHint">#color/actionBar_background</item>
</style>
apply this style to TextInputLayout
I used all of the above answers and none worked. This answer works for API 21+. Use app:hintTextColor attribute when text field is focused and app:textColorHint attribute when in other states. To change the bottmline color use this attribute app:boxStrokeColor as demonstrated below:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/colorAccent"
app:hintTextColor="#color/colorAccent"
android:textColorHint="#android:color/darker_gray"
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
It works for AutoCompleteTextView as well. Hope it works for you:)
Works for me. If you trying EditText with Label and trying change to underline color use this. Change to TextInputEditText instead EditText.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/editTextTextPersonName3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_16sdp"
android:layout_marginLeft="#dimen/_16sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_8sdp"
android:layout_marginRight="#dimen/_8sdp"
android:textColorHint="#color/white"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#color/white"
android:hint="Lastname"
android:textSize="#dimen/_14sdp"
android:inputType="textPersonName"
android:textColor="#color/white"
android:textColorHint="#color/white" />
</com.google.android.material.textfield.TextInputLayout>
Change line color of TextInputLayout + TextInputEditText
colors.xml
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#color/lineColor</color>
styles.xml
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
<item name="boxStrokeColor">#color/lineColor</item>
<item name="android:textColorHint">#color/hintColor</item>
<item name="boxStrokeWidth">1dp</item>
<item name="boxBackgroundColor">#color/backgroundColor</item>
</style>
<style name="TextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
<item name="android:textColor">#color/black</item>
</style>
layout.xml
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
You can change the label color of TextInputLayout by using app:hintTextAppearance attribute in TextInputLayout.
<android.support.design.widget.TextInputLayout
android:id="#+id/inputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/TextAppearance.App.TextInputLayout">
<EditText
android:id="#+id/mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingStart="5dp"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
Style:
<style name="TextAppearance.App.TextInputLayout"
parent="#android:style/TextAppearance">
<item name="android:textColor">#android:color/black</item>
<item name="android:textSize">20sp</item>
</style>
To change edittext underline color, you can use android:backgroundTint
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Underline color change"
android:backgroundTint="#android:color/holo_red_light" />
Create style as mentioned below
<style name="text_input_layout_style">
<item name="colorControlNormal">#color/primary</item>
<item name="colorControlActivated">#color/primary</item>
<item name="colorControlHighlight">#color/primary</item>
</style>
and apply it to your TextInputLayout as android:theme="#style/text_input_layout_style"
And definitely will work for you all.
I needed to change the bottom line color of a TextInputEditText inside a TextInputLayout and then the other answers didn't work out. I finally solved it by setting the colorOnSurface for the TextInputLayouts theme. I'll leave my code here in case it helps someone else.
XML:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme=""#style/TextInputLayoutStyle"">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.te`tfield.TextInputLayout>
Style:
<style name="TextInputLayoutStyle">
<item name="colorOnSurface">#0ff</item>
</style>
XML
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/activity_profile_textInputLayout_mobile"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:hint="Mobile Number"
app:theme="#style/EditBoxColor">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/activity_profile_textInputEditText_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="number"
android:maxLength="10"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
Style
<style name="EditBoxColor" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="colorPrimary">#color/colorPurple</item>
<item name="colorPrimaryDark">#color/colorPurple3</item>
</style>

How to reduce the line size of Floating Label EditText when it is in active state

Here I am using Floating Label EditText. I need to edit the size of the line under the EditText when I enter any text into that text field. Here I have added the code for your reference
This is the code in XML
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_last"
android:layout_width="match_parent"
android:layout_height="70dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_marginTop="10dp">
<EditText
android:id="#+id/input_last"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:textSize="12sp"
android:paddingLeft="20dp"
android:theme="#style/MyEditTheme"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:hint="Password" />
</android.support.design.widget.TextInputLayout>
This my style.xml
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">#color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyEditTheme" parent="MyMaterialTheme.Base">
<!-- Used for the bottom line when not selected / focused -->
<item name="colorControlNormal">#383838</item>
<!-- colorControlActivated & colorControlHighlight use the colorAccent color by default -->
</style>
</resources>
Here I need to reduce the size of the blue line.

how to change color of TextinputLayout's label and edittext underline android

I am using android design library's TextinputLayout. But couldn't customize the hint color, label color and the underline color of EditText inside TextinputLayout. Please help.
Change bottom line color:
From this answer
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/accent</item>
<item name="colorControlHighlight">#color/accent</item>
Change hint color when it is floating
<style name="MyHintStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/main_color</item>
</style>
and use it like this:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="#style/MyHintStyle">
Change hint color when it is not a floating label:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="#style/MyHintStyle"
android:textColorHint="#c1c2c4">
Thanks to #AlbAtNf
With the Material Components Library you can use the com.google.android.material.textfield.TextInputLayout.
You can apply a custom style to change the colors.
To change the hint color you have to use these attributes:
hintTextColor and android:textColorHint.
<style name="Custom_textinputlayout_filledbox" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
<!-- The color of the label when it is collapsed and the text field is active -->
<item name="hintTextColor">?attr/colorPrimary</item>
<!-- The color of the label in all other text field states (such as resting and disabled) -->
<item name="android:textColorHint">#color/selector_hint_text_color</item>
</style>
You should use a selector for the android:textColorHint. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>
To change the bottom line color you have to use the attribute: boxStrokeColor.
<style name="Custom_textinputlayout_filledbox" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
....
<item name="boxStrokeColor">#color/selector_stroke_color</item>
</style>
Also in this case you should use a selector. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
You can also apply these attributes in your layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/selector_stroke_color"
app:hintTextColor="?attr/colorPrimary"
android:textColorHint="#color/selector_hint_text_color"
...>
Based on Fedor Kazakov and others answers, I created a default config.
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="Widget.Design.TextInputLayout" parent="AppTheme">
<item name="hintTextAppearance">#style/AppTheme.TextFloatLabelAppearance</item>
<item name="errorTextAppearance">#style/AppTheme.TextErrorAppearance</item>
<item name="counterTextAppearance">#style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">#style/TextAppearance.Design.Counter.Overflow</item>
</style>
<style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
<!-- Floating label appearance here -->
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textSize">20sp</item>
</style>
<style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
<!-- Error message appearance here -->
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">20sp</item>
</style>
</resources>
activity_layout.xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text hint here"
android:text="5,2" />
</android.support.design.widget.TextInputLayout>
Focused:
Without focus:
Error message:
Add this attribute in Edittext tag and enjoy:
android:backgroundTint="#color/colorWhite"
This Blog Post describes various styling aspects of EditText and AutoCompleteTextView wrapped by TextInputLayout.
For EditText and AppCompat lib 22.1.0+ you can set theme attribute with some theme related settings:
<style name="StyledTilEditTextTheme">
<item name="android:imeOptions">actionNext</item>
<item name="android:singleLine">true</item>
<item name="colorControlNormal">#color/greyLight</item>
<item name="colorControlActivated">#color/blue</item>
<item name="android:textColorPrimary">#color/blue</item>
<item name="android:textSize">#dimen/styledtil_edit_text_size</item>
</style>
<style name="StyledTilEditText">
<item name="android:theme">#style/StyledTilEditTextTheme</item>
<item name="android:paddingTop">4dp</item>
</style>
and apply them on EditText:
<EditText
android:id="#+id/etEditText"
style="#style/StyledTilEditText"
For AutoCompleteTextView things are more complicated because wrapping it in TextInputLayout and applying this theme breaks floating label behaviour.
You need to fix this in code:
private void setStyleForTextForAutoComplete(int color) {
Drawable wrappedDrawable = DrawableCompat.wrap(autoCompleteTextView.getBackground());
DrawableCompat.setTint(wrappedDrawable, color);
autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}
and in Activity.onCreate:
setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
if(hasFocus) {
setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
} else {
if(autoCompleteTextView.getText().length() == 0) {
setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
}
}
});
If you want to change the bar/line color and the hint text color of the TextInputLayout (what the accent color normally is), then just create this style:
<style name="MyStyle">
<item name="colorAccent">#color/your_color</item>
</style>
Then apply it to your TextInputLayout as a theme:
<android.support.design.widget.TextInputLayout
...
app:theme="#style/MyStyle" />
This basically sets a theme (not style) to one view (as opposed to the whole activity).
A TextinputLayout is not a view, but a Layout, as very nicely described by Dimitrios Tsigouris in his blog post here. Therefore, you don't need a Style, which is for Views only, but use a Theme. Following the blog post, I ended up with the following solution:
Start in your styles.xml with
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<!-- reference our hint & error styles -->
<item name="android:textColor">#color/your_colour_here</item>
<item name="android:textColorHint">#color/your_colour_here</item>
<item name="colorControlNormal">#color/your_colour_here</item>
<item name="colorControlActivated">#color/your_colour_here</item>
<item name="colorControlHighlight">#color/your_colour_here</item>
</style>
And in your layout add
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/TextInputLayoutAppearance"
...
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
<item name="hintTextAppearance">#style/TextAppearance.Design.Hint</item>
<item name="errorTextAppearance">#style/TextAppearance.Design.Error</item>
</style>
You can override this style for layout
And also you can change inner EditText-item style too.
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/actionBar_background</item>
<item name="colorControlActivated">#color/actionBar_background</item>
<item name="colorControlHighlight">#color/actionBar_background</item>
<item name="colorAccent">#color/actionBar_background</item>
<item name="android:textColorHint">#color/actionBar_background</item>
</style>
apply this style to TextInputLayout
I used all of the above answers and none worked. This answer works for API 21+. Use app:hintTextColor attribute when text field is focused and app:textColorHint attribute when in other states. To change the bottmline color use this attribute app:boxStrokeColor as demonstrated below:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/colorAccent"
app:hintTextColor="#color/colorAccent"
android:textColorHint="#android:color/darker_gray"
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
It works for AutoCompleteTextView as well. Hope it works for you:)
Works for me. If you trying EditText with Label and trying change to underline color use this. Change to TextInputEditText instead EditText.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/editTextTextPersonName3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_16sdp"
android:layout_marginLeft="#dimen/_16sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_8sdp"
android:layout_marginRight="#dimen/_8sdp"
android:textColorHint="#color/white"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#color/white"
android:hint="Lastname"
android:textSize="#dimen/_14sdp"
android:inputType="textPersonName"
android:textColor="#color/white"
android:textColorHint="#color/white" />
</com.google.android.material.textfield.TextInputLayout>
Change line color of TextInputLayout + TextInputEditText
colors.xml
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#color/lineColor</color>
styles.xml
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
<item name="boxStrokeColor">#color/lineColor</item>
<item name="android:textColorHint">#color/hintColor</item>
<item name="boxStrokeWidth">1dp</item>
<item name="boxBackgroundColor">#color/backgroundColor</item>
</style>
<style name="TextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
<item name="android:textColor">#color/black</item>
</style>
layout.xml
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
You can change the label color of TextInputLayout by using app:hintTextAppearance attribute in TextInputLayout.
<android.support.design.widget.TextInputLayout
android:id="#+id/inputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/TextAppearance.App.TextInputLayout">
<EditText
android:id="#+id/mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingStart="5dp"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
Style:
<style name="TextAppearance.App.TextInputLayout"
parent="#android:style/TextAppearance">
<item name="android:textColor">#android:color/black</item>
<item name="android:textSize">20sp</item>
</style>
To change edittext underline color, you can use android:backgroundTint
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Underline color change"
android:backgroundTint="#android:color/holo_red_light" />
Create style as mentioned below
<style name="text_input_layout_style">
<item name="colorControlNormal">#color/primary</item>
<item name="colorControlActivated">#color/primary</item>
<item name="colorControlHighlight">#color/primary</item>
</style>
and apply it to your TextInputLayout as android:theme="#style/text_input_layout_style"
And definitely will work for you all.
I needed to change the bottom line color of a TextInputEditText inside a TextInputLayout and then the other answers didn't work out. I finally solved it by setting the colorOnSurface for the TextInputLayouts theme. I'll leave my code here in case it helps someone else.
XML:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme=""#style/TextInputLayoutStyle"">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.te`tfield.TextInputLayout>
Style:
<style name="TextInputLayoutStyle">
<item name="colorOnSurface">#0ff</item>
</style>
XML
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/activity_profile_textInputLayout_mobile"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:hint="Mobile Number"
app:theme="#style/EditBoxColor">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/activity_profile_textInputEditText_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="number"
android:maxLength="10"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
Style
<style name="EditBoxColor" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="colorPrimary">#color/colorPurple</item>
<item name="colorPrimaryDark">#color/colorPurple3</item>
</style>

Categories

Resources