view pager sometimes show empty

Question

I use PagerSlidingTabStrip library but I have a problem with this library. I have a GridView that gets updated from the web by an AsyncTask when the page is changed. My problem is that the first page is empty. When I click on tab 2 the content shows up, but if I click on tab 3 when tab 1 is selected (move to tab from selected tab) the page also is empty. It only works well if I swipe the pages one by one or click on "next tab" (move one tab form selected tab) .

Why is the page sometimes empty?

The library sample app works correctly but it changes view on creation. My code is different because the grid view is updated in AsyncTask by change page selected.

The code for subCategoryActivity.java:

  public class SubCategoryActivity extends SherlockFragmentActivity {
    static SubCategoryObjectsFragment f;

    private PagerSlidingTabStrip tabs;
    private ViewPager pager;
    private MyPagerAdapter pagerAdapter;
    TextView tvCustomTitle;
    static List<NameValuePair> nameValuePairs = new ArrayList<NameValuePair>();
    static JSONArray jsonArray;
    static String url = "http://192.168.1.2/arel/SubCat.php";
    static String url2 = "http://192.168.1.2/arel/subCatObject.php";

    private static String[][] SubCat;
    GridviewAdapter gridAdapter;
    static GridView gridViewSubCategory;
    HashMap<String, String> map;
    static ArrayList<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
    Intent intent;

    private class getSubCategoryObjects extends AsyncTask<String, Void, String> {
        @Override
        protected String doInBackground(String... url) {
            // TODO Auto-generated method stub
            return BaseActivity.jsonParser.makeHttpRequest(url[0], "POST",
                    nameValuePairs);
        }
        @Override
        protected void onProgressUpdate(Void... values) {
            // TODO Auto-generated method stub
            super.onProgressUpdate(values);
        }
        @Override
        protected void onPostExecute(String result) {
            // TODO Auto-generated method stub
            try {
                jsonArray = new JSONArray(result);
            } catch (JSONException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            for (int i = 0; i < jsonArray.length(); i++) {
                JSONObject jsonObjet;
                map = new HashMap<String, String>();
                try {

                    jsonObjet = jsonArray.getJSONObject(i);
                    map.put("id", String.valueOf(jsonObjet.getInt("id")));
                    map.put("title", jsonObjet.getString("title_fa"));
                    map.put("image", jsonObjet.getString("image"));
                    map.put("price", jsonObjet.getString("price"));
                    map.put("date", jsonObjet.getString("date"));

                    list.add(map);

                } catch (JSONException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (Exception e) {
                    // TODO: handle exception
                    e.printStackTrace();
                }

            }
            gridAdapter = new GridviewAdapter(SubCategoryActivity.this, list);
            gridViewSubCategory.setAdapter(gridAdapter);

        }
    }

    private class getSubCategory extends AsyncTask<String, Void, String> {

        @Override
        protected String doInBackground(String... url) {
            // TODO Auto-generated method stub
            return BaseActivity.jsonParser.makeHttpRequest(url[0], "POST",
                    nameValuePairs);

        }

        @Override
        protected void onProgressUpdate(Void... values) {
            // TODO Auto-generated method stub
            super.onProgressUpdate(values);
        }

        @Override
        protected void onPostExecute(String result) {
            // TODO Auto-generated method stub
            try {
                jsonArray = new JSONArray(result);
            } catch (JSONException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

            SubCat = new String[jsonArray.length()][2];
            for (int i = 0; i < jsonArray.length(); i++) {

                JSONObject jsonObjet;

                try {

                    jsonObjet = jsonArray.getJSONObject(i);
                    SubCat[i][0] = String.valueOf(jsonObjet.getInt("id"));
                    SubCat[i][1] = jsonObjet.getString("title_fa");

                } catch (JSONException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (Exception e) {
                    // TODO: handle exception
                    e.toString();

                }

            }

            pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());

            pager.setAdapter(pagerAdapter);
//  pager.setCurrentItem(0);
        //pager.setOffscreenPageLimit(0);



            tabs.setOnPageChangeListener(new OnPageChangeListener() {

                @Override
                public void onPageSelected(int arg0) {
                    // TODO Auto-generated method stub
                    jsonArray = new JSONArray();
                    list = new ArrayList<HashMap<String, String>>();
                    nameValuePairs = new ArrayList<NameValuePair>();
                    nameValuePairs.add(new BasicNameValuePair("getAdvertise", "true"));
                    nameValuePairs.add(new BasicNameValuePair("subCatId",
                            SubCat[arg0][0]));

                    // Activity myActivity = getActivity();
                    // if (myActivity instanceof SubCategoryActivity) {
                    new getSubCategoryObjects().execute(url2);


                }

                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onPageScrollStateChanged(int arg0) {
                    // TODO Auto-generated method stub

                }
            });

            //jsonArray = new JSONArray();


            // final int pageMargin = (int) TypedValue.applyDimension(
            // TypedValue.COMPLEX_UNIT_DIP, 16, getResources()
            // .getDisplayMetrics());
            // pager.setPageMargin(pageMargin);

            tabs.setViewPager(pager);
            tabs.setTextSize(20);
            tabs.setTypeface(BaseActivity.font, Typeface.NORMAL);

        //  list = new ArrayList<HashMap<String, String>>();
        //  nameValuePairs = new ArrayList<NameValuePair>();
        //  nameValuePairs.add(new BasicNameValuePair("getAdvertise", "true"));
        //  nameValuePairs.add(new BasicNameValuePair("subCatId",
        //          SubCat[0][0]));

            //new getSubCategoryObjects().execute(url2);

        }
    }

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list);

        intent = getIntent();

        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pager = (ViewPager) findViewById(R.id.pager);

        jsonArray = new JSONArray();
        nameValuePairs = new ArrayList<NameValuePair>();
        nameValuePairs.add(new BasicNameValuePair("getSubCategory", "true"));
        nameValuePairs.add(new BasicNameValuePair("catId", intent
                .getStringExtra("id")));

        new getSubCategory().execute(url);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getSupportActionBar().setDisplayShowTitleEnabled(false);
        getSupportActionBar().setDisplayShowCustomEnabled(true);

        tvCustomTitle = new TextView(this);
        tvCustomTitle.setText(intent.getStringExtra("title"));
        LinearLayout ll = new LinearLayout(this);
        LinearLayout.LayoutParams para = new LinearLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        para.setMargins(0, 0, 0, 0); // left,top,right, bottom
        para.gravity = Gravity.CENTER_VERTICAL;
        tvCustomTitle.setTypeface(BaseActivity.font);
        Configuration config = getResources().getConfiguration();
        if (Build.VERSION.SDK_INT >= 13) {

            if (config.smallestScreenWidthDp >= 600) {
                tvCustomTitle.setTextSize(22);
            } else {
                tvCustomTitle.setTextSize(14);
            }
        } else {
            tvCustomTitle.setTextSize(14);
        }

        tvCustomTitle.setTextColor(Color.WHITE);
        ll.addView(tvCustomTitle, para);
        getSupportActionBar().setCustomView(ll);

        changeColor(intent.getIntExtra("color", Color.parseColor("#FF666666")));


    }

    private void changeColor(int newColor) {

        tabs.setIndicatorColor(newColor);

        // change ActionBar color just if an ActionBar is available

        Drawable colorDrawable = new ColorDrawable(newColor);
        Drawable bottomDrawable = getResources().getDrawable(
                R.drawable.actionbar_bottom);
        LayerDrawable ld = new LayerDrawable(new Drawable[] { colorDrawable,
                bottomDrawable });

        getSupportActionBar().setBackgroundDrawable(ld);

    }

    /*
     * @Override protected void onSaveInstanceState(Bundle outState) {
     * super.onSaveInstanceState(outState);
     * 
     * }
     * 
     * @Override protected void onRestoreInstanceState(Bundle
     * savedInstanceState) { super.onRestoreInstanceState(savedInstanceState);
     * 
     * }
     */
    public static class MyPagerAdapter extends FragmentStatePagerAdapter  {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return SubCat[position][1];
        }

        @Override
        public int getCount() {
            return SubCat.length;
        }

        @Override
        public Fragment getItem(int position) {
            f = new SubCategoryObjectsFragment();
            Bundle b = new Bundle();
            b.putString(SubCategoryObjectsFragment.ARG_ID, SubCat[position][0]);
            f.setArguments(b);

            return f;
        }




    }

    public static class SubCategoryObjectsFragment extends Fragment {

        private static final String ARG_ID = "id";

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {

            View rootView = inflater.inflate(
                    R.layout.fragment_sub_category_objects, container, false);
//          gridViewSubCategory = new GridView(getActivity());

                gridViewSubCategory = (GridView) rootView.findViewById(R.id.gridViewSubCategory);

            return rootView;
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onActivityCreated(savedInstanceState);

            /*
             * jsonArray = new JSONArray(); list = new ArrayList<HashMap<String,
             * String>>(); nameValuePairs = new ArrayList<NameValuePair>();
             * nameValuePairs.add(new BasicNameValuePair("getAdvertise",
             * "true")); nameValuePairs.add(new BasicNameValuePair("subCatId",
             * getArguments().getString("id")));
             * 
             * 
             * Activity myActivity = getActivity(); if (myActivity instanceof
             * SubCategoryActivity) { ((SubCategoryActivity) myActivity).new
             * getSubCategoryObjects().execute(url2); }
             */
            // Implement On Item click listener
            gridViewSubCategory
                    .setOnItemClickListener(new OnItemClickListener() {
                        @Override
                        public void onItemClick(AdapterView<?> parent,
                                View view, int position, long id) {
                            // TODO Auto-generated method stub
                            BaseActivity.cd = new ConnectionDetector(
                                    getActivity());
                            BaseActivity.isInternetPresent = BaseActivity.cd
                                    .isConnectingToInternet();

                            if (BaseActivity.isInternetPresent) {

                                Intent i = new Intent(getActivity(),
                                        SubCategoryActivity.class);
                                i.putExtra("id", ((TextView) view
                                        .findViewById(R.id.textViewId))
                                        .getText().toString());
                                i.putExtra(
                                        "color",
                                        i.getIntExtra("color",
                                                Color.parseColor("#FF666666")));
                                startActivity(i);
                            } else {
                                Toast.makeText(
                                        getActivity(),
                                        "به اینترنت متصل نیستید، به اینترنت متصل شده و دوباره امتحان کنید.",
                                        Toast.LENGTH_SHORT).show();
                            }

                        }
                    });
        }

    }

    public class GridviewAdapter extends BaseAdapter {

        private Activity activity;
        private ArrayList<HashMap<String, String>> list;
        HashMap<String, String> tempMap;

        public GridviewAdapter(Activity activity,
                ArrayList<HashMap<String, String>> list) {

            this.activity = activity;
            this.list = list;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return list.size();
        }

        public Object getItem(int position) {
            return position;
        }

        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub

            LayoutInflater inflator = activity.getLayoutInflater();

            View vi = convertView;
            if (convertView == null)
                vi = inflator.inflate(R.layout.gridview_sub_category_row, null);

            TextView id = (TextView) vi.findViewById(R.id.textViewId);
            TextView title = (TextView) vi.findViewById(R.id.textViewTitle);
            ImageView imageViewSubCat = (ImageView) vi
                    .findViewById(R.id.imageViewSubCat);
            TextView price = (TextView) vi.findViewById(R.id.textViewPrice);
            TextView date = (TextView) vi.findViewById(R.id.textViewDate);
            RelativeLayout textBackground = (RelativeLayout) vi
                    .findViewById(R.id.relativeLayoutText);

            tempMap = new HashMap<String, String>();
            tempMap = list.get(position);

            id.setText(tempMap.get("id"));
            textBackground.setBackgroundColor(intent.getIntExtra("color",
                    Color.parseColor("#FF666666")));
            title.setText(tempMap.get("title"));
            price.setText(tempMap.get("price"));
            date.setText(tempMap.get("date"));
            title.setTypeface(BaseActivity.font);
            price.setTypeface(BaseActivity.font);
            date.setTypeface(BaseActivity.font);

            // File cachedImg = ImageLoader.getInstance().getDiscCache()
            // .get(picUrl + tempMap.get("logo") + ".jpg");

            // if (cachedImg.exists())
            // cachedImg.delete();

            ImageLoader.getInstance().displayImage(
                    BaseActivity.picUrl + tempMap.get("image") + ".jpg",
                    imageViewSubCat);

            return vi;
        }
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // TODO Auto-generated method stub
        menu.clear();

        menu.add("آگهی جدید").setIcon(R.drawable.action_advertise_new)
                .setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);

        menu.add("غربال").setIcon(R.drawable.action_search)
                .setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);

        menu.add("مرتب سازی").setIcon(R.drawable.action_sort)
                .setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);

        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (item.getItemId() == android.R.id.home) {
            finish();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

}

