ListView ghosting when using DrawerLayout with Fragments

Question

My layout was working fine before I switched it to use fragments inside the DrawerLayout. After that the ListView in the main view ghosts a copy of the list when scrolling.

The ListView contents scroll, but a copy of the first page remains on screen. I've been logging debug messages and there is no second copy of listview created, and no second copy of data sent from the adapter.

The layout for the activity uses DrawerLayout with fragments before switching to fragments it worked fine.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="400dp"
    android:layout_height="800dp">

<!-- The main content view -->
<fragment android:name="com.nosweatbudgets.receipts.ReceiptsFragment"
          android:id="@+id/receipts_fragment"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
        />

<!-- The navigation drawer -->
<fragment android:name="com.nosweatbudgets.navigate.NavigateFragment"
          android:id="@+id/navigate_fragment"
          android:layout_width="300dp"
          android:layout_height="match_parent"
          android:layout_gravity="start"
        />

</android.support.v4.widget.DrawerLayout>

The fragment classes are each very simple.

ReceiptsFragment's onCreateView looks like this.

    View view = inflater.inflate(R.layout.receipts, container, false);

    _adapter = new ReceiptsAdapter(inflater);
    ListView list = (ListView) view.findViewById(R.id.receipt_list);
    list.setAdapter(_adapter);
    _adapter.Refresh();

    return view;

NavigateFragment's onCreateView is basically the same with a different adapter. It's the ReceiptsFragment that is ghosting while the NavigateFragment does not ghost. Yet they can basically the same approach.

    View view = inflater.inflate(R.layout.navigate, container, false);

    _navigate = new NavigateAdapter(inflater);
    // setup the list view for the side
    ListView list = (ListView) view.findViewById(R.id.left_drawer);
    list.setAdapter(_navigate);
    _navigate.Refresh();

    return view;

For the above fragment classes I'm using the following layouts.

receipts.xml looks like this.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
<ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/receipt_list"/>
</RelativeLayout>

navigate.xml looks like this.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
<ListView
        android:id="@+id/left_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"
        android:background="#EEEEEE"/>
</RelativeLayout>

The pull out navigate listview works just fine, but the main receipts listview has the ghosting problem.

I'm completely stumped as to what is causing this.

EDIT:

Here is how views are created in the ReceiptsAdapter.

public View getView(int position, View convertView, ViewGroup parent)
{
    View view = convertView;
    if (view == null)
    {
        view = _inflater.inflate(R.layout.receipt, null);
    }

    TextView txt_vendor = (TextView) view.findViewById(R.id.receipt_vendor);
    TextView txt_category = (TextView) view.findViewById(R.id.receipt_category);
    TextView category_btn = (TextView) view.findViewById(R.id.category_btn);

    Model receipt = _receipts.get(position);

    int vendor_id = receipt.getAsInteger("smart_vendor_id");
    int category_id = receipt.getAsInteger("smart_category_id");


    if (_vendors.indexOfKey(vendor_id) >= 0)
    {
        txt_vendor.setText(_vendors.get(vendor_id));
    }
    else
    {
        txt_vendor.setText("Select Vendor");
    }

    if (_categories.indexOfKey(category_id) >= 0)
    {
        String cat = _categories.get(category_id);
        txt_category.setText(cat);
        category_btn.setText(Category.ShortTitle(cat));
        category_btn.setBackgroundColor(Category.Color(cat));
        //txt_category.setBackgroundColor(c);
    }
    else
    {
        txt_category.setText("Select Category");
        category_btn.setText("N/A");
    }

    ((TextView) view.findViewById(R.id.receipt_amount)).setText("$" + receipt.getAsString("amount"));
    ((TextView) view.findViewById(R.id.receipt_payment)).setText(receipt.getAsString("payment"));
    ((TextView) view.findViewById(R.id.receipt_date)).setText(receipt.getAsString("receipt_date"));

    return view;
}

EDIT:

This is how the Activity for the layout attaches the fragments via the onCreate method.

public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    // the layout uses fixed width/size, because the layout editor won't render match_parent.
    // so I replace the layout parameters here with match_parent.
    DrawerLayout layout = (DrawerLayout) getLayoutInflater().inflate(R.layout.main, null);
    DrawerLayout.LayoutParams param = new DrawerLayout.LayoutParams(ViewGroup.LayoutParams
            .MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    layout.setLayoutParams(param);
    setContentView(layout);

    // configure this activity
    StyleActionBar();

    // Add the fragments
    getSupportFragmentManager().beginTransaction()
            .add(R.id.navigate_fragment, new NavigateFragment())
            .add(R.id.receipts_fragment, new ReceiptsFragment())
            .commit();
}

Answer 1

I mistakenly followed the fragments tutorial incorrectly, and created both a static fragment in the layout XML and also created a dynamic fragment for the same class at run-time.

The main layout used the <fragment> tag to create a fragment which is automatically attached at runtime via the android:name property.

This is what I have in my layout.xml

<fragment android:name="com.nosweatbudgets.receipts.ReceiptsFragment"
          android:id="@+id/receipts_fragment"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
        />

That was enough to create the fragment, but I mistakenly added code from the fragments tutorial in my activity as follows.

    getSupportFragmentManager().beginTransaction()
            .add(R.id.navigate_fragment, new NavigateFragment())
            .add(R.id.receipts_fragment, new ReceiptsFragment())
            .commit();

That added two additional fragment views to the activity at runtime. This resulted in two listviews for the same position.

What appeared to be a ghosting artifact was infact two fragments for the same class on top of each other. Removing the dynamic creation in onCreate resolved my problem.