HorizontalScrollView duplicated view when in ViewPager

Question

I've got HorizontalScrollView inside RelativeLayout on two pages in ViewPager. At first it works ok, but when I swipe through the pages inside ViewPager and then again try to scroll the HorizontalScrollView, the view is duplicated like this:

So it's like duplicated with one view stuck on the background and one on the foreground is scrolling normally.

I've tried several things like play with background color, persistentDrawingCache, removeAllViews and add them again but it still happens.

Can you help me find out what's causing this and how to fix this? Thanks a lot!

Update: here are the code snippets

horizontal_scrollview_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scrollbars="none"
    android:overScrollMode="never"
    android:persistentDrawingCache="none"
    android:layout_centerHorizontal="true" >

    <LinearLayout
        android:id="@+id/horizontalScrollLinearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />

</HorizontalScrollView>

horizontal_scrollview_child_layout.xml

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

    <com.xxx.CircularImageView
        android:id="@+id/contactPhotoImageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_launcher"
        app:border="true"
        app:border_color="@android:color/holo_blue_light"
        app:border_width="2dp"
        app:shadow="true" />

    <TextView
        android:id="@+id/contactNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

HorizontalScrollViewFragment.java

public class HorizontalScrollViewFragment extends Fragment {
    private LinearLayout childLinearLayout;

    @Override
    public View onCreateView(final LayoutInflater inflater,
            final ViewGroup container, final Bundle savedInstanceState) {       
        final View rootView = inflater.inflate(
                R.layout.horizontal_scrollview_layout, container, false);

        contactsLinearLayout = (LinearLayout) rootView
                .findViewById(R.id.horizontalScrollLinearLayout);

        //ADDING CHILDREN HERE
        final View child1 = LayoutInflater.from(getActivity()).inflate(
                R.layout.horizontal_scrollview_child_layout, null);
        childLinearLayout.addView(child1);
        ...

        return rootView;
    }
}

DayViewFragment.java (fragment inserted into ViewPager)

public class DayViewFragment extends Fragment {
    ...
    private HorizontalScrollViewFragment fragment;

    @Override
    public View onCreateView(final LayoutInflater inflater,
            final ViewGroup container, final Bundle savedInstanceState) {
        final View rootView = inflater.inflate(R.layout.day_item_layout,
                container, false);
        ...
        final FragmentManager fm = getChildFragmentManager();
        final FragmentTransaction ft = fm.beginTransaction();

        fragment = new HorizontalScrollViewFragment();
        ft.add(R.id.fragmentContainer, fragment);

        ft.commit();
        ...


        return rootView;
    }
}

Answer 1

The issue occurred when the fragment was recreated after the limit of the screens to be retained by ViewPager was reached and the fragment holding the fragment needed to be recreated. The default value is 1 therefore I only needed to change it to 2 (setOffscreenPageLimit(2)) as I have 3 fragments in ViewPager. Now the problem doesn't occur. It's not an ideal solution but works. In case this doesn't help somebody else: you need to control when and how the fragment is recreated and make sure view is cleared.