Global style for new com.google.android.material.textfield.TextInputEditText - android

Is it possible to style the new com.google.android.material.textfield.TextInputEditText component without setting it for each component extra?
For example:
For the new TextInputLayout I can set the style globally in the following way:
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
.
.
.
<item name="textInputStyle">#style/MyTextInputLayoutStyle</item>
</style>
I expect for the TextInputEditText a similar way for example:
<item name="editTextStyle">#style/MyTextInputEditTextStyle</item>
but it's not working.
Here is a similar post but only for the old design support components.

The TextInputLayout overrides the editTextStyle attribute using the materialThemeOverlay attribute.
For example the Widget.MaterialComponents.TextInputLayout.FilledBox has this default style:
<style name="Widget.MaterialComponents.TextInputLayout.FilledBox" parent="Base.Widget.MaterialComponents.TextInputLayout">
<item name="materialThemeOverlay">
#style/ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox
</item>
....
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
<item name="editTextStyle">#style/Widget.MaterialComponents.TextInputEditText.FilledBox</item>
</style>
To globally define you have to define a style for the TextInputLayout extending one of the material themes.
Then you have to use the new materialThemeOverlay attribute. It allows you to override app theme attributes and you can change the editTextStyle attribute.
Something like:
<style name="MyCustomOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayOutlined</item>
</style>
In this way you can change the editTextStyle (app theme attribute) only for this component style.
<style name="MyThemeOverlayOutlined">
<item name="editTextStyle">#style/MyTextInputEditText_outlinedBox</item>
</style>
<style name="MyTextInputEditText_outlinedBox" parent="#style/Widget.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
....
</style>
Finally you can assign the MyCustomOutlined to a specific TextInputLayout in the layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/MyCustomOutlined"
.../>
or assign globally in your app theme using:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
....
<item name="textInputStyle">#style/MyCustomOutlined</item>
</style>

According to this comment, editTextStyle is the correct attribute to set.
https://github.com/material-components/material-components-android/blob/6c70169e8d4ae77429a9c57785e443b2a18b4aa3/lib/java/com/google/android/material/theme/res/values/attrs.xml#L85
See example usage in these styles:
https://github.com/material-components/material-components-android/blob/6c70169e8d4ae77429a9c57785e443b2a18b4aa3/lib/java/com/google/android/material/textfield/res/values/styles.xml#L141
Updated:
Please Set #style/ThemeOverlay.MaterialComponents.TextInputEditText inside your custom TextInputLayoutStyle.

Related

Can android:buttonStyle and android:imageButtonStyle be used for Theme.MaterialComponents?

For Theme.AppCompat, one can use android:buttonStyle and android:imageButtonStyle to style Button and ImageButton respectively for all activities. They do not seem to work for Theme.MaterialComponents. If not, what is the equivalent for Theme.MaterialComponents?
Could anyone shed some light on this?
The old theme example:
<style name="OnviferThemeStyle" parent="Theme.AppCompat">
...
<item name="android:buttonStyle">#style/fooButton</item>
<item name="buttonStyle">#style/fooButton</item>
<item name="android:imageButtonStyle">#style/fooImageButton</item>
<item name="imageButtonStyle">#style/fooImageButton</item>
</style>
With the MaterialComponents theme you can use the materialButtonStyle attribute.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="materialButtonStyle">#style/....</item>
</style>
For the ImageButton currently there isn't a Material Components. You can still use the ImageButton component and the imageButtonStyle attribute.

Android Material Chip Theme overriding

I want to customize a Material chip.
I would think this is how to do it:
<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
.... lots more theme stuff here
<item name="chipStyle">#style/MaterialChips</item>
<item name="chipGroupStyle">#style/MaterialChips</item>
<item name="chipStandaloneStyle">#style/MaterialChips</item>
</style>
<style name="MaterialChips" parent="Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/chips</item>
</style>
None of the tags like chipStyle affect the chips. But if I set app:chipBackgroundColor="#color/chips" in xml it works.
It also works fine like this for other things like say <item name="materialAlertDialogTheme">#style/AlertDialogTheme</item>.
The material documentation (if you can call it that) is really not helping.
Your app theme is correct.
The default style used by Chip component is defined in the app theme by the chipStyle attribute.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<!-- Default style for chip component -->
<item name="chipStyle">#style/Widget.MaterialComponents.Chip.Action</item>
</style>
You can customize this style using for example:
<style name="AppTheme" parent="Theme.MaterialComponents.*">
<!-- Default value for chipStyle -->
<item name="chipStyle">#style/MaterialChips</item>
</style>
<style name="MaterialChips" parent="#style/Widget.MaterialComponents.Chip.Choice">
<!-- ... -->
<item name="chipBackgroundColor">#color/chips</item>
</style>
If you specify the style attribute in your layout, this style overrides the default value.
<com.google.android.material.chip.Chip
style="#style/Widget.MaterialComponents.Chip.Entry"
.../>
In this case the Chip uses the Widget.MaterialComponents.Chip.Entry style.
if you define chip style in layout xml, chip override your theme.
It may work if you clear chip style in layout xml.

apply custom theme to custom view android

I'm trying to apply a theme to a CustomEditText which inherit directly from EditText like "android:theme" attribute would do to any other classic widget.
My theme don't use a style with custom attribute, it overloads my apptheme attributes to have a different "ColorControlNormal" attribute for exemple.
Here are my theme :
Apptheme :
<style name="Theme.Light.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:colorBackground">#android:color/white</item>
<item name="colorControlNormal">#color/pink</item>
<item name="android:textColorPrimary">#color/grey_dark</item>
<item name="colorControlActivated">#color/pink</item>
</style>
The theme I want to apply to my CustomEditText :
<style name="CustomEditTextTheme">
<item name="android:textSize">#dimen/font_medium</item>
<item name="android:ems">8</item>
<item name="colorControlNormal">#color/grey_medium</item>
<item name="colorControlActivated">#color/pink</item>
<item name="android:textColorHint">#color/grey_medium</item>
</style>
I already read this but I don't have custom style attributes and I can't apply "CustomEditTextTheme" to my whole activity.
Obviously, android:theme="#style/CustomEditText don't make the job.

