android-tv Changing text color and font of browse fragment rows header

Question

How to change text color and font of rows header in browse fragment?. The text not in menu but the text that appears above the rows.

Marlysmarmaduke

Answer 1

I am assuming you are using the provided android.support.v17.leanback.widget.RowHeaderPresenter as the presenter for the HeaderFragment in your BrowseFragment.

The RowHeaderPresenter inflates the layout from R.layout.lb_row_header which looks like this:

<android.support.v17.leanback.widget.RowHeaderView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row_header"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="?rowHeaderStyle" />

As you can see, this uses a style attribute called rowHeaderStyle, which is normally pointing to @style/Widget.Leanback.Row.Header. You can override this by putting the following in your styles.xml:

<style name="MyCustomRowHeaderStyle" parent="Widget.Leanback.Row.Header">
    <item name="android:textColor">@color/red</item>
</style>

<style name="MyCustomBrowseStyle" parent="Theme.Leanback.Browse">
    <item name="rowHeaderStyle">@style/MyCustomRowHeaderStyle</item>
</style>

And then use MyCustomBrowseStyle for the Activity containing the BrowseFragment by declaring it in your AndroidManifest.xml.

Limulus

Answer 2

In addition to David's answer.

rowHeaderStyle applies the style both to menu items in HeaderFragment and row titles in RowFragment (these two fragments compose your BrowseFragment).

If you want their styles (font colors in particular) to be different, you can override BrowseFragment::onCreateHeadersFragment() and apply specific theme at that point.

1) Add these styles to styles.xml:

<style name="AppTheme.Leanback.Browse.Row" parent="@style/Theme.Leanback.Browse">
    <item name="rowHeaderStyle">@style/AppTheme.Leanback.Row</item>
</style>

<style name="AppTheme.Leanback.Browse.Header" parent="@style/AppTheme.Leanback.Browse.Row">
    <item name="rowHeaderStyle">@style/AppTheme.Leanback.Header</item>
</style>

<style name="AppTheme.Leanback.Row" parent="Widget.Leanback.Row.Header">
    <item name="android:textColor">@color/font_row</item>
</style>

<style name="AppTheme.Leanback.Header" parent="Widget.Leanback.Row.Header">
    <item name="android:textColor">@color/font_header</item>
</style>

2) Apply AppTheme.Leanback.Browse.Row theme to your activity in manifest.

3) Apply AppTheme.Leanback.Browse.Header theme to headers in your BrowseFragment:

// Kotlin snippet
override fun onCreateHeadersFragment() : HeadersFragment {
    class CustomHeadersFragment : HeadersFragment() {
        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
            return super.onCreateView(
                    inflater.cloneInContext(ContextThemeWrapper(inflater.context, R.style.AppTheme_Leanback_Browse_Header)),
                    container,
                    savedInstanceState
            )
        }
    }

    return CustomHeadersFragment()
}

Veterinarian

I couldn't find where override to onCreateHeadersFragment. Apparently I was running an older version of leanback, this method has recently been added to 25.3.0. developer.android.com/reference/android/support/v17/leanback/… – Corps

Answer 3

The answer by david.mihola helps with the color, however I still had problems with setting a custom font globally. For everybody who stumbles upon this question and is puzzled about this as well, here is my solution:

Thanks to the awesome work done by chrisjenx (Calligraphy), you can easily set a global (custom) font.

Simply add Calligraphy to your gradle.build and add the following snippet to your Application.onCreate():

CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                        .setDefaultFontPath("fonts/MyCustomFont.ttf")
                        .setFontAttrId(R.attr.fontPath)
                        .build()
        );

and in every Activity add the following:

@Override
protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

This has done the font-trick for me on every single TextView, without modifying layouts. The documentation of Calligraphy also offers some more possibilities. Check it out.

I hope this helps other people who find this question and are trying to set (custom) fonts globally.

Tedi