ViewPager using xml files for the views

Question

I want to use three previously created Activities in a ViewPager (with PagerAdapter) so the user can scroll smoothly horizontally through them. I followed a tutorial which worked great. The problem is in the tutorial they use TextViews to demonstrate. I already have finished Activities (of which the layouts are in XML files). I want to use these Activities in that slider now but it looks like I can only use Views for that. I could not figure out how I have to change the code of the classes (from "implements Activity" to "extends View") that I can use it in the slider.

The my current code looks like this:

public class HorizontalSliderBeispielActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);

       cxt = this;
       awesomeAdapter = new AwesomePagerAdapter();
       awesomePager = (ViewPager) findViewById(R.id.awesomepager);
       awesomePager.setAdapter(awesomeAdapter);
    }
...

then the inner class with the PageAdapter:

...
private class AwesomePagerAdapter extends PagerAdapter {

    public Object instantiateItem(View collection, int position) {
        TextView tv = new TextView(cxt);
        tv.setText("Bonjour PAUG " + position);
        tv.setTextColor(Color.WHITE);
        tv.setTextSize(30);

        view_01 = new SubmitCheatInstructions(cxt);

        ((ViewPager) collection).addView(tv, 0);
        ((ViewPager) collection).addView(view_01 , 1);

        return tv;
    }
}

Instead of that TextView "tv" I want to use Activities (i.e. SubmitCheatInstructions). Previously this class looked like:

public class SubmitCheatInstructions implements Activity {

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.submitcheat_instructions);
}

}

but as far as I know I have to change it to

public class SubmitCheatInstructions extends View {
    ????
}

in order to be able to use it for the ViewPager.

My problem now is that I want to load the layout from the layout xml file (submitcheat_instructions.xml) into that view and not do everything in code. I could not figure out how I have to do this.

Thanks for any help.

Answer 1

I followed the same tutorial and like you i was unable to achieve this at first but after some tinkering and trial and error the following code worked like a charm:

        /**
     * Create the page for the given position. The adapter is responsible
     * for adding the view to the container given here, although it only
     * must ensure this is done by the time it returns from
     * {@link #finishUpdate()}.
     * 
     * @param container
     *            The containing View in which the page will be shown.
     * @param position
     *            The page position to be instantiated.
     * @return Returns an Object representing the new page. This does not
     *         need to be a View, but can be some other container of the
     *         page.
     */
    @Override
    public Object instantiateItem(View collection, int position) {
        View v = new View(PatientView.this.getApplicationContext());
        final LayoutInflater inflater = (LayoutInflater) PatientView.this
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        switch (position) {
        case 0:
            v = inflater.inflate(R.layout.patientp1,
                    (ViewGroup) null, false);
            ((Button) v.findViewById(R.id.pp1btnbck)).setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View arg0) {
                    finish();
                }
            });

            break;
        case 1:
            v = inflater.inflate(R.layout.patientp2, null, false
                    );
            break;
        default:

            TextView tv = new TextView(PatientView.this.context);
            tv.setText("Page " + position);
            tv.setTextColor(Color.WHITE);
            tv.setTextSize(30);
            v = tv;
            break;
        }
        ((ViewPager) collection).addView(v, 0);

        return v;
    }

Hope this helps, Good luck Shereef Marzouk

Answer 2

Thanks Shereef. Your code was really useful. I wanted to pass data from my main activity to the different layout's in ViewPager. I got the idea from your code where you are setting the onClickListener for the button. That helped me to pass data generated in the main activity to the different TextView's in different layout's.

 public Object instantiateItem(View collection, int position)
    {
        View v = new View(CalcTimeActivity.this.getApplicationContext());
        collection.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        final LayoutInflater inflater = (LayoutInflater) CalcTimeActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

                switch (position) {
                case 0:
                    v = inflater.inflate(R.layout.N, (ViewGroup) null, false);
                    ((TextView) v.findViewById(R.id.tvA)).setText(strA);
                    ((TextView) v.findViewById(R.id.tvB)).setText(strB);
                    ((TextView) v.findViewById(R.id.tvC)).setText(strC);
                    break;
                case 1:
                    v = inflater.inflate(R.layout.M, null, false);
                    break;
                case 2:
                    v = inflater.inflate(R.layout.F, null, false);
                    break;
                }

                ((ViewPager) collection).addView(v, 0);
                return v;

}