Androidアプリで、画面遷移後に画面が重ならないようにしたい

実現したいこと

画面遷移後に画面が重ならないようにしたい

前提

AndroidStudioで、ギターコードを表示するアプリを作っています。
ListViewからの画面遷移を実装中に画面が重なってしまう不具合が発生

これまでの経緯

①新規プロジェクトの作成
Bottom Navigation View Activityを選択

②dashboardにListViewを追加

③chatGPTやネット検索を参考にしてコードの編集などを行った

発生している問題

下の写真のように2つの画面要素が重なってしまう

遷移前

遷移後

該当のソースコード

MainActivity.kt

Kotlin
1package com.example.guitercodeapp3
2
3//importは省略
4
5class MainActivity : AppCompatActivity() {
6
7    private lateinit var binding: ActivityMainBinding
8
9    override fun onCreate(savedInstanceState: Bundle?) {
10        super.onCreate(savedInstanceState)
11
12        binding = ActivityMainBinding.inflate(layoutInflater)
13        setContentView(binding.root)
14
15        val navView: BottomNavigationView = binding.navView
16
17        val navController = findNavController(R.id.nav_host_fragment_activity_main)
18        val appBarConfiguration = AppBarConfiguration(
19            setOf(
20                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications
21            )
22        )
23        setupActionBarWithNavController(navController, appBarConfiguration)
24        navView.setupWithNavController(navController)
25    }
26
27    internal fun openDetailFragment(selectedItem: String,lyrics: String){
28        val fragment = Detail1Fragment.newInstance(selectedItem ,lyrics)
29        supportFragmentManager.beginTransaction().replace(androidx.navigation.fragment.R.id.nav_host_fragment_container, fragment).addToBackStack(null).commit()
30    }
31}

DashboardFragment.kt

Kotlin
1package com.example.guitercodeapp3.ui.dashboard
2
3//importは省略
4
5class DashboardFragment : Fragment() {
6
7    private var _binding: FragmentDashboardBinding? = null
8
9    private val binding get() = _binding!!
10
11    override fun onCreateView(
12        inflater: LayoutInflater,
13        container: ViewGroup?,
14        savedInstanceState: Bundle?
15    ): View? {
16
17        _binding = FragmentDashboardBinding.inflate(inflater, container, false)
18        val rootView: View = _binding!!.root
19
20        val listView: ListView = binding.listView
21        val items = resources.getStringArray(R.array.list_song)
22        val adapter = ArrayAdapter(requireContext(),android.R.layout.simple_list_item_1,items)
23        listView.adapter = adapter
24
25        val dashboardViewModel =
26            ViewModelProvider(this).get(DashboardViewModel::class.java)
27
28        //val rootView = inflater.inflate(R.layout.fragment_dashboard,container,false)
29
30
31        listView.setOnItemClickListener { parent, view, position, id ->
32            val selectedItem = items[position]
33            val lyrics = resources.getStringArray(R.array.list_lyrics)[position]
34            val activity = requireActivity() as MainActivity
35            activity.openDetailFragment(selectedItem, lyrics)
36            val detail1Fragment = Detail1Fragment.newInstance(selectedItem, lyrics)
37
38            requireActivity().supportFragmentManager.beginTransaction().replace(R.id.nav_host_fragment_container,detail1Fragment).addToBackStack(null).commit()
39            Toast.makeText(requireContext(), "$selectedItem が選択されました", Toast.LENGTH_SHORT)
40                .show()
41        }
42
43
44
45        val textView: TextView = binding.textDashboard
46        dashboardViewModel.text.observe(viewLifecycleOwner) {
47            textView.text = it
48        }
49        return rootView
50    }
51
52    override fun onDestroyView() {
53        super.onDestroyView()
54        _binding = null
55    }
56}

Detail1Fragment.kt

Kotlin
1package com.example.guitercodeapp3.ui.dashboard
2
3//importは省略
4
5class Detail1Fragment : Fragment() {
6
7    companion object {
8        private const val ARG_SELECTED_ITEM = "selected_item"
9        private const val ARG_LYRICS = "lyrics"
10
11        fun newInstance(selectedItem: String, lyrics: String):Detail1Fragment{
12            val fragment = Detail1Fragment()
13            val args = Bundle()
14            args.putString(ARG_SELECTED_ITEM, selectedItem)
15            args.putString(ARG_LYRICS,lyrics)
16            fragment.arguments = args
17            return fragment
18        }
19    }
20
21
22    @SuppressLint("MissingInflatedId")
23    override fun onCreateView(
24        inflater: LayoutInflater, container: ViewGroup?,
25        savedInstanceState: Bundle?
26    ): View? {
27
28
29        val rootView = inflater.inflate(R.layout.fragment_detail1,container,false)
30        val textViewDetail = rootView.findViewById<TextView>(R.id.textViewDetail)
31
32
33        arguments?.let{
34            val selectedItem = it.getString(ARG_SELECTED_ITEM)
35            val lyrics = it.getString(ARG_LYRICS)
36            textViewDetail.text = "$selectedItem\n\n$lyrics"
37        }
38
39
40        return rootView
41    }
42
43}

