Simple application of tablayout + viewpager2 + fragment

stay fragment_container.xml in

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="MissingConstraints">
    
    
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout_book"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </com.google.android.material.tabs.TabLayout>


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager_book"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

stay activity_main Static loading in fragment

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:ignore="MissingConstraints">



  <fragment class="com.example.englishstudy.ui.book.BookFragment"
      android:id="@+id/dsk"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />



</RelativeLayout>

stay MainActivity In file

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContentView(R.layout.activity_main)
    }

You need to get another adapter , Set up TabItem The number of and viewpager Corresponding to Fragment

class BookAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {


    override fun getItemCount(): Int {
        return 4
    }

    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 -> {
                BookListFragment()
            }
            1 -> {
                 ListenFragment()
            }
            2 -> {
                 BookListFragment()
            }
            else ->{
                BookListFragment()
            }
        }
    }

}

Last in Fragment Complete specific operations in

utilize  TabLayoutMediator take TabLayout and ViewPager2 The linkage between

utilize addOnTabSelectedListener monitor TabItem Click on

class BookFragment: Fragment() {

    private var _binding: FragmentBookContainerBinding? = null
    
    private val binding
        get() = _binding!!

    private val TAG = "BookFragment"

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentBookContainerBinding.inflate(layoutInflater,container,false)

        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.viewPagerBook.adapter = BookAdapter(this)

        TabLayoutMediator(binding.tabLayoutBook,binding.viewPagerBook) { tab, position ->
            when(position){
                0 -> tab.text = " Assad "
                1 -> tab.text = " Please Wilde "
                2 -> tab.text = " Deposit to pay for the goods "
                else -> tab.text = " Feel crazy ”"
            }
        }.attach()

        binding.tabLayoutBook.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            //  Click on 
            override fun onTabSelected(tab: TabLayout.Tab?) {
                logD(TAG,"addOnTabSelectedListener111  ${tab!!.position}")
                when(tab.position) {
                    0 -> tab_num = 0
                    1 -> tab_num = 1
                    2 -> tab_num = 2
                    3 -> tab_num = 3

                }

            }
            //  Release Click 
            override fun onTabUnselected(tab: TabLayout.Tab?) {
                logD(TAG,"addOnTabSelectedListener222  ${tab!!.position} ")
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                logD(TAG,"addOnTabSelectedListener333 ")
            }
        })

    }
}

The problems in the process ： Try to TabLayout Next, add TabItem, appear  Error inflating class fragment Error of , The specific reason is unknown

resolvent ： Get rid of TabItem Medium id that will do

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout_book"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.google.android.material.tabs.TabLayout>