Style custom TextInputLayout attribut from within theme

Question

In design library source we can find this line:

<declare-styleable name="TextInputLayout">
    <attr format="reference" name="hintTextAppearance"/>
    <attr name="android:hint"/>
    <attr format="boolean" name="errorEnabled"/>
    <attr format="reference" name="errorTextAppearance"/>
    <attr format="boolean" name="counterEnabled"/>
    <attr format="integer" name="counterMaxLength"/>
    <attr format="reference" name="counterTextAppearance"/>
    <attr format="reference" name="counterOverflowTextAppearance"/>
    <attr name="android:textColorHint"/>
    <attr format="boolean" name="hintAnimationEnabled"/>
</declare-styleable>

I want to change the color of the error text through errorTextAppearance attribut

I know how to customize it through app:{atribut-name} in the TextInputLayout xml declaration but how can I get to customize one of this attribut from within my theme definition ?

Answer 1

styles.xml:

<style name="TextInputLayout.Error" parent="@style/TextAppearance.Design.Error">
    <item name="android:textColor">@color/textinput_error_color</item>
</style>

<style name="Theme.AppName.TextInputLayout" parent="@style/Widget.Design.TextInputLayout">
    <item name="errorTextAppearance">@style/TextInputLayout.Error</item>
</style>

in your layout:

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Theme.AppName.TextInputLayout">

                ...
            </android.support.design.widget.TextInputLayout>

Also you can add other items from Widget.Design.TextInputLayout in Theme.AppName.TextInputLayout

Answer 2

To make it simpler, you have a custom view that holds a set of attributes. To provide values there are three different ways from the bottom (view) to top (application)

1. Provide values to views from attributes or programmatically
2. Create different styles and assign them to this view using style="@style/MyStyle"
3. Create an attribute and assign this to the defStyleAttr parameter of the constructor of your custom view. And assign a style to this attribute in your theme and Voila!!

For the first two, it is straight forward. Let's concentrate on the last method. There are four steps to achieve this

Step 1

Create an attribute (generally in res/values/attrs.xml file

<resources>
    <attr name="myCustomViewAttr" format="reference" />

    <!-- Below are your set of attributes in declare styleable -->
    <declare-styleable name="TextInputLayout">
       <attr format="reference" name="hintTextAppearance"/>
       <attr name="android:hint"/>
       <attr format="boolean" name="errorEnabled"/>
       <attr format="reference" name="errorTextAppearance"/>
       <attr format="boolean" name="counterEnabled"/>
       <attr format="integer" name="counterMaxLength"/>
       <attr format="reference" name="counterTextAppearance"/>
       <attr format="reference" name="counterOverflowTextAppearance"/>
       <attr name="android:textColorHint"/>
       <attr format="boolean" name="hintAnimationEnabled"/>
    </declare-styleable>
</resources>

Step 2

Using this newly created attribute inside your custom view.

Assuming your custom view's class name is MyCustomView. Your class's constructor will look something like this

class MyCustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = R.attr.myCustomViewAttr
) : TextInputLayout(context, attrs, defStyleAttr)

This will enforce MyCustomView to use attributes from myCustomViewAttr if nothing is provided for the attributes in the layout.

Step 3

Create a style, which is the easiest and used by most of them

<style name="Widget.MyApp.MyCustomView" parent="">
   <!-- Assuming you have already defined TextAppearance.MyApp.ErrorText as you required -->
   <item name="errorTextAppearance">@style/TextAppearance.MyApp.ErrorText</item>
</style>

In case, you want to assign some other attribute to your errorTextAppearance, then

<style name="Widget.MyApp.MyCustomView" parent="">
   <!-- Assuming you have already defined TextAppearance.MyApp.ErrorText as you required -->
   <item name="errorTextAppearance">?attr/myAnotherDefinedAttribute</item>
</style>

Step 4

Last and final step, assign the style to the attribute

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
   <item name="myCustomViewAttr">@style/Widget.MyApp.MyCustomView</style>
</style>

If your text appearance comes from some other attribute, then you can directly assign the attribute

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
   <item name="myCustomViewAttr">?attr/textAppearanceForError</style>
</style>