android - New leanaback's LeanbackTabLayout and LeanbackViewPager not focusing and changing tab with D-PAD controller

Question

I am using new leanback tab and viewpager. I am not able to change tab1 to tab2 with D-pad. Tabs changes from Tab1 to Tab2 when i reach to last item of rowfragment in Tab1. I am not able to jump to up from rowfragment item to Tab menu. I have mentioned code sample below. In developer video they are able switch tabs with d-pad. please answer this. thanks in advance :)

my build.gradle file :

implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.leanback:leanback:1.0.0'
implementation "androidx.leanback:leanback-tab:1.1.0-beta01"
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.github.bumptech.glide:glide:3.8.0'

Fragment file:

class CollectionDemoFragment : Fragment() {
private lateinit var demoCollectionPagerAdapter : DemoCollectionPagerAdapter
private lateinit var viewPager : LeanbackViewPager
private lateinit var tab_layout : LeanbackTabLayout

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?): View? {
    return inflater.inflate(R.layout.collection_demo, container, false)
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    demoCollectionPagerAdapter = DemoCollectionPagerAdapter(childFragmentManager)
    viewPager = view.findViewById(R.id.pager)
    viewPager.setKeyEventsEnabled(true)

    tab_layout = view.findViewById(R.id.tab_layout)
    viewPager.adapter = demoCollectionPagerAdapter
    tab_layout.setupWithViewPager(viewPager)
}

}

Fragment Xml file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context=".CollectionDemoFragment"
android:background="@android:color/white">


<androidx.leanback.tab.LeanbackViewPager
    android:id="@+id/pager"
    android:layout_below="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.leanback.tab.LeanbackTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/lb_grey"
        android:focusable="true"
        android:focusableInTouchMode="true"/>

</androidx.leanback.tab.LeanbackViewPager>

Adapter file:

class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
override fun getItem(position: Int): Fragment {
    val fragment = DemoObjectFragment()
    fragment.arguments = Bundle().apply {
        putInt(ARG_OBJECT, position + 1)
    }
    return fragment
}

override fun getCount(): Int = 4


override fun getPageTitle(position: Int): CharSequence {
    return "OBJECT ${(position + 1)}"
}

}

I have gone through developer site and youtube video as well: https://developer.android.com/training/tv/start/libraries#leanback-tabs-library

https://www.youtube.com/watch?v=OOV6Ef9zDg0&t=1065s at 16:40 seconds

For more clarity i have Added image of screen. In image, I am not able to go from Selected item -> Tab2 -> Tab3. And now other hand, If i am at last item of Tab2 and then i click on D-pad right then and only it move to Tab3 and vice-versa first item at Tab3 then i can able to move to Tab2. Hope this clear my problem.

https://i.stack.imgur.com/Syvb1.png

question from:https://stackoverflow.com/questions/65887784/new-leanabacks-leanbacktablayout-and-leanbackviewpager-not-focusing-and-changin

Answer 1

It looks like part of your layout is missing, but my best guess is that the LeanbackTabLayout doesn't handle being nested inside of the LeanbackViewPager. Try putting them at the same level:

<androidx.leanback.tab.LeanbackTabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<androidx.leanback.tab.LeanbackViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Make sure that whatever is containing these views lays them out so that they don't overlap (e.g., just wrap them with a vertical LinearLayout for testing).