TabLayout with View Pager

activity_tab_layout_and_viewpager.xml

<?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"
    tools:context=".learning.TabLayoutAndViewpagerActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabLayout
            android:background="#138b7e"
            app:tabTextColor="@color/white"
            android:id="@+id/tl_home"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_54dp"
            android:layout_alignParentStart="true" />

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

    </RelativeLayout>

</RelativeLayout>

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".learning.fragments.OneFragment">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_surfer_posts"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

fragment_three.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".learning.fragments.ThreeFragment">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</FrameLayout>

fragment_two.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@color/story_seen"
    tools:context=".learning.fragments.TwoFragment">


</FrameLayout>

MyFragmentPagerAdapter.kt

package com.maple.kashin.learning.viewpagerAdapters

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class MyFragmentPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {

    private var fragments : ArrayList<Fragment> = arrayListOf<Fragment>()

    override fun getItemCount() = fragments.size

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }

    public fun addFragment(fragment : Fragment){
        fragments.add(fragment)
    }
    
}

OneFragment.kt

package com.maple.kashin.learning.fragments

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.LinearLayoutManager
import com.maple.kashin.R
import com.maple.kashin.databinding.FragmentOneBinding
import com.maple.kashin.learning.RecyclerViewSurferPost
import com.maple.kashin.learning.adapters.SurferPostsRecyclerViewAdapter


class OneFragment : Fragment() {

    private lateinit var binding: FragmentOneBinding

    private var surferPosts: ArrayList<RecyclerViewSurferPost> =
        arrayListOf<RecyclerViewSurferPost>()
    private lateinit var mSurferPostsRecyclerViewAdapter: SurferPostsRecyclerViewAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {

        }
    }

//    override fun onCreateView(
//        inflater: LayoutInflater, container: ViewGroup?,
//        savedInstanceState: Bundle?
//    ): View? {
//        binding = FragmentOneBinding.inflate(layoutInflater)
//        return binding.root
//    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ) = FragmentOneBinding.inflate(layoutInflater).also { binding = it }.root

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

        setSurferPostsData()
        mSurferPostsRecyclerViewAdapter = SurferPostsRecyclerViewAdapter(surferPosts, requireContext())
        binding.rvSurferPosts.adapter = mSurferPostsRecyclerViewAdapter
        binding.rvSurferPosts.layoutManager =
            LinearLayoutManager(requireContext(), LinearLayoutManager.VERTICAL, true)
    }

    private fun setSurferPostsData() {
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/44/3e/cb/443ecb7f724bc99256cec196a881cce1.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Amaar",
                "3 hrs ago",
                20,
                "Today i surfed at Karnatka",
                "Karnatka"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/736x/1c/3b/41/1c3b41e00fb3efd6df810739af9e4b65.jpg",
                "Zakir",
                "1 hrs ago",
                30,
                "Today i surfed at London",
                "London"
            )
        )
        surferPosts.add(
            RecyclerViewSurferPost(
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "https://i.pinimg.com/564x/51/7c/af/517caf0d930f526896eb811b3869c31c.jpg",
                "Ikhlaq",
                "2 hrs ago",
                30,
                "Today i surfed at Goa",
                "Goa"
            )
        )
    }

    companion object {

        val TAG2 = OneFragment::class.java.canonicalName

        @JvmStatic
        fun newInstance() =
            OneFragment().apply {
                arguments = Bundle().apply {

                }
            }
    }
}

TabLayoutAndViewpagerActivity.kt

package com.maple.kashin.learning

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.tabs.TabLayoutMediator
import com.maple.kashin.databinding.ActivityTabLayoutAndViewpagerBinding
import com.maple.kashin.learning.fragments.OneFragment
import com.maple.kashin.learning.fragments.ThreeFragment
import com.maple.kashin.learning.fragments.TwoFragment
import com.maple.kashin.learning.viewpagerAdapters.MyFragmentPagerAdapter

class TabLayoutAndViewpagerActivity : AppCompatActivity() {

    private lateinit var binding: ActivityTabLayoutAndViewpagerBinding
    private lateinit var viewPagerAdapter : MyFragmentPagerAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityTabLayoutAndViewpagerBinding.inflate(layoutInflater)
        setContentView(binding.root)

        viewPagerAdapter = MyFragmentPagerAdapter(this)
        viewPagerAdapter.addFragment(OneFragment.newInstance())
        viewPagerAdapter.addFragment(TwoFragment.newInstance())
        viewPagerAdapter.addFragment(ThreeFragment.newInstance())

        binding.vpHome.adapter = viewPagerAdapter

        TabLayoutMediator(binding.tlHome, binding.vpHome) { tab, position ->
            when(position){
                0 -> { tab.text = "CHATS" }
                1 -> { tab.text = "STATUS" }
                else ->  { tab.text = "Calls" }
            }
        }.attach()

    }
}

ThreeFragment.kt

package com.maple.kashin.learning.fragments

import android.content.Context
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.maple.kashin.R
import com.maple.kashin.databinding.FragmentThreeBinding


class ThreeFragment : Fragment() {

    private lateinit var binding: FragmentThreeBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {

        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ) = FragmentThreeBinding.inflate(layoutInflater).also { binding = it }.root

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

    }

    companion object {

        val TAG2 = ThreeFragment::class.java.canonicalName

        @JvmStatic
        fun newInstance() =
            ThreeFragment().apply {
                arguments = Bundle().apply {

                }
            }
    }
}

TwoFragment.kt

package com.maple.kashin.learning.fragments

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.maple.kashin.R
import com.maple.kashin.databinding.FragmentTwoBinding


class TwoFragment : Fragment() {

    private lateinit var binding: FragmentTwoBinding


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {

        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ) = FragmentTwoBinding.inflate(layoutInflater).also { binding = it }.root


    companion object {

        val TAG2 = TwoFragment::class.java.canonicalName

        @JvmStatic
        fun newInstance() =
            TwoFragment().apply {
                arguments = Bundle().apply {

                }
            }
    }
}