android - multiple layout viewpager with one fragment

Question

I must clear that I am looking for an example or answer where I can use various differnt layout designs in a viewpager and the data in all the pages would be dynamic and all pages can be interacted by the user.

My Use Case and current approach towards the problem :

So I have got 8 different types of question types and so I have created layouts for all of them. Also I the data in the views for these layouts has to be populated via java Map that has fetched data from the sqlite DB.

But a test may contain 25 questions with different layouts out of the above 8. And for all these 25 questions I want to use a Viewpager and a Fragment that will return the required layout based on the passed question type value out of my java map.

My apporach towards this :

I have created an activity and have inflated it with a viewpager layout :

R.layout.practice_pager

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/test_container" android:layout_width="match_parent" android:layout_height="match_parent" />

*Activity Edited code *

       public class TestActivity extends FragmentData implements FragmentData{

            FragmentManager manager=getSupportFragmentManager();
            private ViewPager mViewPager;  
            private MyFragmentPagerAdapter mMyFragmentPagerAdapter;
            int PAGE_COUNT = 0;
            GrePracticeTestRecord p=new GrePracticeTestRecord();
            private HashMap<Integer, GrePracticeResultRecord> mPracResultMap;

            public static int fragmentToReturn=0;


            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.practice_pager);

                mViewPager = (ViewPager) findViewById(R.id.test_container);  

           //This function is called to fetch the data from sqlite db and fill the map with data
                LoadingTestView();

                PAGE_COUNT=mPracRecordMap.size();
                    initPager();
              }

        //here I initialize the pager and set the adapter to it
        public void initPager()
    {
     p.setQUES(mPracRecordMap.get(1).getQUES());
     p.setEXPL(mPracRecordMap.get(1).getEXPL());    

     fragmentToReturn=Integer.parseInt(mPracRecordMap.get(1).getQTYPE());
     setData(p);

     mMyFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),fList);  
     mViewPager.setAdapter(mMyFragmentPagerAdapter);  

     mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

        @Override
        public void onPageSelected(int arg0) {

            mMyFragmentPagerAdapter.notifyDataSetChanged();

            p.setQUES(mPracRecordMap.get(mViewPager.getCurrentItem()+1).getQUES());
            p.setEXPL(mPracRecordMap.get(mViewPager.getCurrentItem()+1).getEXPL());

            setData(p);

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });
  }

           @Override
        public void setData(GrePracticeTestRecord p) {
            // TODO Auto-generated method stub

        }

        @Override
        public GrePracticeTestRecord getData() {
            // TODO Auto-generated method stub
            return p;
        }
    }

My Adapter Edited code

   public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter{

         private List<Fragment> fragments;

        public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments) {
            super(fm);
            this.fragments = fragments;
        }

        /** This method will be invoked when a page is requested to create */
        @Override
        public Fragment getItem(int position) {
            System.out.println("value of position "+position);
            return this.fragments.get(position);
        }


        /** Returns the number of pages */
        @Override
        public int getCount() {
            return this.fragments.size();
        }

        @Override
        public int getItemPosition(Object object) {
            // TODO Auto-generated method stub
            return MyFragmentPagerAdapter.POSITION_NONE;
        }
    }

Interface FragmentData

public interface FragmentData {
    public void setData(GrePracticeTestRecord p);
    public GrePracticeTestRecord getData();
}

TestFragment Edited code

public class TestFragment extends Fragment {

AnswerEnterListener callBack;
FragmentData fD;
Button submitAnswer;
EditText userAnswer;

TextView qText,expl;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
          return inflater.inflate(R.layout.qtype1, container, false);
}

public interface AnswerEnterListener
{
    public void onInputAnswer(String ans);
}

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);

    try {
        callBack=(AnswerEnterListener) activity;
        fD=(FragmentData) activity;
    } catch (Exception e) {
        // TODO: handle exception
    }
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);


    qText=(TextView) getActivity().findViewById(R.id.question_text);
    expl=(TextView)getActivity().findViewById(R.id.explanation_text);


    qText.setText(Html.fromHtml(fD.getData().getQUES()));
    expl.setText(Html.fromHtml(fD.getData().getEXPL()));

}       

}

Similar to TestFragment , I have not the other fragments too. Each for a layout type.

Issues :

• The first layout is repeated two times at the first time , and also when I swipe back then the position of data is misplaced.
• Is this the right approach, I have been suggested by someone that you should use three fragments and update the left and right fragments with data , but this actually bounced off me. Can anyone share a good example of it or a blog.

Answer 1

I must clear that I am looking for an example or answer where I can use various differnt layout designs in a viewpager and the data in all the pages would be dynamic and all pages can be interacted by the user.

This should be quite easy to make but you seem to have complicated this a lot. You need to do something like this:

Get the data from the database with the LoadingTestView(); function.

Initialize the ViewPager and set it's adapter. The adapter will return the proper fragment instance in the getItem() method, based on whatever criteria you have.

In the fragments, retrieve the data from the activity which should expose the data through some method.

I've made a simple example that you can find here.