This is my xml
<android.support.design.widget.TextInputLayout
style="#style/main_input_text"
android:layout_marginTop="#dimen/activity_medium_margin"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout">
<android.support.v7.widget.AppCompatEditText
style="#style/main_edit_text"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
And this is style
<style name="main_input_text">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">#dimen/activity_edittext_height</item>
<item name="android:background">#drawable/mc_shape_border_button_transparent</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingTop">#dimen/activity_extra_small_margin</item>
<item name="android:paddingBottom">#dimen/activity_extra_small_margin</item>
<item name="android:keyTextSize">8sp</item>
<item name="android:textSize">8sp</item>
</style>
I don't find something like hintSize, textSize and keyTextSize not helping
In your styles.xml
<style name="TextLabel" parent="TextAppearance.Design.Hint">
<item name="android:textSize">16sp</item>
</style>
And then in your layout file:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="12dp"
app:hintTextAppearance="#style/TextLabel"
android:minHeight="30dp">
Change the TextInputLayout's app:errorTextAppearance in XML.
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:errorTextAppearance="#style/CustomTextInputLayoutStyle.ErrorTextStyle">
Where CustomTextInputLayoutStyle.ErrorTextStyle is defined in styles.xml as
<style name="CustomTextInputLayoutStyle.ErrorTextStyle" parent="TextAppearance.Design.Error">
<item name="android:textSize">10sp</item>
</style>
#Santiago Martínez answer only works for hints on non empty Edittext (inside TextInputLayout)
But for empty Edittext, TextInputLayout hint takes property from Edittext textSize.
1) Add hintTextAppearance to your InputLayout with a style
<android.support.design.widget.TextInputLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/TextInputLayoutHintText" >
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
2) Then just add the style to your styles.xml
<style name="TextInputLayoutHintText">
<item name="android:textColor">#color/gray</item>
<item name="android:textSize">12sp</item></style>
For material 1.4.0
implementation 'com.google.android.material:material:1.4.0'
You only need to change the android:textSize attribute for the TextInputEditText for the hint size to change.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"/>
</com.google.android.material.textfield.TextInputLayout>
You can reduce the font size on the EditText - that will reduce the size of the hint as well. i.e. android:textSize="16sp"
Related
I want to change the arrow color to white. how to do it? here's my code
<com.google.android.material.textfield.TextInputLayout
style="#style/ExposedDropdownMenu"
android:hint="Select"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:focusable="false"
android:textSize="17sp"
android:padding="15dp"
android:textColorHint="#color/white"
android:textColor="#color/white"
android:id="#+id/actv_pool"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
here's my style:
<style name="ExposedDropdownMenu" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<item name="boxStrokeColor">#fff</item>
<item name="boxStrokeWidth">1dp</item>
<item name="android:textColorHint">#fff</item>
</style>
I hope it's clear. thanks in advance.
You can use the app:endIconTint attribute in the layout:
<com.google.android.material.textfield.TextInputLayout
...
app:endIconTint="#color/my_selector_color">
or you can use a custom style:
<com.google.android.material.textfield.TextInputLayout
style="#style/ExposedDropdownMenu"
...>
with:
<style name="name="ExposedDropdownMenu" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<item name="endIconTint">#color/my_selector_color</item>
</style>
If you want change drawable, not only color, you can set endIconDrawable. For drawable put a selector xml like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_page_up" android:state_checked="true"/>
<item android:drawable="#drawable/ic_page_down"/>
</selector>
Simply add endIconTint attribute to the TextInputLayout by using
app:endIconTint="#color/primaryDarkColor"
where
#color/primaryDarkColor
is your desired color of choice
Example below with full XML Code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_paying_bank"
style = "#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/til_withdrawal_date"
android:layout_centerHorizontal="true"
android:padding="5dp"
app:endIconTint="#color/primaryDarkColor">
<AutoCompleteTextView
android:id="#+id/actv_paying_bank"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/paying_bank"
android:dropDownSelector="#color/primaryLightColor"
/>
</com.google.android.material.textfield.TextInputLayout>
Hello all I am new to android themes and styles. According to official documentations
A style is a collection of attributes that specify the appearance for a single View . A style can specify attributes such as font color, font size, background color, and much more. A theme is a type of style that's applied to an entire app, activity, or view hierarchy—not just an individual view
But i can not change some attributes via android:theme attribute, but i can change via style
Here I have this style file:
<style name="Style.InputLayout" parent="Widget.Design.TextInputLayout">
<item name="errorTextAppearance">#style/ErrorTextAppearance</item>
<item name="hintTextAppearance">#style/HintTextAppearance</item>
<item name="errorEnabled">true</item>
</style>
<style name="HintTextAppearance" parent="TextAppearance.Design.Hint">
<!-- Inactive and Active label color-->
<item name="android:textColor">?attr/colorShadow</item>
</style>
<style name="ErrorTextAppearance" parent="TextAppearance.Design.Error">
<!-- Error text color-->
<item name="android:textColor">?attr/colorError</item>
</style>
And I have a TextInputLayout as:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tfUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Style.InputLayout"
android:hint="Username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.EditText"/>
</com.google.android.material.textfield.TextInputLayout>
This works as i expected. But when I change style attribute to android:theme in TextInputLayout like below:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tfUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Style.InputLayout"
android:hint="Username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.EditText"/>
</com.google.android.material.textfield.TextInputLayout>
It does not work. Why is that?
It does not work. Why is that?
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/Style.InputLayout"
It doesn't work because it is wrong.
You can use something like:
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/Style.MyColor"
...>
With:
<style name="MyColor" parent="">
<item name="colorPrimary">#color/.....</item>
</style>
In this way you can modify the theme attributes for that view and any child views, which is useful for overriding theme color palettes in a specific portion of your interface.
You can find more info in the official doc.
Use like this:
Use this code on styles
<style name="MyColor" parent="">
<item name="android:colorControlActivated">#color/colorTextGray</item>
<itemname="android:colorControlHighlight">#color/colorTextGray</item>
<item name="android:colorControlNormal">#color/colorTextGray</item>
</style>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layoutTextInput"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/MyColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline131"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline121"
app:layout_constraintTop_toBottomOf="#+id/ed_phone"
app:layout_constraintVertical_bias="0.0"
app:passwordToggleDrawable="#drawable/show_password_selector"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#color/colorWhite">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/ed_password_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:inputType="textPassword"
android:textColor="#color/colorWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline131"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline121"
app:layout_constraintTop_toBottomOf="#+id/ed_phone"
app:layout_constraintVertical_bias="0.0" />
</com.google.android.material.textfield.TextInputLayout>
please I try to resolve this problem for two days, but unsuccessfull
I have a problem with new material design components
I used style Widget.MaterialComponents.TextInputLayout.OutlinedBox
I try get this result.. (without change theme colors) only xml or code
my actual widget.. :(
my Theme
Theme.MaterialComponents.Light.NoActionBar.Bridge
xml code of component
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/core_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="#style/TextInputLayout"
app:errorEnabled="true"
android:layout_weight="9">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
tools:hint="Trip name"/>
</com.google.android.material.textfield.TextInputLayout>
style
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/HintText</item>
</style>
<style name="HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
<item name="android:textColor">?secondaryVariant</item>
</style>
I tried everything from internet, but i dont know where is a problem. thanks for any help
In gradle i have all latest versions of libs and build version
If zou want additional info write.
Thanks for any help
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="colorAccent">#color/HintText</item>
</style>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/core_text"
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="9"
android:theme="#style/TextInputLayout"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
tools:hint="Trip name" />
</com.google.android.material.textfield.TextInputLayout>
Also if you need to change box stroke, you need to the override default color
<color name="colorTextInputStroke">#CCD1D3</color>
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">
#color/colorTextInputStroke
</color>
this problem can resolve with this lines in custom theme
<item name="colorPrimary">?secondary</item>
<item name="colorPrimaryDark">?secondaryVariant</item>
<item name="colorOnPrimary">?onSecondaryH</item>
<item name="colorSecondary">?primary</item>
<item name="colorOnSecondary">?onPrimaryH</item>
In Android's widget TextInputLayout the style of active error and hint is identical, like this
But when error is on, I want to see different color of hint (black, not red). How can I achieve this?
P.S. I've already tried to apply style programmatically with method .setHintTextAppearance(R.style.StyleName) but it didn't bring any effect
The code of TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="#+id/editTextClient"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColorHint="#color/colorPrimaryText"
app:errorEnabled="true"
app:hintEnabled="true"
android:hint="#string/login"
app:errorTextAppearance="#style/ErrorAppearence"
app:hintTextAppearance="#style/TextLabel"
app:helperTextTextAppearance="#style/TextAppearance.AppCompat.Body2">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textSize="14sp"
android:singleLine="true"
android:textColor="#color/colorPrimaryText"/>
</android.support.design.widget.TextInputLayout>
Styles
<style name="TextLabel" parent="TextAppearance.Design.Hint">
<item name="android:textColor">#color/colorPrimaryText</item>
<item name="android:textSize">12sp</item>
</style>
<style name="ErrorAppearence">
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textSize">12sp</item>
</style>
TextInputLayout working fine, when tried to set Error it showing error.
Code:
if (etFirstName.getText().length() == 0) {
etFirstName.requestFocus();
tvFirstName.setError("Please enter firstname");
} else {
tvFirstName.setError(null);
tvFirstName.setErrorEnabled(false);
}
Check Log:
java.lang.RuntimeException: Failed to resolve attribute at index 24
at android.content.res.TypedArray.getColor(TypedArray.java:401)
at android.widget.TextView.<init>(TextView.java:692)
at android.widget.TextView.<init>(TextView.java:629)
at android.widget.TextView.<init>(TextView.java:625)
at android.widget.TextView.<init>(TextView.java:621)
at android.support.design.widget.TextInputLayout.setErrorEnabled(TextInputLayout.java:297)
at android.support.design.widget.TextInputLayout.setError(TextInputLayout.java:344)
Although I did not fully understand why the problem occurs, it must have to do something about how Android applies colors to Views according to its states.
Here is the way I solved the problem:
1) Define custom style, that will be used only for styling the errors (or hints) only:
In your res/values/styles.xml add new style node:
<style name="error" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorAccent</item> <!--apply the color you wat here -->
<item name="android:textSize">12dp</item>
</style>
2) Apply the style to your TextInputLayout:
Also, make sure, that you specify errorEnabled attribute:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_email_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:errorEnabled="true"
app:errorTextAppearance="#style/error"
>
<android.support.design.widget.TextInputEditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/hint_email"/>
</android.support.design.widget.TextInputLayout>
Give valid style for your TextInputLayout(
android:theme="#style/Theme.AppCompat")
<android.support.design.widget.TextInputLayout
android:id="#+id/testingInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat">
<EditText
android:id="#+id/testingEditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/testText"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
You need to add appCompat & support design dependency (if not)
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
In your manifest file add AppCompat theme,
<application
...
android:theme="#style/Theme.AppCompat">
Sytle theme for textinputlayout :
<style name="HintInputTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:textColor">#color/input_floating_color</item>
<item name="android:textSize">22dp</item>
<item name="colorAccent">#color/input_floating_color</item>
</style>
<style name="InputTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:textColor">#ff000000</item>
<item name="android:textColorHint">#ff000000</item>
<item name="android:textSize">24dp</item>
<item name="colorAccent">#ff000000</item>
</style>
<style name="ErrorTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:textColor">#ffff0000</item>
<item name="android:textColorHint">#ffff0000</item>
<item name="android:textSize">18sp</item>
<item name="colorAccent">#ffff0000</item>
</style>
Use in Layout as :
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:id="#+id/name_signup"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorTextAppearance"
app:hintTextAppearance="#style/HintInputTextAppearance"
android:layout_marginLeft="#dimen/left_margin_login"
android:layout_marginRight="#dimen/right_margin_login"
android:layout_height="match_parent">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:textAppearance="#style/InputTextAppearance"
android:layout_height="wrap_content"
android:hint="Name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:id="#+id/email_signup"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorTextAppearance"
app:hintTextAppearance="#style/HintInputTextAppearance"
android:layout_marginLeft="#dimen/left_margin_login"
android:layout_marginRight="#dimen/right_margin_login"
android:layout_height="match_parent">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:textAppearance="#style/InputTextAppearance"
android:layout_height="wrap_content"
android:hint="Email" />
</android.support.design.widget.TextInputLayout>
Solution by #Sevastyan works great for using xml layout.
However, if i have a TextInputLayout and a TextInputEditText which i created programmatically, and i did this:
tilCode.setErrorEnabled(true);
tilCode.setErrorTextAppearance(R.style.error);
I will get an error. But just:
tilCode.setErrorTextAppearance(R.style.error);
Works for me.
Use this it never need Theme.AppCompat
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tv_metadata_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tv_metadata_Details"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
Use TextUtils
if(TextUtils.isEmpty(etFirstName.getText().toString()))
{
etFirstName.setError("Filed is mandatory!");
view = etFirstName;
}
Try below code to show error in TextInputLayout:
tvFirstName.setErrorEnabled(true);
tvFirstName.setError("Please Enter firstName");