Android replace fragment still displays some of the replaced fragment

Question

I have a tab that contains a linear layout with a searchview and a listview. When the user clicks one of the search results, I want to replace that layout with another layout containing the details of the selection.

What happens when I replace the search fragment only the listview portion of the layout gets replaced; the searchview is still visible and active on the screen.

Here is my search layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/search_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <SearchView
        android:id="@+id/public_calendar_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:iconifiedByDefault="false"
    </SearchView>

    <ListView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:choiceMode="singleChoice" />

    <TextView
        android:id="@android:id/empty"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:gravity="center"/>

</LinearLayout>

Here is the detail layout:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="vertical" >

        <Space
            android:layout_width="0dip"
            android:layout_height="20dip"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".8"
            android:text="@string/label_Name" />

        <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".1" />
    </LinearLayout>

    .........

</LinearLayout>

And my code to replace the search fragment:

FragmentTransaction transaction = getFragmentManager().beginTransaction();

// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack.
DetailFragment fragment = DetailFragment.newInstance(cal);
transaction.replace(R.id.search_layout, fragment);

transaction.addToBackStack(null);
transaction.commit();

Detail fragment creation:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.detail_layout, container, false);
    return v;
}

static DetailFragment newInstance(String cal) {
    DetailFragment d = new DetailFragment();
    return d;
}

What am I doing wrong? How can I get the entire search layout to be replaced.

Thanks!

Answer 1

I figured out my problem. Marco wasn't exactly right but he pointed me in the right direction.

The problem was the the container ID I was passing to the replace method was the ID of the fragment I was replacing, not the ID of the fragment container. This seems to explain why some of the original fragment controls were remaining after the replace - that entire fragment wasn't being replaced.

I changed it to get the fragment container view ID, and that worked! Here's the code:

transaction.replace(((ViewGroup)(getView().getParent())).getId(), fragment); 

I found the answer for getting the container view ID of a fragment here, Get fragment's container view id.

Answer 2

I was using the correct ID, then also it wasnt going away. Turns out that you need to set the Background color to your needed color in new Fragment layout, like this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="@color/white_color">