Android TV how to make a tab on the top of screen? - tabs

Question

I want to make a tab on the top of screen like this :
I know that tabLayout and viewPager can solve it on the phone. However, how to do on the android tv?

Answer 1

There are several ways you could do this - but I think the short answer is no matter what you do, it'll have to be custom. So far leanback is the only framework offered by Google for any TV specific components and that framework only provides you with a left navigational drawer.
I can offer one solution for if you're using leanback. You could use a BrowseFragment with a custom TitleView which has tabs and keeps track of the focus of the tabs within. As long as your custom view implements TitleViewAdapter.Provider then you can use it with a BrowseFragment as the TitleView. The benefit to this is that you can have it automatically animate in and out from the top with little additional work.
As for the custom view, you can specify focusRight and focusLeft on each tab and have an listener onFocus or onClick to swap out the fragments in the BrowseFragment. This class in leanback shows how to swap fragments in the BrowseFragment (specifically PageRowFragmentFactory).
I would highly recommend you clone the leanback showcase app that the Android team put together and play around in that.
For the specifics of customizing the TitleView, it'll look something like the below:
Create your custom view
class YourTitleView extends RelativeLayout implements TitleViewAdapter.Provider {
... do custom view setup/logic here ...
}
Create an XML file named lb_browse_title.xml. This overrides leanback's layout which they use to create their TitleView.
Put your title view in this lb_browse_title.xml file and ensure it has the id of #+id/browse_title_group. This is so leanback knows to grab your title view.
<com.your.android.app.views.YourTitleView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/browse_title_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?attr/browseTitleViewStyle" />
Then create a Fragment that extends BrowseFragment and it should apply your title view automatically. Please refer to the leanback-showcase app for how to get a BrowseFragment up and running.