TextAppearance override style's fontFamily

Question

I have a style for TextView with a custom fontFamily. Also, I have a separate style for my textAppearance.

When I set my TextView style and textAppearance style into single TextView, fontFamily became ignored. But everything workes when style set without textAppearace.

Style is set using Paris library from airbnb.

TextView style:

<style name="TextViewBold" parent="Widget.MaterialComponents.TextView">
    <item name="fontFamily">@font/roboto_bold</item>
    <item name="android:fontFamily">@font/roboto_bold</item>
    <item name="android:textColor">@color/black</item>
</style>

TextAppearance style:

<style name="TextAppearanceAllCaps">
    <item name="textAllCaps">true</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textColor">@color/anotherColor</item>
</style>

Styles set programmatically:

MaterialTextView(context!!).apply {
        style(R.style.TextViewBold) //Paris used here
        updateTextAppearance(R.style.TextAppearanceAllCaps) //custom extension
        setText(R.string.some_text)
}

Extension code:

fun TextView.updateTextAppearance(@StyleRes resId: Int) {
    TextViewCompat.setTextAppearance(this, resId)
}

How can I fix this behavior?

Answer 1

Just inherit the TextAppearance from a parent where the fontFamily is defined or add it in your custom TextAppearance.

For example:

<style name="TextViewBold" parent="Widget.MaterialComponents.TextView">
   <item name="android:textAppearance">TextAppearance.App</item>
</style>


<style name="TextAppearance.App" parent="TextAppearance.MaterialComponents.Body1">
   <item name="fontFamily">@font/roboto_bold</item>
   <!-- .... -->
</style>

<!-- Inherit from TextAppearance.App -->
<style name="TextAppearance.App.AllCaps"> 
   <item name="textAllCaps">true</item>
</style>

Then apply to the TextView the style @style/TextViewBold and update the textAppearance using the style/TextAppearance.App.AllCaps