activity_main.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    android:id="@+id/container"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    android:paddingTop="?attr/actionBarSize">
8
9    <com.google.android.material.bottomnavigation.BottomNavigationView
10        android:id="@+id/nav_view"
11        android:layout_width="0dp"
12        android:layout_height="wrap_content"
13        android:layout_marginStart="0dp"
14        android:layout_marginEnd="0dp"
15        android:background="?android:attr/windowBackground"
16        app:layout_constraintBottom_toBottomOf="parent"
17        app:layout_constraintLeft_toLeftOf="parent"
18        app:layout_constraintRight_toRightOf="parent"
19        app:menu="@menu/bottom_nav_menu" />
20
21    <fragment
22        android:id="@+id/nav_host_fragment_activity_main"
23        android:name="androidx.navigation.fragment.NavHostFragment"
24        android:layout_width="match_parent"
25        android:layout_height="match_parent"
26        app:layout_constraintBottom_toTopOf="@id/nav_view"
27        app:layout_constraintLeft_toLeftOf="parent"
28        app:layout_constraintRight_toRightOf="parent"
29        app:layout_constraintTop_toTopOf="parent"
30        app:navGraph="@navigation/mobile_navigation"
31        app:defaultNavHost="true"/>
32
33</androidx.constraintlayout.widget.ConstraintLayout>

fragment_dashboard.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".ui.dashboard.DashboardFragment">
8
9    <TextView
10        android:id="@+id/text_dashboard"
11        android:layout_width="match_parent"
12        android:layout_height="wrap_content"
13        android:layout_marginStart="8dp"
14        android:layout_marginTop="8dp"
15        android:layout_marginEnd="8dp"
16        android:textAlignment="center"
17        android:textSize="20sp"
18        app:layout_constraintBottom_toBottomOf="parent"
19        app:layout_constraintEnd_toEndOf="parent"
20        app:layout_constraintHorizontal_bias="0.0"
21        app:layout_constraintStart_toStartOf="parent"
22        app:layout_constraintTop_toTopOf="parent"
23        app:layout_constraintVertical_bias="0.6" />
24
25    <ListView
26        android:id="@+id/listView"
27        android:layout_width="0dp"
28        android:layout_height="0dp"
29        android:entries="@array/list_song"
30        app:layout_constraintBottom_toBottomOf="parent"
31        app:layout_constraintLeft_toLeftOf="parent"
32        app:layout_constraintRight_toRightOf="parent"
33        app:layout_constraintTop_toTopOf="parent"/>
34
35    <FrameLayout
36        android:id="@+id/nav_host_fragment_container"
37        android:layout_width="match_parent"
38        android:layout_height="match_parent"
39        android:name="androidx.navigation.fragment.NavHostFragment"
40
41        app:navGraph="@navigation/mobile_navigation"
42        app:layout_constraintTop_toBottomOf="@+id/text_dashboard"
43        app:layout_constraintBottom_toBottomOf="parent"
44        app:layout_constraintStart_toStartOf="parent"
45        app:layout_constraintEnd_toEndOf="parent"
46        app:defaultNavHost="true"/>
47
48</androidx.constraintlayout.widget.ConstraintLayout>

fragment_detail1.xml

xml
1<?xml version="1.0" encoding="utf-8"?>
2<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:tools="http://schemas.android.com/tools"
4    android:id="@+id/nav_host_fragment_container"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".ui.dashboard.Detail1Fragment">
8
9    <!-- TODO: Update blank fragment layout -->
10    <TextView
11        android:id="@+id/textViewDetail"
12        android:layout_width="match_parent"
13        android:layout_height="match_parent"
14        android:text="@string/hello_blank_fragment" />
15
16</FrameLayout>

strings.xml

