I have a strange bug on a TextInputLayout. The color of the hint of the com.google.android.material.textfield.TextInputEditText goes white on focus.
this is how I am setting it:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/inputEmail"
style="#style/EditText.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:boxStrokeColor="#color/colorBrand">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:hint="#string/edt_hint_email"
android:inputType="textEmailAddress"
android:textAlignment="viewStart" />
</com.google.android.material.textfield.TextInputLayout>
..and this is the style:
<style name="EditText.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:minHeight">56dp</item>
<item name="android:textSize">18sp</item>
<item name="android:fontFamily">#font/dubai_regular</item>
<item name="hintEnabled">true</item>
</style>
edit: add style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TextAppearance.AppCompat.Title" parent="TextAppearance.AppCompat.Large">
<item name="android:textColor">#color/colorTextPrimary</item>
<item name="android:layout_gravity">center_vertical</item>
</style>
<style name="EditText.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:minHeight">56dp</item>
<item name="android:textSize">18sp</item>
<item name="android:fontFamily">#font/dubai_regular</item>
<item name="hintEnabled">true</item>
</style>
<style name="Button" parent="Widget.MaterialComponents.Button">
<item name="cornerRadius">10dp</item>
<item name="backgroundTint">#color/colorAccent</item>
<item name="android:minHeight">56dp</item>
<item name="android:textAllCaps">false</item>
<item name="android:fontFamily">#font/dubai_bold</item>
<item name="android:elevation">0dp</item>
<item name="android:stateListAnimator">#null</item>
</style>
<style name="Button.Primary">
<item name="backgroundTint">#color/colorAccent</item>
</style>
<style name="DialogAnimation">
<item name="android:windowEnterAnimation">#anim/slide_up_dialog</item>
<item name="android:windowExitAnimation">#anim/slide_out_down</item>
</style>
<style name="Tag" parent="TextAppearance.AppCompat">
<item name="android:background">#drawable/tag_navy</item>
<item name="android:fontFamily">#font/dubai_bold</item>
<item name="android:textSize">12sp</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingTop">6dp</item>
<item name="android:paddingBottom">6dp</item>
<item name="android:gravity">center</item>
<item name="android:textColor">#color/colorWhite</item>
</style>
<style name="Tag.Closed">
<item name="android:background">#drawable/ic_tag_closed</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="Tab.TextAppearance" parent="TextAppearance.AppCompat">
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">#font/dubai_bold</item>
</style>
</resources>
Just Add Hint text color inside your EditText.OutlinedBox style.
TextInputLayout have specified the property for changing the color of hint and error.
<item name="android:textColorHint"> #Your Color </item>
<item name="hintTextColor"> #Your Color </item>
Here I have two different Hint Text color specified
1) android:textColorHint and 2) hintTextColor
Because this both works differently.
android:textColorHint property will handle the text color of hint of the EditText.
hintTextColor property will handle the text color of hint on the outline box.
Try app:hintTextAppearance="#style/hintText" for TextInputLayout
<style name="hintText" parent="android:TextAppearance">
<item name="android:textColor">your color</item>
</style>
Related
The Hint is always vertically centred and I want it to be aligned to the bottom of the view close to the border with a bit padding. I managed to do it for the text of the TextInputEditText but I cannot do it for the hint.
Here's how it looks
And here is my layout XML:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/first_name_layout"
style="#style/My.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/first_name"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/first_name_edit_text"
style="#style/TextInputEditTextForm"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
And my styles.xml
<style name="My.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPadding</item>
<item name="android:gravity">bottom</item>
<item name="android:textColorHint">#color/gray</item>
<item name="boxBackgroundColor">#android:color/transparent</item>
<item name="boxStrokeColor">#color/grey_little</item>
<item name="boxStrokeWidth">0.5dp</item>
<item name="hintTextAppearance">#style/FormInputLabel</item>
<item name="hintTextColor">#color/gray</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="colorControlActivated">#color/gray_light</item>
<item name="editTextStyle">#style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<item name="android:paddingBottom">5dp</item>
</style>
<style name="TextInputEditTextForm" >
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:gravity">bottom</item>
<item name="android:lines">1</item>
<item name="android:textColor">#color/gray_x_dark</item>
<item name="android:textSize">#dimen/text_xx_small</item>
</style>
<style name="MyThemeOverlayFilledPaddingHint">
<item name="android:paddingBottom">5dp</item>
<item name="android:gravity">bottom</item>
</style>
<style name="FormInputLabel" parent="TextAppearance.Design.Hint">
<item name="android:textSize">#dimen/text_xxxx_small</item>
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPaddingHint</item>
<item name="android:gravity">bottom</item>
</style>
The hint is drawn by helper class CollapsingTextHelper which is available in private-package scope.
You can access the field via reflection but accessing private field is only available on pre Orea devices
I try like this:
styles.xml:
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:layout_marginBottom">12dp</item>
<item name="android:backgroundTint">#color/editTextUnderline</item>
<item name="android:drawableLeft">#drawable/ic_sample_action</item>
<item name="android:drawablePadding">8dp</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">25dp</item>
<item name="android:textColor">#color/colorTextPrimary</item>
<item name="android:textColorHint">#color/editTextHintColor</item>
<item name="android:textSize">16sp</item>
<item name="android:fontFamily">#font/viga</item>
<item name="android:inputType">text</item>
</style>
And then I use it in layout file:
<EditText
style="#style/EditTextStyle"
android:id="#+id/input_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Title"
android:text="#={viewModel.title}" />
However I do not see any changes. Why could that be?
I chanded style parent to #style/Widget.AppCompat.EditText and it worked.
I am using TextInputEditText in my registration screen. I am able to set the style of floating label. I want to set the custom font on hint and text of TextInputEditText using style. Does anyone know whats way of it ?
<android.support.design.widget.TextInputLayout
android:id="#+id/til_registration_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingEnd="#dimen/default_view_padding_right_8dp"
android:paddingStart="#dimen/default_view_padding_left_8dp"
android:textColorHint="#color/colorSecondaryText"
app:hintTextAppearance="#style/AppTheme.InputLayoutStyle"
app:layout_constraintTop_toBottomOf="#id/textview_registration_title">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/registration_name"
android:imeOptions="actionNext"
android:singleLine="true"
android:textColor="#color/colorPrimaryText" />
</android.support.design.widget.TextInputLayout>
styles.xml
<style name="AppTheme.InputLayoutStyle" parent="TextAppearance.AppCompat">
<item name="android:textColor">#color/colorPrimary</item>
<item name="fontFamily">#font/lato_light</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.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="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textViewStyle">#style/AppTheme.TextView</item>
<item name="buttonStyle">#style/AppTheme.Button</item>
</style>
I want to set style for entire application.
Old question but worth to answer.
Just set the "textInputStyle" to style the TextInputLayouts and "editTextStyle" to style the TextInputEditTexts in your app theme.
<style name="AppTheme" parent="Theme.AppCompat.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="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textViewStyle">#style/AppTheme.TextView</item>
<item name="buttonStyle">#style/AppTheme.Button</item>
<item name="textInputStyle">
#style/MyCustomTextInputStyle
</item>
<item name="editTextStyle">
#style/MyCustomEditTextStyle
</item>
</style>
<style name="MyCustomTextInputStyle" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">#color/colorSecondaryText</item>
<item name="hintTextAppearance">#style/any_style_you_may_want"</item>
</style>
<style name="MyCustomEditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#color/colorPrimary</item>
<item name="fontFamily">#font/lato_light</item>
</style>
This will apply the same style to all TextInputLayout and TextInputEditText in you application.
I cant figure out why my text color for the spinner does not change color. Could you help with figuring this out please.
<style name="Theme.Material_Dark." parent="Theme.AppCompat.Light.NoActionBar">
</style>
<style name="ActionBarThemeOverlay" parent="">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerStyle">#style/SpinnerItem.DropDownItem</item>
</style>
<style name="SpinnerItem" parent="#android:style/Widget.TextView.SpinnerItem">
<item name="android:textColor">#color/actionbar_bg_dk</item>
</style>
<style name="SpinnerItem.DropDownItem" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
<item name="android:textColor">#color/White</item>
<item name="android:popupBackground">#424242</item>
</style>
Create a TextView layout.
dropdown_spinner_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:textColor="#color/colorBlack"
android:background="#color/colorWhite"/>
Then set that as your dropdown resource.
spinnerAdapter.setDropDownViewResource(R.layout.dropdown_spinner_text);
add the the declared item style to textAppearance
<style name="ActionBarThemeOverlay" parent="">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
</style>
<style name="SpinnerItem" parent="#android:style/Widget.TextView.SpinnerItem">
<item name="android:textColor">#color/actionbar_bg_dk</item>
<item name="android:textAppearance">#style/SpinnerItem.DropDownItem"</item>
</style>
<style name="SpinnerItem.DropDownItem" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
<item name="android:textColor">#color/White</item> //drop down item text color
<item name="android:popupBackground">#424242</item>
</style>
I have been trying to apply style to a EditText and a Toolbar and it seems not to work, it's the first time that is happening to me, here is my code for styles:
<resources>
<style name="WifiHome" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/light_blue</item>
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
<item name="android:textColor">#color/dark_blue</item>
</style>
<style name="WifiHomeBarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">#color/dark_blue</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="background">#color/dark_blue</item>
</style>
<style name="EditTextStyle" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/dark_blue</item>
<item name="colorControlActivated">#color/dark_blue</item>
<item name="colorControlHighlight">#color/dark_blue</item>
</style>
<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
</style>
<style name="WifiHomeTextAppearance" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/dark_blue</item>
<item name="android:textSize">15dp</item>
</style>
<style name="WifiHomeTextAppearance.Large" parent="#style/WifiHomeTextAppearance">
<item name="android:textSize">18dp</item>
<item name="android:textStyle">bold</item>
</style>
Here the declaration of EditText:
<EditText
style="#style/EditTextStyle"
android:id="#+id/txtPass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:textColor="#color/dark_blue"
android:layout_below="#id/lblPass"/>
And the declaration of toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/WifiHomeBarStyle"
android:id="#+id/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/dark_blue"
android:minHeight="?attr/actionBarSize" />
Simply it doesn't work, no effect.
Try changing your code like this,
<style name="WifiHome" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/light_blue</item>
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
<item name="android:textColor">#color/dark_blue</item>
<item name="colorControlNormal">#color/dark_blue</item>
<item name="colorControlActivated">#color/dark_blue</item>
<item name="colorControlHighlight">#color/dark_blue</item>
</style>
OR something like this in your EditText definition,
style="#style/Widget.AppCompat.EditText