XML TabItem are gone when using setupWithViewPager

Question

I am trying to add TabItem's form XML and later want to connect them with the ViewPager in the java code. But as soon as I call tab_layout.setupWithViewPager(pager) the tab items are turning blank.

Fragment Code:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val listOfFragment = listOf(Fragment1.newInstance(),Fragment2.newInstance(),Fragment3.newInstance())
    homePagerAdapter = HomePagerAdapter(childFragmentManager, listOfFragment)
    view_pager.adapter = homePagerAdapter
    tab_layout.setupWithViewPager(view_pager)
}

FragmentPagerAdapter:

class HomePagerAdapter(fm: FragmentManager, private val listOfFragment: List<FragmentData>) :
    FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    override fun getItem(position: Int): Fragment {
        return listOfFragment[position].fragment
    }

    override fun getCount(): Int {
        return listOfFragment.size
    }
}

XML:

<...>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title_appbar">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/profile_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_profile"
            android:text="@string/profile" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/photos_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_photos"
            android:text="@string/photos" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/live_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_live"
            android:text="@string/live" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout">
    </androidx.viewpager.widget.ViewPager>    
</...>

Result:

Expected:

Please Note: I'm well aware of a couple of other ways to achieve this, like adding TabItem dynamically and then connect with ViewPager and adding tab_layout.selectTab(tab_layout.getTabAt(position)) ViewPager's onPageSelected callback. But I am looking to connect the XML TabItem with ViewPager without any modification in java code. Thanks in advance.

Answer 1

The method tabLayout.setupWithViewPager() removes all tabs and then adds tabs from the adapter.
Use your adapter to populate the TabLayout.