code for activity_list.xml:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.astuetz.viewpager.extensions.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        android:background="@drawable/background_tabs" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tabs"
        tools:context=".SubCategoryActivity" />

</RelativeLayout>

code for gridview_sub_category_row.xml:

    <?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:padding="5dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp" >
            <TextView
        android:id="@+id/textViewId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/imageViewSubCat"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <RelativeLayout
        android:id="@+id/relativeLayoutText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/imageViewSubCat"
        android:background="#FF3F9FE0" >

         <TextView
             android:id="@+id/textViewTitle"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_alignParentRight="true"
             android:layout_marginLeft="10dp"
             android:layout_marginRight="10dp"
             android:layout_marginTop="5dp"
             android:gravity="right"
             android:text="همه"
             android:textAppearance="?android:attr/textAppearanceMedium" />

         <TextView
             android:id="@+id/textViewPrice"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true"
             android:layout_alignRight="@+id/textViewTitle"
             android:layout_marginBottom="5dp"
             android:layout_toRightOf="@+id/textViewDate"
             android:gravity="right"
             android:text="20500000 تومان" />

         <TextView
             android:id="@+id/textViewDate"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignBaseline="@+id/textViewPrice"
             android:layout_alignBottom="@+id/textViewPrice"
             android:layout_alignParentLeft="true"
             android:layout_marginLeft="14dp"
             android:text="دقایقی پیش" />

    </RelativeLayout>

    </RelativeLayout>

