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?
As you can see in the attached screenshot, the new Android TV home screen has three new tabs at the top —Home, Discover, and Apps — next to the Search option.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With