xml
1<resources>
2    <string name="app_name">GuiterCodeApp3</string>
3    <string name="title_home">Home</string>
4    <string name="title_dashboard">Dashboard</string>
5    <string name="title_notifications">Notifications</string>
6    <string name="list_animal" />
7
8    <string-array name="list_song">
9        <item>歌うたいのバラッド</item>
10        <item>夢をかなえてドラえもん</item>
11        <item>君が代</item>
12    </string-array>
13
14    <string-array name="list_lyrics">
15        <item>歌うたいのバラッドの歌詞</item>
16        <item>夢をかなえてドラえもんの歌詞</item>
17        <item>君が代の歌詞</item>
18    </string-array>
19
20    <!-- TODO: Remove or change this placeholder text -->
21    <string name="hello_blank_fragment">Hello blank fragment</string>
22
23</resources>

試したこと

xmlファイルのidやname、entriesやnavGraphなどが正しいか確認した。

DashboardFragment.ktのlistView.setOnItemClickListenerの部分のR.id.の部分のIDを色々と変更して試したが、特に進展なし。

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

Android Studio Giraffe | 2022.3.1

jimbe

2023/08/23 16:02 編集

ナビゲーションを使うのでしたら全ての画面遷移をナビゲーションで行わなければならないのではないでしょうか。 ↓こんなのとか。 Navigationを使ってDialogFragmentを表示する https://qiita.com/sekitaka_1214/items/820f6b88e1001b56b209 ↓これも必要かもしれません。 Navigation ComponentでDialogを扱うときの注意 https://star-zero.medium.com/navigation-component%E3%81%A7dialog%E3%82%92%E6%89%B1%E3%81%86%E3%81%A8%E3%81%8D%E3%81%AE%E6%B3%A8%E6%84%8F-f84f3f5cbb8f

jimbe

2023/08/24 04:51 編集

失礼、リストのアイテムを選択して表示するのはダイアログで無く普通のフラグメントですね。デスティネーションに移動する https://developer.android.com/guide/navigation/navigation-navigate?hl=ja#id

kaaak496

2023/08/25 13:11

今回は、回答ありがとうございました。ひとまず問題が解決したため、報告します。 StackOverFlowで同様の質問をしたところ、 fragment_detail1.xmlのFrameLayoutにおいて、backgroundの色を設定し、clickableをtrueに設定したところ、想定通りに動作しました。しかし、根本的な解決とはなっていないと考えられ、今後、根本的な解決をする際に、ご回答を参考にしたいと思います。

行動規範の内容に同意します

回答2件

Navigation を使うなら、遷移処理は Navigation に任せる/用いる必要があるでしょう。任せないなら(既存のコードは Navigation で動いているので)共存するような書き方をする必要があると思います。
以下は任せることにして、デスティネーションに移動するに従って、ディスティネーションを定義し、 Bundle 付で navigate しています。

※ 環境の都合上パッケージが質問コードと異なっています。

res/navigation/mobile_navigation.xml

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/mobile_navigation"
6    app:startDestination="@+id/navigation_home">
7
8  <fragment
9      android:id="@+id/navigation_home"
10      android:name="com.teratail.q_aef741e85qq8z6.ui.home.HomeFragment"
11      android:label="@string/title_home"
12      tools:layout="@layout/fragment_home" />
13
14  <fragment
15      android:id="@+id/navigation_dashboard"
16      android:name="com.teratail.q_aef741e85qq8z6.ui.dashboard.DashboardFragment"
17      android:label="@string/title_dashboard"
18      tools:layout="@layout/fragment_dashboard">
19    <action android:id="@+id/action_to_detail1"
20        app:destination="@id/navigation_detail1"
21        app:enterAnim="@anim/nav_default_enter_anim"
22        app:exitAnim="@anim/nav_default_exit_anim"
23        app:popEnterAnim="@anim/nav_default_pop_enter_anim"
24        app:popExitAnim="@anim/nav_default_pop_exit_anim"/>
25  </fragment>
26
27  <fragment
28      android:id="@+id/navigation_detail1"
29      android:name="com.teratail.q_aef741e85qq8z6.ui.dashboard.Detail1Fragment"
30      android:label="@string/title_dashboard"
31      tools:layout="@layout/fragment_detail1">
32  </fragment>
33
34  <fragment
35      android:id="@+id/navigation_notifications"
36      android:name="com.teratail.q_aef741e85qq8z6.ui.notifications.NotificationsFragment"
37      android:label="@string/title_notifications"
38      tools:layout="@layout/fragment_notifications" />
39</navigation>

DashboardFragment.kt