</RelativeLayout>

code for fragment_sub_category_objects.xml:

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <GridView 
        android:id="@+id/gridViewSubCategory"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="300dp"
        android:horizontalSpacing="16dp"
        android:numColumns="auto_fit"
        android:scrollbars="none"
        android:verticalSpacing="16dp" >

    </GridView>
</FrameLayout>

Answer 1

looked over your code briefly and :

i dont see the reason for using 'FragmentStatePagerAdapter' instead of normal. Note that you can use the vanilla implementation of the adapter from the support.v4 library.

also, i dont understand the use of the static fragment 'f' rather than having using Array to supply object references to be return from 'getItem(position)' in the pagerAdapter.

For debug, it can help to review the source code for the ViewPager...

scrl down to #800 or so and see 'populate()' and 'dataSetChanged()' and also review the source for the base class of the adapter implementation that you use.

If you have 'black' or blank pages , the ViewPager is being fed bad instances of by the adapter as the VP tries to actively manage the 3 adjacent pages(default) that are kept in memory for easy scrolling.

Answer 2

Your fragment's view will typically get destroyed when it is more than one page away from the currently showed page. However, if your fragment has been shown already, it will still be created, but when it's about to be shown your onCreateView() method will be called again. So, if you store your data in a local variable, you can check that local variable (and you should probably save it's state in OnSaveInstanceState() and it will be passed to your onCreateView() method as the savedInstanceState bundle) and then re-populate your views with the cached content.

Answer 3

try:

pager.setOffscreenPageLimit(2);

where 2 is the amount of pages to keep in memory on either side of the current page.