Kotlinで作成しているアプリでナビゲーションの内容とタブの内容が被ってしまい困っています。

実現したいこと

ナビゲーションメニューのホームだけ、タブ「First, Second, Third」を表示させて、その他「アプリについて、バージョン情報」にはタブを表示しないようにしたいです。

前提

kotlinを使用して制作しています。ファイル種類や中身は写真とコードで説明いたします。

発生している問題・エラーメッセージ

画像が貼れなかったのでURLです。すみません
https://gyazo.com/00a712a2719b4f8b9c5ba9523d037180

ナビゲーション1「fragment_nav_first」からナビゲーション2「fragment_nav_second」へ
移動した後もタブが表示され、画面中央を見ていただくとわかりますが、
タブ「First」の"First Fragment"という文字と、ナビゲーション2「fragment_nav_second」の"5678"という文字が重なって表示されています。
fragment_nav_secondを独立したページにして、タブ及び、タブの内容を表示しないようにする方法を教えていただきたいです。

該当のソースコード

kotlin,MainAvtivity.tk
1package com.example.calrec
2
3import androidx.appcompat.app.AppCompatActivity
4import android.os.Bundle
5import androidx.drawerlayout.widget.DrawerLayout
6import androidx.navigation.NavController
7import androidx.navigation.findNavController
8import androidx.navigation.ui.*
9import com.google.android.material.navigation.NavigationView
10import androidx.viewpager2.widget.ViewPager2
11import com.example.calrec.tablayout.adapter.ViewPagerAdapter
12import com.google.android.material.tabs.TabLayout
13import com.google.android.material.tabs.TabLayoutMediator
14
15class MainActivity : AppCompatActivity() {
16
17    private lateinit var drawerLayout: DrawerLayout
18    private lateinit var navController: NavController
19    private lateinit var navigationView: NavigationView
20
21    private lateinit var appBarConfiguration: AppBarConfiguration
22
23    override fun onCreate(savedInstanceState: Bundle?) {
24        super.onCreate(savedInstanceState)
25        setContentView(R.layout.activity_main)
26
27        drawerLayout = findViewById(R.id.main_root)
28        navController = findNavController(R.id.frag_container)
29        navigationView = findViewById(R.id.navigation_view)
30
31        appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
32
33        navigationView.setupWithNavController(navController)
34
35        setupActionBarWithNavController(navController, drawerLayout)
36
37        val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
38        val viewPager2 = findViewById<ViewPager2>(R.id.view_pager_2)
39
40
41
42        val adapter = ViewPagerAdapter(supportFragmentManager, lifecycle)
43        viewPager2.adapter = adapter
44
45
46        TabLayoutMediator(tabLayout, viewPager2){tab, position ->
47            when(position){
48                0->{
49                    tab.text="First"
50                }
51                1->{
52                    tab.text="Second"
53                }
54                2->{
55                    tab.text="Third"
56                }
57            }
58        }.attach()
59    }
60
61    override fun onSupportNavigateUp(): Boolean {
62        navController = findNavController(R.id.frag_container)
63        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
64    }
65}

kotlin,ViewPagerAdapter.kt
1package com.example.calrec.tablayout.adapter
2
3import androidx.fragment.app.Fragment
4import androidx.fragment.app.FragmentManager
5import androidx.lifecycle.Lifecycle
6import androidx.viewpager2.adapter.FragmentStateAdapter
7import com.example.calrec.tablayout.fragments.FirstFragment
8import com.example.calrec.tablayout.fragments.SecondFragment
9import com.example.calrec.tablayout.fragments.ThirdFragment
10
11class ViewPagerAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) : FragmentStateAdapter(fragmentManager, lifecycle) {
12    override fun getItemCount(): Int {
13        return 3
14    }
15
16    override fun createFragment(position: Int): Fragment {
17        return when(position){
18            0 ->{
19                FirstFragment()
20            }
21            1 ->{
22                SecondFragment()
23            }
24            2 ->{
25                ThirdFragment()
26            }
27            else->{
28                Fragment()
29            }
30
31        }
32    }
33}

xml,activity_main.xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:id="@+id/main_root"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    tools:context=".MainActivity">
9
10    <LinearLayout
11        android:layout_width="match_parent"
12        android:layout_height="match_parent"
13        android:orientation="vertical">
14
15        <com.google.android.material.tabs.TabLayout
16            android:id="@+id/tab_layout"
17            android:layout_width="match_parent"
18            android:layout_height="wrap_content" />
19
20        <androidx.viewpager2.widget.ViewPager2
21            android:id="@+id/view_pager_2"
22            android:layout_width="match_parent"
23            android:layout_height="match_parent" />
24
25    </LinearLayout>
26
27    <fragment
28        android:id="@+id/frag_container"
29        android:name="androidx.navigation.fragment.NavHostFragment"
30        android:layout_width="match_parent"
31        android:layout_height="match_parent"
32        app:defaultNavHost="true"
33        app:navGraph="@navigation/navigation" />
34
35    <com.google.android.material.navigation.NavigationView
36        android:id="@+id/navigation_view"
37        android:layout_width="wrap_content"
38        android:layout_height="match_parent"
39        android:layout_gravity="start"
40        app:menu="@menu/menu" />
41</androidx.drawerlayout.widget.DrawerLayout>