kotlin
1package com.teratail.q_aef741e85qq8z6.ui.dashboard
2
3import android.os.Bundle
4import android.view.LayoutInflater
5import android.view.View
6import android.view.ViewGroup
7import android.widget.ArrayAdapter
8import android.widget.ListView
9import android.widget.TextView
10import android.widget.Toast
11import androidx.core.os.bundleOf
12import androidx.fragment.app.Fragment
13import androidx.lifecycle.ViewModelProvider
14import androidx.navigation.Navigation.findNavController
15import com.teratail.q_aef741e85qq8z6.R
16import com.teratail.q_aef741e85qq8z6.databinding.FragmentDashboardBinding
17
18class DashboardFragment : Fragment() {
19
20  private var _binding: FragmentDashboardBinding? = null
21
22  private val binding get() = _binding!!
23
24  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
25    val dashboardViewModel = ViewModelProvider(this).get(DashboardViewModel::class.java)
26
27    _binding = FragmentDashboardBinding.inflate(inflater, container, false)
28    val root: View = binding.root
29
30    val listView: ListView = binding.listView
31    val items = resources.getStringArray(R.array.list_song)
32    val adapter = ArrayAdapter(requireContext(), android.R.layout.simple_list_item_1,items)
33    listView.adapter = adapter
34
35    listView.setOnItemClickListener { parent, view, position, id ->
36      val selectedItem = items[position]
37      val lyrics = resources.getStringArray(R.array.list_lyrics)[position]
38
39      val args = bundleOf(Detail1Fragment.ARG_SELECTED_ITEM to selectedItem, Detail1Fragment.ARG_LYRICS to lyrics)
40      findNavController(root).navigate(R.id.action_to_detail1, args)
41
42      Toast.makeText(requireContext(), "$selectedItem が選択されました", Toast.LENGTH_SHORT).show()
43    }
44
45    val textView: TextView = binding.textDashboard
46    dashboardViewModel.text.observe(viewLifecycleOwner) {
47      textView.text = it
48    }
49    return root
50  }
51
52  override fun onDestroyView() {
53    super.onDestroyView()
54    _binding = null
55  }
56}

Detail1Fragment.kt

kotlin
1package com.teratail.q_aef741e85qq8z6.ui.dashboard
2
3import android.os.Bundle
4import android.view.LayoutInflater
5import android.view.View
6import android.view.ViewGroup
7import androidx.fragment.app.Fragment
8import com.teratail.q_aef741e85qq8z6.databinding.FragmentDetail1Binding
9
10class Detail1Fragment : Fragment() {
11
12  private var _binding: FragmentDetail1Binding? = null
13
14  private val binding get() = _binding!!
15
16  companion object {
17    const val ARG_SELECTED_ITEM = "selected_item"
18    const val ARG_LYRICS = "lyrics"
19  }
20
21  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
22    _binding = FragmentDetail1Binding.inflate(inflater, container, false)
23    val root: View = binding.root
24
25    val textViewDetail = binding.textViewDetail
26
27    arguments?.let {
28      val selectedItem = it.getString(ARG_SELECTED_ITEM)
29      val lyrics = it.getString(ARG_LYRICS)
30      textViewDetail.text = "$selectedItem\n\n$lyrics"
31    }
32
33    return root
34  }
35
36  override fun onDestroyView() {
37    super.onDestroyView()
38    _binding = null
39  }
40}

投稿2023/08/24 05:19

編集2023/08/24 11:36

jimbe

総合スコア12951

自己解決

今回は、回答ありがとうございました。

ひとまず問題が解決したため、自己解決ということにさせていただきます。

解決法

StackOverFlowで同様の質問をしたところ、
fragment_detail1.xmlのFrameLayoutにおいて、backgroundの色を設定し、clickableをtrueに設定すると良い、というアドバイスをもらい、その通りに変更を加えたところ想定通りに動作しました。

しかし、根本的な解決とはなっていないと考えられ、今後、根本的な解決をする際に、ご回答を参考にしたいと思います。

ご協力ありがとうございました。

投稿2023/08/25 13:17

編集2023/08/25 13:20

kaaak496

総合スコア8

jimbe

2023/08/25 16:37 編集

>StackOverFlowで同様の質問をしたところ他のサービスにも質問投稿をしたい（してしまった） https://teratail.com/help#posted-otherservice >teratailでは、マルチポスト※の推奨はしていません。 >やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。 (以下略) >fragment_detail1.xmlのFrameLayoutにおいて、backgroundの色を設定「背景が透明だから見えるので、色塗っちゃえば見えないでしょ」という対処療法です。お作りになっているコードがどのような構造・クラスを使っているのかを理解して直さなければ、対処療法のパッチワークになってあちこちで綻びが出て面倒なことになるかもしれません。

行動規範の内容に同意します

あなたの回答