AndroidのFragmentが重なって表示されてしまう

Question

androidアプリのfragmentの表示でどうしても出来ないことがあり、質問させて頂きます。

#実現したいこと
現在作成しているアプリは画面下部にナビ、その上部にfragumentのListViewが表示されており、リストの項目をタップしていくことで次のfragmentを表示するアプリを作っております。fragmentは３階層まであり、３階層目でユーザーが選択した項目の詳細（用語説明など）を表示させるものです。
fragmentの書き換えには、replace（R.id.○○, 次のfragment）を用いております。

問題点

しかし、リストに表示される項目をタップすると、次のフラグメントが重なって表示されてしまいます。

また、Androidのバックキーを押すと、一つ前の階層のfragmentに戻って欲しいのですが、全て飛ばして最初の階層まで戻ってしまう状況です。

試したこと

調べていくと、「XML内に描いたfragmentはremove、replace」してはならない」という情報があった為、それを踏まえ以下のようにコードを書きました。仮となるFlameLayoutをXMLへ書いておき、onCreateで即座に最初のフラグメント「homeFragment」でreplaceしています。

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 下部のナビの部分 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />


    <!-- このフレームレイアウトは仮。MainActivityのonCreateとともにホームフラグメントへ置き換えられる -->
    <FrameLayout
        android:id="@+id/nav_host"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="70dp"
        >
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

class MainActivity : AppCompatActivity(){
   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //メイン画面の読み込み
        setContentView(R.layout.activity_main)
        //ページ下部のナビ部分を読み込み
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        //FlameLayoutを即座に、最初のfragment「homeFragment」のリストで上書きする
        var homeFragment: HomeFragment = HomeFragment()
        val fragmentManager = supportFragmentManager
        val transaction = fragmentManager.beginTransaction()
        transaction.replace(R.id.nav_host, homeFragment)
        transaction.commit()
    }
}

表示される最初のhomeFragmentは下記のように書きました。ListViewの項目がタップされたときのイベントリスナーの部分で次のfragmentである「caregory」フラグメントへreplaceしています。

class HomeFragment : Fragment() {
   override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val root = inflater.inflate(R.layout.list_view, container, false)
        return root
    }
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // ListViewに表示するデータを読み込む
        val homeArray = resources.getStringArray(R.array.home_array)
        // ListViewをセット
        val adapter =
            this.context?.let { ArrayAdapter<String>(
                it,
                android.R.layout.simple_list_item_1,
                homeArray
            ) }
        val listView: ListView = view.findViewById(R.id.listView) as ListView
        listView.adapter = adapter

        // listViewの行がクリックされた時のイベントリスナー
        listView.setOnItemClickListener { parent, view, position, id ->

            //次のフラグメント「カテゴリフラグメント」を表示する 
            val fragmentManager: FragmentManager = childFragmentManager

            // FragmentManagerからFragmentTransactionを作成
            val fragmentTransaction: FragmentTransaction = fragmentManager.beginTransaction()

            // 　次のリストとなるFragmentの作成
            val categoryFragment: Fragment = CategoryFragment()

            // 次のフラグメントへreplace
            fragmentTransaction.replace(R.id.list, categoryFragment)

            // backstackに追加　→　端末の戻るボタン押した時に、このアクティビティに戻ってくる設定にする
            fragmentTransaction.addToBackStack(null)

            // 上記の変更を反映する
            fragmentTransaction.commit()
        }
    }
}

また、HomeFragmentにて使用している「R.id.list」は以下のXMLファイル「list_view.xml」にて記述しております。

<androidx.constraintlayout.widget.ConstraintLayout
    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:id="@+id/list"
    tools:context=".ui.home.HomeFragment">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        >
    </ListView>
</androidx.constraintlayout.widget.ConstraintLayout>

なかなか先に進めておらず、ご教授いただければ幸いです。

Answer 1

ご提示いただいたソースファイルだけでは再現テストができないので、ソースファイルを眺めた範囲で気がついたことのみで。

MainActivityではnav_hostというIDのFrameLayoutにフラグメントを描画していますが、HomeFragmentではR.id.listというご提示のソースファイルでは出てこないIDに対してreplaceを行おうとされています。

これでは、nav_hostに描画されたフラグメントはそのまま維持されることになるので、それが二重に描画されているように見える原因ではないかと思えます。文字通りreplaceですから、R.id.nav_hostの中に現存するフラグメントを入れ替えればいいはずです。

また、このとき親のレイアウトに対して作業を行うことになるので、FragmentManagerをparentFragmentManagerで得なければならないのではないかと思います。

Comments

[atRhod]

keicha_hrs様
いつもご回答を頂きありがとうございます。

（１）fragmentのIDに関して
「R.id.nav_host」と「R.id.list」の二つのidがあるから、その二つのIDが２重で表示されているという状況の可能性があるのですね。R.id.nav_hostの中に存在するフラグメントを差し替えるには、以下のコードだと考えましたが、どうもこのコードに書き換えるとクラッシュしてしまうので、書き方が違うようです…

