KaliMa KaliMa - 2 months ago 12
Android Question

Why are my Fragments appearing on top of each other?

I have a main layout of this form

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

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

</android.support.design.widget.CoordinatorLayout>


And I am doing FragmentTransaction calling
.replace()
on both of them to invoke two Fragments that use the following XML:

Fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="true">

...

</LinearLayout>


Fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

</LinearLayout>


Why are the two fragments appearing on top of each other? I want Fragment1 to appear directly above Fragment2, which has a RecyclerView.

Edit: Replacement code:

fragment1 = Fragment1.newInstance();
fragment2 = Fragment2.newInstance();

FragmentManager fragmentManager = getChildFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

fragmentTransaction.replace(R.id.fragment1, fragment1, "fragment1");
fragmentTransaction.replace(R.id.fragment2, fragment2, "fragment2");

fragmentTransaction.commit();

Answer

This is because you put two layouts inside CoordinatorLayout. CoordinatorLayout behaves like RelativeLayout. Try this instead.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <FrameLayout
        android:id="@+id/fragment1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <FrameLayout
        android:id="@+id/fragment2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Comments