xml,navigation.xml
1<?xml version="1.0" encoding="utf-8"?>
2<navigation xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:id="@+id/navigation"
6    app:startDestination="@id/navFirstFragment">
7
8    <fragment
9        android:id="@+id/navFirstFragment"
10        android:name="com.example.calrec.navlayout.fragments.NavFirstFragment"
11        android:label="fragment_nav_first"
12        tools:layout="@layout/fragment_nav_first" >
13        <action
14            android:id="@+id/action_navFirstFragment_to_navSecondFragment"
15            app:destination="@id/navSecondFragment" />
16        <action
17            android:id="@+id/action_navFirstFragment_to_navThirdFragment"
18            app:destination="@id/navThirdFragment" />
19    </fragment>
20    <fragment
21        android:id="@+id/navSecondFragment"
22        android:name="com.example.calrec.navlayout.fragments.NavSecondFragment"
23        android:label="fragment_nav_second"
24        tools:layout="@layout/fragment_nav_second" >
25        <action
26            android:id="@+id/action_navSecondFragment_to_navFirstFragment"
27            app:destination="@id/navFirstFragment" />
28    </fragment>
29    <fragment
30        android:id="@+id/navThirdFragment"
31        android:name="com.example.calrec.navlayout.fragments.NavThirdFragment"
32        android:label="fragment_nav_third"
33        tools:layout="@layout/fragment_nav_third" >
34        <action
35            android:id="@+id/action_navThirdFragment_to_navFirstFragment"
36            app:destination="@id/navFirstFragment" />
37    </fragment>
38</navigation>

xml,menu.xml
1<?xml version="1.0" encoding="utf-8"?>
2<menu xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:tools="http://schemas.android.com/tools"
4    tools:shoIn="navigation_view">
5
6    <group>
7        <item
8            android:id="@+id/navFirstFragment"
9            android:icon="@drawable/ic_home"
10            android:title="ホーム" />
11        <item
12            android:id="@+id/navSecondFragment"
13            android:icon="@drawable/ic_device_information"
14            android:title="アプリについて" />
15        <item
16            android:id="@+id/navThirdFragment"
17            android:icon="@drawable/ic_info"
18            android:title="バージョン情報" />
19    </group>
20</menu>

試したこと

ファイルを分けたりなど様々な方法を試しましたが、力及ばずでした。
解決策が分かる方がおられましたら、よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Android Studioのバージョン等です。
Android Studio Electric Eel | 2022.1.1
Build #AI-221.6008.13.2211.9477386, built on January 11, 2023

build.gradle
1dependencies {
2
3    implementation 'androidx.core:core-ktx:1.9.0'
4    implementation 'androidx.appcompat:appcompat:1.6.0'
5    implementation 'com.google.android.material:material:1.8.0'
6    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
7    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
8    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'
9    testImplementation 'junit:junit:4.13.2'
10    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
11    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
12    implementation 'androidx.navigation:navigation-ui:2.5.3'
13    //viewpager2
14    implementation 'androidx.viewpager2:viewpager2:1.0.0'
15}

hoshi-takanori

2023/02/02 20:47

activity_main.xml に TabLayout や ViewPager2 があるからでは。この 10 〜 25 行目を fragment_nav_first.xml に移すと良いかも。

shunkiti12

2023/02/03 04:09

回答いただきありがとうございます。 10 ~ 25 行目を fragment_nav_first へ移した場合、MainActivitity.ktの 37, 38行目の R.id.tab_layout, R.id.view_pager_2にエラーが発生します。これらの問題と関係あるかわかりませんが、27行目の setContentView(R.layout.activity_main)の影響なのでしょうか…？度々質問失礼いたします。

shunkiti12

2023/02/03 05:24

度々すみません。 activity_main.xml にある10~25行目を fragment_nav_first へ移し試行錯誤をしたら、fragment_nav_secondのページが独立して表示されるようになりました。ありがとうございます。しかし、fragment_nav_firstへ戻ると、最初は表示されていたタブが表示されなくなり、E/RecyclerView: No adapter attached; skipping layoutというエラーが出るようになりました。調べてはいるのですが、解決できません。もしわかりましたら、お力添えお願いいたします。