fragmentTransaction.replace(R.id.nav_view, categoryFragment)
エラー内容：
java.lang.IllegalArgumentException: No view found for id 0x7f090094 (com.example.electformula:id/nav_view) for fragment CategoryFragment{36d1ceb9 (fd4f3450-719d-40ba-8fec-35d284425a61) id=0x7f090094}

CategoryFragmentによって置き換えられる「nav_view」がありません！という意味でしょうか。個人的には、nav_viewはreplaceによって無くなってしまった、と思ってます。それでhomeFragmentによって表示されるレイアウトである「R.id.list」を書いていました。また、質問には書いておらず申し訳ないのですが、「３回層目のフラグメント」も同様にR.id.listを置き換えているのですが、１、２階層目に加えてさらにレイアウトが重なる状況です。（何かヒントになれば幸いです。）

他のサイト様では、背景色を白にすることで対応してある記事もあるようですね。その方法も検討してみます。

（２）parentFragmentManagerに関して
・Activityからfragmentを呼び出す→supportFragmentManagerで得る
・fragmentからfragmentを呼び出す→childFragmentManagerで得る
と考えていました。parentFragmentManagerというものもあるのですね。…調べてもなかなか情報に辿り着けず、もう少し探してみます。

また、再現テストに関して情報不足で申し訳ございません。R.id.listのコードを追記させて頂きます。

[keicha_hrs]

> （１）fragmentのIDに関して
R.id.nav_viewではなく、R.id.nav_hostではありませんか・・・？（nav_viewはBottomNavigationViewのIDですよね）フラグメントを描画するFrameLayoutは「入れ物」と考えれば良いと思います。何かしらのフラグメントを描画しても無くなるわけではありません。「入れ物」の中身を取り替えるからreplaceなわけです。

[keicha_hrs]

プロジェクト作成のときにBottom Navigation Activityを選択したのならば、resの下にnavigationというフォルダーがあるはずです。これはNavigationコンポーネントというAndroidの機能を利用するためのファイルが入ったもので、フラグメントの遷移を視覚的に設計し、それによって作成されたリソースによってフラグメント遷移させるものです。

Navigation コンポーネント スタートガイド | Android Developers
https://developer.android.com/guide/navigation/navigation-getting-started?hl=ja

[Android] 10分で作る、Navigationによる画面遷移 | Qiita
https://qiita.com/tktktks10/items/7df56b4795d907a4cd31

これを利用してフラグメント遷移することも検討してみてはどうでしょうか。

activity_main.xmlにあったfragmentタグは、このNavigationによる遷移を司るものなので、元々あったBottom Navigationの操作による画面遷移が機能しなくなっていると思います。（もちろんNavigationを用いずBottom Navigationの操作による画面遷移を実装することもできますが）

[atRhod]

keicha_hrs様
再度ご回答を頂き、ありがとうございます。
「R.id.nav_view」ではなく、「R id nav_host」でした。失礼致しました。
homeFragment内のreplace文を書き換え、

fragmentTransaction.replace(R.id.nav_host, categoryFragment)

としましたが、やはり、クラッシュするようです。エラーは、nav_hostが見つからないものによるもののようです。
java.lang.IllegalArgumentException: No view found for id 0x7f090092 (com.example.electformula:id/nav_host) for fragment CategoryFragment{36d1ceb9 (84f10a45-a685-4d53-8a3f-db3601e0279c) id=0x7f090092}

また、試しになっているか分かりませんが…質問に貼り付けている画像に「main activity text」の文字がお見えでしょうか。（こちら、関係ないと考えTeraTail移植時にコードは削除していました）。
こちらはFrameLayout内に書いたTextViewになります。この文字はMainActivityのonCreate時に即座にreplaceされるはずなので、本来消えていなくてはなりません。しかし消えてないところをみると、onCreate内のreplaceも正常に処理を行えていないようです。

[atRhod]

プロジェクト作成時、Bottom Navigation Activityを選びましたので、navigationフォルダも確認いたしました。
教えていただいたリンクの仕組みを利用してフラグメント推移を作成してみようと思います。申し訳ございません、ベストアンサーや解決済等まで少々お時間を頂きます…

PS）
また、元々あった画面推移の件、ご指摘の通り今回試している過程で動かなくなっております。仕方なく追加の方法を模索しようと思っていましたが、リンクのやり方でFragmentが全て動くのであれば大変助かります。

[atRhod]

教えて下さった「10分で作る、Navigationによる画面遷移 | Qiita」（https://qiita.com/tktktks10/items/7df56b4795d907a4cd31）のNavigationの仕組みを利用して、正常な画面推移を行うことができるようになりました。

また、データの受け渡しは以下のサイトが参考になりました。
「NavigationでSafeArgsを使って引数付き画面遷移をする」（https://qiita.com/tktktks10/items/c78fe6f2083611676fbb）

ようやく先に進むことができます。この度はありがとうございました。