Android TV Leanback: HeadersSupportFragment — Detailed Directions

Study the small print of the consumer’s welcome display screen to create a extra partaking and customized expertise

Understanding the internals of the Leanback API could be difficult at occasions, however that is what we, as builders, must do to verify we are able to create apps that look and performance correctly. genuine with its customers. On this submit, we are going to dive into HeadersSupportFragmentis part of BrowseSupportFragmentand is sort of all the time the primary piece of content material a consumer sees in an Android TV app. We are going to study its creation course of, the way it works and the way we are able to customise it.

As acknowledged within the introduction, the HeadersSupportFragment Is part of BrowseSupportFragment. The BrowseSupportFragment is often the primary display screen customers see when opening the Android TV app, and it is the place customers can browse and uncover content material.

HeadersSupportFragment creation and configuration

The BrowseSupportFragment there’s a operate known as onCreateHeadersSupportFragment() liable for returning an occasion of HeadersSupportFragment used inside it. It is a public operate, so you possibly can override it if you wish to present your personal customized implementation HeadersSupportFragment.

public HeadersSupportFragment onCreateHeadersSupportFragment() {
return new HeadersSupportFragment();
}

Then nonetheless in BrowseSupportFragment.onCreateView() the HeadersSupportFragment added to its container by a FragmentTransaction carried out by BrowseSupportFragment. Then the next steps happen:

• Replace HeadersSupportFragment visibility based mostly on standing handed to BrowseSupportFragment.setHeaderState(state). Out there states are:

/** The headers fragment is enabled and proven by default. */
public static closing int HEADERS_ENABLED = 1;
/** The headers fragment is enabled and hidden by default. */
public static closing int HEADERS_HIDDEN = 2;
/** The headers fragment is disabled and can by no means be proven. */
public static closing int HEADERS_DISABLED = 3;

• name HeadersSupportFragment.setPresenterSelector() overcome PresenterSelector supplied for BrowseSupportFragment.setHeaderPresenterSelector(). This PresenterSelector ought to help at the least three forms of objects. That’s, DividerRow, SectionRowAnd Row.

Observe: the HeadersSupportFragment There are already out-of-the-box implementations for these Row varieties, however we are able to present customized implementations. As one HeaderSupportFragment is a subclass of BaseRowSupportFragmeentcustomise its rows, it is only a matter of getting a customized Presenter for its objects.

• The HeadersSupportFragment has its adapter, OnHeaderViewSelectedListener And OnHeaderClickedListener set. The adapter is liable for delivering the objects. The default implementation for it OnHeaderViewSelectedLister change or choose the content material of BrowseSupportFrament. For OnHeaderClickedListenerIts default setting is hidden HeaderSupportFragment when an merchandise is clicked.
• Background coloration of HeadersSupportFragment set utilizing the colour supplied for BrowseSupportFragment.setBrandColor(). For instance:

override enjoyable onCreateHeadersSupportFragment(): HeadersSupportFragment {
// This can be performed on the onViewCreated()
brandColor = Colour.RED
return tremendous.onCreateHeadersSupportFragment()
}

• At this level, the BrowseSupportFragment.onViewCreated() finish and BrowseSupportFragment.onStart() might be known as. Inside onStart() the affiliation of HeadersSupportFragment might be set based mostly on the Leanback theme attribute named browseRowsMarginTop. This attribute, because the title implies, can also be utilized by BrowseSupportFragment to set the highest margin of the primary row.
• If you wish to change HeadersSupportFragment align the objects, you want to take action after the decision to tremendous.onCreate()

override enjoyable onStart() {
tremendous.onStart()
headersSupportFragment.setAlignment(400)
}

Observe: The concept of ​​eachHeadersSupportFragment And BrowseSupportFragment use the identical worth from browseRowsMarginTop setting a high margin helps them higher align the chosen row on the header with the chosen row on BrowseSupportFragment when BrowseSupportFragment used just for show ListRows. If BrowseSupportFragment exhibiting a PageRow this affiliation will not be vital as a result of PageRow content material will fill the complete paragraph.