Set a consistent style to all EditText (for e.g.)

I'm trying to make all EditText's in my application have a consistent look. I'm aware that I can do something like this:
<style name="App_EditTextStyle">
<item name="android:background">#drawable/filled_roundededges_box_dark</item>
<item name="android:textColor">#808080</item>
<item name="android:layout_height">45dip</item>
</style>
Then I can make a particular EditText have this style by doing this:
<EditText ...
style="#style/App_EditTextStyle
...>
But this way I have to remember to set the style individually for each and every EditText in my application which is tedious, if not error prone.
Is there some way I could make this a part of a theme or something? This is so I don't have to associate this style to every EditText. Something like this fictitious code block:
<style name="App_Theme" parent="#android:style/Theme.Holo">
...
<item name="android:EditTextSyle">#style/App_EditTextStyle</item>
...
<style>
And then in my AndroidManifest.xml I have something like:
<application
....
android:theme="#style/App_Theme">
And Voila! all my EditText's have the consistent style without me having to specify the style for each instance.
Override the attribute pointing to the EditText style(named editTextStyle :) ) in your custom theme:
<style name="App_Theme" parent="#android:style/Theme.Holo">
<item name="android:editTextStyle">#style/App_EditTextStyle</item>
</style>
and make your custom style to extend Widget.EditText:
<style name="App_EditTextStyle" parent="#android:style/Widget.EditText">
<item name="android:background">#drawable/filled_roundededges_box_dark</item>
<item name="android:textColor">#808080</item>
<item name="android:layout_height">45dip</item>
</style>
Edit:
If you're using the much newer AppCompat related themes use the editTextStyle attribute without the android prefix:
<style name="App_Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="editTextStyle">#style/App_EditTextStyle</item>
</style>
#Luksprog answer is correct but not working for me. After some experimentation, I found out that removing the android namespace from editTextStyle made it work for me.
<style name="App_Theme" parent="#android:style/Theme.Holo">
<item name="editTextStyle">#style/App_EditTextStyle</item>
</style>
and make your custom style to extend Widget.EditText or if using the AppCompat theme Widget.AppCompat.EditText:
<style name="App_EditTextStyle" parent="#android:style/Widget.EditText">
<item name="android:background">#drawable/filled_roundededges_box_dark</item>
<item name="android:textColor">#808080</item>
<item name="android:layout_height">45dip</item>
</style>
First, define the style for your EditText. Make sure that the parent style is android:Widget.EditText
<style name="CustomEditTextStyle" parent="android:Widget.EditText">
<item name="android:textColor">#0F0F0F</item>
<!-- ... More items here if needed ... -->
</style>
After that, override the attribute android:editTextStyle in your custom theme. Be aware, if you are using the support library, you will also need to override the attribute editTextStyle (without the android namespace).
<style name="App_Theme" parent="...">
<item name="android:editTextStyle">#style/CustomEditTextStyle</item>
<item name="editTextStyle">#style/CustomEditTextStyle</item> <!-- For compatibility with the support library -->
</style>
If you just need to set a few simple parameters, like text color, the Android namespace has a few parameters that will do that without the need to declare a separate style for the edit text. Eg
<style name="MyStyle" parent="android:Theme.Material.NoActionBar">
<item name="colorPrimary">#color/black</item>
<item name="colorPrimaryDark">#color/white</item>
<item name="colorAccent">#color/white</item>
<item name="android:textColor">#color/black</item>
<item name="android:editTextColor">#color/black</item>
<item name="android:editTextBackground">#color/black</item>
....
</style>
<style name="App_Theme" parent="#android:style/Theme.Holo">
<item name="android:editTextBackground">#drawable/filled_roundededges_box_dark</item>
</style>

textColor not applied when used as them

I have a style that includes textColor, textSize, textStyle and typeface. When applied directly to an EditText widget, the color of the text is as specified (as well as the other attributes), but when applied as a theme to the activity or the entire application, the size is fine but the color is not applied. What I am missing?
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="fap" parent="android:Theme.Holo">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#FF0000</item>
<item name="android:textStyle">normal</item>
<item name="android:typeface">normal</item>
</style>
</resources>
This is quite simple : you are not overriding android default style, your just creating a new one which extends android:Widget.EditText. Thus, the style is not applied.
To correct this, into your theme definition, just add :
<item name="android:editTextStyle">#style/fap</item>
Now, each time Android instanciate an EditText, when it load default style values, it will find your fap style.
Edit:
searching through android's source code is very usefull. Check https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/attrs.xml
https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/themes.xml
https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/styles.xml
https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/widget/EditText.java
for example.
EditText widget just can't get these parameters from an activity theme. It gets its default style from the android:editTextStyle parameter of the activity theme. So you have to create your own style:
<style name="MyEditText" parent="android:Widget.EditText">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#FF0000</item>
<item name="android:textStyle">normal</item>
<item name="android:typeface">normal</item>
</style>
And then set it as EditText style in the activity theme:
<style name="fap" parent="android:Theme.Holo">
<item name="android:editTextStyle">#style/MyEditText</item>
</style>
Hope this will work because I haven't tried this code.

Categories

Resources