Add two different fragments to two layouts with the same body tag?

Question

I am trying to add two different fragments into two containers in my activity. The containers are part of a collapsible view I have made:

collapsible_view.xml

    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/collapsible_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:gravity="center"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/collapsible_body"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

The container I'm trying to use is collapsible_body .

I want to add two of these views to my activity layout and then add a different fragment in each collapsible_body . However, using fragmentTransaction.replace(R.id.collapsible_body...) does not specify which one of my two views collapsible_body 's to replace.

Basically, the same as this question here: Fragment - replace container, if id is not unique

Answer 1

You should wrap the same id layouts in a parent layout. And then set the id for second container to a different integer. For example layout file would look like this:

<LinearLayout 
    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:orientation="vertical"
    tools:context=".MainActivity">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/parent_one">

    <include layout="@layout/container" />

</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/parent_two">

    <include layout="@layout/container"/>

</LinearLayout>

</LinearLayout>

And you would access them from using parent ids first. Then setting the id for second container to a different one. For example:

    val containerOneId = parent_one.container.id
    val containerTwoId = 1
    parent_two.container.id = containerTwoId

    openFragment(TestFragment().apply {
        val b = Bundle()
        b.putString(TestFragment.ARG, "Fragment one")
        arguments = b
    }, containerOneId)

    openFragment(TestFragment().apply {
        val b = Bundle()
        b.putString(TestFragment.ARG, "Fragment two")
        arguments = b
    }, containerTwoId)

Same access logic but in Java (in case you're not using Kotlin)

    LinearLayout parentOne = (LinearLayout) findViewById(R.id.parent_one);
    LinearLayout parentTwo = (LinearLayout) findViewById(R.id.parent_two); 

    FrameLayout containerOne = parentOne.findViewById(R.id.container);
    FrameLayout containerTwo = parentTwo.findViewById(R.id.container);

    int containerOneId = containerOne.getId();
    int containerTwoId = 1;
    containerTwo.setId(containerTwoId);

    openFragment(new TestFragment(), containerOneId);
    openFragment(new TestFragment(), containerTwoId);