We are going to embody PageRows and particulars of BrowseSupportFragmenton one other submit. Remember to observe me to be notified when it is launched!

• You possibly can allow or disable the titles of a BrowseSupportFragment by organising a name BrowseSupportFragment.setHeaderState(state) and go the specified state.
• Change HeadersSupportFragment background coloration by calling HeadersSupportFragment.setBrandColor(coloration).
• Change or provide new varieties Presenter for you HeadersSupportFragment.
• Change OnHeaderViewSelectedListener And OnHeaderClickListener your deployment HeadersSupportFragment.

As we noticed earlier, the HeadersSupportFragment ought to help three totally different merchandise varieties: DividerRow, SectionRowAnd Row. Let’s have a look at how these things are displayed with their defaults Presenter deployment.

IconSectionRow and IconSectionPresenter

To point out how we are able to customise the objects of a HeadersSupportFragmentwe are going to create a IconSectionPresenter which is able to make a SectionRow with a picture to the left of its textual content.

Let’s begin by making a subclass of SectionRow accommodates the id of a drawable to make use of on the row.

class IconSectionRow(
@DrawableRes val icon: Int,
headerItem: HeaderItem
) : SectionRow(headerItem)

Then we have to create a Presenter able to performing the creation and binding of a IconSectionRow. We are going to do it by increasing RowHeaderPresenter and simply add a couple of traces.

And that is R.format.icon_section_row.

Observe: When making a format for non-focusable rows, equivalent to dividers and sections, disable deal with its mother or father view. In any other case, they are going to be capable to obtain focus and this will generally result in ClassCastException relying in your merchandise kind and ViewHolderused for it as HeadersSupportFragment attempt to transmit chosen objects ViewHolders ARRIVE RowHeaderPresenter.ViewHolder.

DividerRow and DividerSpacePresenter

Much like how we create customized Presenter giveSectionRowwe are going to make one for DividerRow. We’ll construct a presenter that shows the divider as an area as an alternative of 1dp line. On this case we solely want a customized presenter, as a result of the merchandise, DividerRowdoesn’t must include any extra data (just like the phrase image IconSectionRow).

Add customized presenters

Lastly, we’ve got so as to add each newly created presenters HeadersSupportFragment presenter selector. Ensure you are doing this solely after the incoming name BrowseSupportFragment.onCreateView() ending, like HeadersSupportFragment solely initialized inside it.

your inside BrowseSupportFragmentor in your customized implementation HeadersSupportFragmentplease do the next:

Theme managed properties

Some phrase attributes HeadersSupportFragment powered by your app theme. When creating themes for Android TV apps, it is best to broaden from Theme.Leanback. This base theme has all of the properties that Leanback parts use to set measurement, margin, padding, coloration, and so forth. Beneath is a listing of properties utilized by HeadersSupportFragment.

• lb_browse_headers_width: Width of HeadersSupportFragment.
• lb_browse_headers_paddding_end: HeadersSupportFragment finish buffer.
• lb_browse_headers_z: Altitude of HeadersSupportFragment authentic view.
• lb_browse_header_fading_length: Pale edge width. The fade edge covers the top of the title textual content when the textual content is just too lengthy.
• lb_headers_right_fading: The drawable background utilized by the fade edge.
• headersVerticalGridStyle: Fashion for VerticalGridView Later HeadersSupportfragment. The default theme is configured as proven under:

• lb_section_header & lb_header: Default format file for SectionRow And Row views, respectively.

Observe: above pattern appnone of those theme properties are modified.

Thanks for studying this text! Ensure to examine the pattern app specifically created for this text. Have a look at official doc ABOVE HeadersSupportFragment.

Additionally, take a look at this record that I created together with my Android TV Leanback collection articles:

It’s also possible to join with me on Twitter.