As per Googles Material Guidelines:
https://material.io/guidelines/components/text-fields.html#text-fields-layout
TextInputLayout hint should be the same color as the Error message:
However it is not like that and when I call setError("My error") only the underline and the error message show up in red.
How can I change this behavior to account for Google's own guidelines?
Here is how you can do it:
<android.support.design.widget.TextInputLayout
android:padding="8dp"
android:id="#+id/tilSample"
app:errorTextAppearance="#style/error_appearance"
app:hintTextAppearance="#style/error_appearance"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/etSample"
android:layout_margin="8dp"
android:padding="8dp"
android:hint="android"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
style.xml
<style name="error_appearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorRed</item>
<item name="android:textSize">12sp</item>
</style>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorRed">#f44336</color>
</resources>
EDIT
We can manipulate the error and hint colours in code also using:
tilSample.setErrorTextAppearance(R.style.error_appearance);
tilSample.setHintTextAppearance(R.style.error_appearance);
Now this is default behaviour. To achieve this, just update your support library version to 28+.
implementation 'com.android.support:design:28.0.0'
We can manipulate the error as helper text because if you set an error it will definitely change the hint color, so I just used helperText instead of setError, here is an example
XML File
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutUserName"
android:layout_width="#dimen/view_0x"
android:layout_height="wrap_content"
style="#style/errorEnabledtextInputLayoutStyle">
<EditText
android:id="#+id/editTextUserName"
android:gravity="center_vertical"
android:background="#drawable/edit_text_background"
android:backgroundTint="#color/colorGray"
android:hint="#string/aap_ka_naam"
android:singleLine="true"
style="#style/standardTextViewStyle"
tools:targetApi="lollipop"
app:layout_constraintHorizontal_bias="0.0"/>
</com.google.android.material.textfield.TextInputLayout>
edit_text_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-3dp" android:left="-3dp" android:right="-3dp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#color/colorWhite" />
<padding android:bottom="50dp" android:top="10dp" android:right="10dp"android:left="5dp"/>
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
Styles
<style name="errorEnabledtextInputLayoutStyle">
<item name="hintTextColor">#color/colorGraySix</item>
<item name="helperTextTextColor">#color/colorNegative</item>
<item name="hintEnabled">true</item>
</style>
Function
fun TextInputLayout.setErrorText(error : String, editText: EditText) {
this.helperText = error
editText.backgroundTintList = ColorStateList.valueOf(
ResourcesCompat.getColor(resources,
R.color.colorNegative, null)
)
}
Usage
textInputLayoutUserName.setErrorText(getString(R.string.name_error), editTextUserName)
TextInputLayout in Xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:id="#+id/tx_login_password"
app:errorEnabled="true"
style="#style/text_input_style"
app:passwordToggleEnabled="true"
app:hintTextAppearance="#style/text_Apearence"
android:layout_below="#id/tx_login_username"
android:layout_centerHorizontal="true"
app:theme="#style/Theme.App.Base"
android:layout_marginLeft="70dp"
android:layout_marginStart="70dp"
android:layout_marginRight="70dp"
android:layout_marginEnd="70dp"
app:errorTextAppearance="#style/text_Apearence"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:hint="Password"
android:paddingTop="5dp"
android:typeface="sans"
android:textStyle="bold"
android:textSize="15sp"
android:maxLines="1"
android:inputType="textPassword"
android:lines="1"
android:elegantTextHeight="true"
android:textAlignment="viewStart"
android:layout_gravity="start"
android:id="#+id/password"
android:theme="#style/Theme.App.Base"
app:theme="#style/Theme.App.Base"
style="#style/EditText_style"
/>
</android.support.design.widget.TextInputLayout>
text_Apearence in style.xml file from resourses
<style name="text_Apearence" parent="TextAppearance.Design.Hint">
<item name="android:textSize">15sp</item>
<item name="textColor">#color/react_blue</item>
<item name="android:colorActivatedHighlight">#color/react_blue</item>
<item name="android:colorControlActivated">#color/react_blue</item>
</style>
1. 3. Style for Text Input Layout text_input_style XML file
<!-- begin snippet: js hide: false console: true babel: false -->
Style for Text Input Layout text_input_style XML file
<style name="text_Apearence" parent="TextAppearance.Design.Hint">
<item name="android:textSize">15sp</item>
<item name="textColor">#color/react_blue</item>
<item name="android:colorActivatedHighlight">#color/react_blue</item>
<item name="android:colorControlActivated">#color/react_blue</item>
</style>
Image Looks Like
Here is another method which you may would try
fun wrapInCustomStyle(myText: String): Spannable? {
val spannable = SpannableString(myText) Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
//Test 'Alignment.ALIGN_OPPOSIT' Too if not working
spannable.setSpan(
AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL), 0,
myText.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
return spannable
}
InputLayout.error=wrapInCustomStyle("sample")
You can use the "helperTextTextColor" attribute to do this.
<com.google.android.material.textfield.TextInputLayout
app:hintTextColor="#color/color_login_text_hint"
app:helperTextTextColor="#color/error_color">
</com.google.android.material.textfield.TextInputLayout>
Here is an example:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/email_layout"
android:textColorHint="#color/gray"
app:errorTextAppearance="#style/TextAppearence.App.TextInputLayout"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_email"
style="#style/TextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:cursorVisible="true"
android:gravity="center|left|bottom"
android:hint="#string/email"
android:inputType="textEmailAddress"
android:maxLength="50"
android:paddingBottom="10dp"
android:textColor="#color/black_effective"
android:textSize="18sp" />
</android.support.design.widget.TextInputLayout>
Style File:
<style name="TextAppearence.App.TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/gray</item>
</style>
Snapshot:
<style name="text_Apearence" parent="TextAppearance.Design.Hint">
<item name="android:textSize">15sp</item>
<item name="textColor">#color/react_blue</item>
<item name="android:colorActivatedHighlight">#color/react_blue</item>
<item name="android:colorControlActivated">#color/react_blue</item>
</style>
Related
I am new at using material design. I have custom background but my TextInputEditText background red when i set error message; it shows on touch in TextInputEditText.
How can i remove this red error background from TextInputEditText,
Here is my design xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/userIdLayout"
android:layout_width="wrap_content"
app:boxBackgroundMode="none"
app:boxBackgroundColor="#android:color/transparent"
app:hintEnabled="false"
app:errorEnabled="true"
app:errorTextColor="#color/red"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/userId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTintMode="#null"
android:background="#drawable/border_blue_fill_white_rectangle"
android:drawableStart="#drawable/ic_account"
android:drawablePadding="8dp"
android:ems="14"
android:fontFamily="#font/carrois_gothic"
android:hint="#string/userId"
android:longClickable="false"
android:inputType="text"
android:maxLines="1"
android:paddingStart="16dp"
android:paddingTop="12dp"
android:paddingEnd="24dp"
android:paddingBottom="12dp"
android:text="#={LoginViewModel.userId}"
android:textSize="16sp"
android:textColor="#color/colorPrimaryDark"
android:importantForAutofill="no" />
</com.google.android.material.textfield.TextInputLayout>
Here is my style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorError">#android:color/transparent</item>
<item name="windowActionBar">false</item>
<item name="editTextBackground">#color/white</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:actionMenuTextAppearance">#style/AppTheme.PopupOverlay</item>
</style>
Here is my custom background
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle"
android:color="#android:color/transparent" >
<solid android:color="#android:color/white" />
<corners android:radius="32dp" />
<stroke
android:width="2px"
android:color="#color/colorPrimaryDark" />
</shape>
Here is image
Don't use the android:background on the TextInputEditText. Just apply the style Widget.MaterialComponents.TextInputLayout.OutlinedBox:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/..."
app:boxBackgroundColor="#color/white"
android:hint="..."
app:startIconDrawable="#drawable/...."
app:shapeAppearanceOverlay="#style/corner32"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
....>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/userId"
android:drawablePadding="8dp"
android:ems="14"
android:longClickable="false"
android:inputType="text"
android:maxLines="1"
android:paddingStart="16dp"
android:paddingTop="12dp"
android:paddingEnd="24dp"
android:paddingBottom="12dp"
android:text="User id"
android:textSize="16sp"
android:textColor="#color/colorPrimaryDark"
android:importantForAutofill="no"
.... />
</com.google.android.material.textfield.TextInputLayout>
with this simple shapeAppearanceOverlay
<style name="corner32" parent="">
<item name="cornerSize">32dp</item>
</style>
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>
I use material. I'm going to use a color for TextInputLayout for the backdrop, but something like the one below! hint background not change.i used style and wanted to make changes but it didn't work. In the layout itself I tried to apply the changes again! How to fix this problem?
NOTE
background of label username in picture that not transparent and it covers some of the TextInputEditText
in build.gradle
implementation 'com.google.android.material:material:1.1.0'
in style
<!-- 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>
<item name="textAppearanceSubtitle1">#style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceCaption">#style/TextAppearance.App.Caption</item>
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light"/>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
<item name="android:textColorTertiary">#color/white</item>
<item name="android:textColorTertiaryInverse">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
<item name="colorControlActivated">#color/white</item>
<item name="android:colorControlActivated">#color/white</item>
</style>
in layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/linUsername"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:hint="#string/label_username"
android:textColorHint="#AEB0C6"
app:boxBackgroundColor="#33385E"
app:boxStrokeColor="#color/red"
app:endIconDrawable="#drawable/ic_clear_white_24dp"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6"
app:hintTextColor="#AEB0C6"
app:startIconDrawable="#drawable/ic_info_outline_white_24dp"
app:startIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#color/white"
android:textColorHint="#color/white"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:fontFamily="#font/iran_sans_mobile"
android:text="login"
android:visibility="visible"
app:cornerRadius="#dimen/radiusButton" />
</LinearLayout>
You may use custom edit text with border, so you can easily set your desired background. For example try this code:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:background="#drawable/boarder"
android:paddingLeft="5dp"
android:text="input"
app:endIconMode="password_toggle"
app:endIconTint="#EF0707" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="7dp"
android:background="#fff"
android:text="Label" />
</RelativeLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#03A6F0" />
<corners android:radius="12dp" />
</shape>
Also see here: Custom edit text with borders
If you don't like to use custom edit text, you can modify your code this way:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/linUsername"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
android:textColorHint="#ED0A0A"
app:boxBackgroundColor="#1A33385E"
app:endIconMode="password_toggle"
app:endIconTint="#AEB0C6">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtUsername"
android:background="#drawable/boarder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:textColor="#fff"
android:text="User"
android:textColorHint="#fff"
app:hintTextColor="#AEB0C6" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnSelectText"
android:layout_width="168dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="login"
android:visibility="visible"
app:cornerRadius="10dp" />
</LinearLayout>
And in boarder.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#8033385E"/>
<corners android:radius="12dp" />
</shape>
Output will be:
I'm using the Material design library to make a rounded editText, and I was able to do that but now I want it to look a bit smaller, I used the dense textField style but I still want the height of the view to be smaller than that.
The problem is that floating Label tag, I haven't set a hint for the textField but the Label Tag is still taking up some empty space.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_speaker_24dp"
app:layout_constraintBottom_toBottomOf="#+id/topBar_view"
app:layout_constraintEnd_toEndOf="#+id/topBar_view"
app:layout_constraintStart_toEndOf="#+id/separater_line"
app:layout_constraintTop_toTopOf="parent"
app:boxCornerRadiusTopStart="20dp"
app:boxCornerRadiusTopEnd="20dp"
app:boxCornerRadiusBottomStart="20dp"
app:boxCornerRadiusBottomEnd="20dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
I just want the textField to look like the chrome url search bar, slim and the hint disappear when typing, not a floating Label.
Edit: I tried the app:hintEnabled="false" attribute but there is still an empty space
You can use app:hintEnabled="false" to disable the floating label functionality. Also you can customize the dense style.
You can use something like:
<com.google.android.material.textfield.TextInputLayout
app:hintEnabled="false"
style="#style/MyDenseOutlined"
...>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
with this style:
<style name="MyDenseOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="materialThemeOverlay">#style/MyThemeOverlayOutlinedDense</item>
</style>
<style name="MyThemeOverlayOutlinedDense">
<item name="editTextStyle">#style/MyTextInputEditText_outlinedBox_dense_h
</item>
</style>
<style name="MyTextInputEditText_outlinedBox_dense_h" parent="#style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
</style>
Here the results (with a default style and the custom style):
Just set the TextInputEditText padding to 8dp for example. You shouldn't set a label/hint in that case.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Some text" />
</com.google.android.material.textfield.TextInputLayout>
Will look like this:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etemailLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint=" ">
<EditText
android:id="#+id/txtemail"
style="#style/login_edittext"
android:hint="Enter Your Email Address"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etPasswordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint=" "
android:scrollbars="vertical"
app:counterEnabled="true"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/txtpassword"
style="#style/login_edittext"
android:hint="Enter Password"
android:inputType="textPassword"
android:maxLength="8"
android:scrollbars="vertical" />
</com.google.android.material.textfield.TextInputLayout>
for apply style to your EditText put below code in Styles.xml ..
<style name="login_edittext">
<item name="android:layout_marginTop">15dp</item>
<item name="android:background">#drawable/edittext_background</item>
<item name="android:textColorHint">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
for backgroud effect create edittext_background.xml in drawable..
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="7dp" />
<solid android:color="#80ffffff" />
<padding android:left="10dp" android:right="10dp"
android:top="10dp" android:bottom="10dp" />
<stroke android:width="2dp" android:color="#FFFFFF" />
</shape>
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"