Make a TabBar inside a specific NavBar fragment

Question

my app use bottomNavBar with 3 fragments [Settings / Home / Gallery]. Now I'm trying to make a TabBar with 3 new Tabs inside of "Settings". [setting01 / setting02 / setting03]

I followed carefully this tutorial : https://www.youtube.com/watch?v=qfFANw7nPMU and I used viewPager2 when the video uses viewPager. but I'm still stuck in MainActivity.kt because for some reasons these two line (from the tutorial) didn't work for me :

 viewPager2.adapter = PageAdapter(supportFragmentManager)
    tabLayout.setupWithViewPager(viewPager2)

here is my entire MainActivity.kt file :

package com.example.appname

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.example.appname.ui.settings.PageAdapter
import kotlinx.android.synthetic.main.fragment_settings.*

class MainActivity : AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val navView: BottomNavigationView = findViewById(R.id.nav_view)
    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(setOf(
        R.id.navigation_settings, R.id.navigation_swapper, R.id.navigation_gallery))
    setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)

    viewPager2.adapter = PageAdapter(supportFragmentManager)
    tabLayout.setupWithViewPager(viewPager2)
 }
}

I'm almost certain that this error exists because these two lines should be somewhere else because of the particular situation of my application.

To find yourself in a situation similar to mine I recommend you to start a new project under android studio using the template "Bottom Navigation Activity" and then follow the tutorial.

Answer 1

A friend of mine give me the solution. Nothing new in MainActivity.kt like I was thinking.

Here is the new code to make tabBar in the Settings fragment :

settingFragment.kt

class SettingsFragmentAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
private val fragments =
    listOf(
        fragment_setting_teams(),
        fragment_setting_general(),
        fragment_setting_movies()
    )

 override fun getItemCount(): Int = fragments.size

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


class SettingsFragment : Fragment() {
private lateinit var settingsViewModel: SettingsViewModel

private lateinit var settingsAdapter: SettingsFragmentAdapter
private lateinit var viewPager: ViewPager2
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val tabLayout = view.findViewById<TabLayout>(R.id.tabLayout)
    settingsAdapter =
        SettingsFragmentAdapter(
            this
        )
    viewPager = view.findViewById(R.id.viewPager2)
    viewPager.adapter = settingsAdapter
    TabLayoutMediator(tabLayout, viewPager) { tab, position ->
        when (position) {
            0 -> tab.text = "Teams"
            1 -> tab.text = "General"
            2 -> tab.text = "Movies"
        }
    }.attach()
}

override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
): View? {
    settingsViewModel =
            ViewModelProviders.of(this).get(SettingsViewModel::class.java)
    val root = inflater.inflate(R.layout.fragment_settings, container, false)
    return root
}
}