Viewpager background color skips first page

Question

Viewpager background color skips first page

I have a viewpager inside a fragment that exhibits the following behavior. Pages 2 are displayed correctly, but the first page is displayed as if it was behind the background of the container view - as if it had a lower z index than the background (where z-indices increase in relation to the user) - see images related below.

Code to create the page:

pager.setAdapter(new PagerAdapter() { @Override public void destroyItem(ViewGroup container, int position, Object item) { container.removeView((View) item); } @Override public int getCount() { return mImages.size(); } @Override public View instantiateItem(ViewGroup container, final int position) { LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); final View layout = inflater.inflate(R.layout.image_selector, null, false); final ImageView image = (ImageView) layout.findViewById(R.id.image); image.setImageResource(mImages.get(position)); container.addView(layout); return layout; } @Override public boolean isViewFromObject(View view, Object item) { return item.equals(view) } });

..nothing really special.

Layout for viewpager snippet:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff2288dd"> <TextView android:id="@+id/text1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/help1" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/text1" android:layout_above="@+id/text2" android:layout_margin="12dip" /> <TextView android:id="@id/text2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="@string/help2" /> </RelativeLayout>

and for the image on the page:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" /> </RelativeLayout>

Again, nothing unusual.

The behavior is present on Froyo (2.2) and Gingerbread (2.3) on physical devices and emulators, as well as on a physical device with 4.2.

The more difficult part is that when accessing the selected image, the new fragment replaces the original viewpager fragment, and if the selected image is on the first page of the viewpager, the described behavior is also there - despite the fragments having completely different layouts (and the new fragment doesn’t having a certain background).

Layout for a fragment of the selected image:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" /> </RelativeLayout>