Android ViewPager with ImageViews

Question

I have a viewpager that houses 4 frame layouts each with a different image as its background. I have tried several ways of loading and resizing the images but the viewpager is still laggy when you swipe; since it has to change the background images accordingly.

Other apps such as QuizUp and most of Google's own apps have images on the tutorial but and they're very smooth. Is there any way to achieve the same effect; keep the images as backgrounds while optimizing the viewpager's performance?

Here is my viewpager adapter;

private class ScreenSlidePagerAdapter extends PagerAdapter {

    Context context;
    LayoutInflater layoutInflater;

    public ScreenSlidePagerAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView text1 = null, text2 = null, text3 = null, text4 = null;
        ImageView background;
        Button begin;

        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View layout = null;

        switch (position) {
            case 0:
                layout = layoutInflater.inflate(R.layout.lifestyle, container, false);
                text1 = (TextView) layout.findViewById(R.id.text3);
                text2 = (TextView) layout.findViewById(R.id.text4);
                text3 = (TextView) layout.findViewById(R.id.text5);
                background = (ImageView) layout.findViewById(R.id.background);

                background.setImageResource(R.drawable.tlifestyle);
                break;
            case 1:
                layout = layoutInflater.inflate(R.layout.sports, container, false);
                text1 = (TextView) layout.findViewById(R.id.text3);
                text2 = (TextView) layout.findViewById(R.id.text4);
                text3 = (TextView) layout.findViewById(R.id.text5);
                background = (ImageView) layout.findViewById(R.id.background);

                background.setImageResource(R.drawable.tsports);
                break;
            case 2:
                layout = layoutInflater.inflate(R.layout.events, container, false);
                text1 = (TextView) layout.findViewById(R.id.text1);
                text2 = (TextView) layout.findViewById(R.id.text2);
                text3 = (TextView) layout.findViewById(R.id.text3);
                text4 = (TextView) layout.findViewById(R.id.text4);
                background = (ImageView) layout.findViewById(R.id.background);

                background.setImageResource(R.drawable.tevents);
                break;
            case 3:
                layout = layoutInflater.inflate(R.layout.intro_to_categories, container, false);
                text1 = (TextView) layout.findViewById(R.id.welcomeText);
                text2 = (TextView) layout.findViewById(R.id.findText);
                text3 = (TextView) layout.findViewById(R.id.dont_stress);
                text4 = (TextView) layout.findViewById(R.id.dont_stress_2);
                begin = (Button) layout.findViewById(R.id.begin);

                Typeface typeface = Typeface.createFromAsset(getAssets(), "mpashofont.otf");
                begin.setTypeface(typeface);

                begin.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        startActivity(new Intent(AppTutorial.this, AppSetup.class));
                    }
                });
                break;
        }

        Typeface typeface = Typeface.createFromAsset(getAssets(), "mpashofont.otf");
        assert text1 != null && text2 != null && text3 != null;
        text1.setTypeface(typeface);
        text2.setTypeface(typeface);
        text3.setTypeface(typeface);
        if (text4 != null) {
            text4.setTypeface(typeface);
        }

        container.addView(layout);

        return layout;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((FrameLayout) object);
    }
}

Answer 1

i guess as per your code of adapter i can see that you have 3 textview and 1 background image for all different inflated layouts.

and you are creating typeface on each swipe so place this typeface initialization code in your constructor

and it is better to change data as per position.

like this

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
    TextView text1 = null, text2 = null, text3 = null, text4 = null;
    ImageView background;

    View itemView = mLayoutInflater.inflate(R.layout.your_layout, container, false);
    text1 = (TextView) layout.findViewById(R.id.text3);
    text2 = (TextView) layout.findViewById(R.id.text4);
    text3 = (TextView) layout.findViewById(R.id.text5);
    background = (ImageView) layout.findViewById(R.id.background);

   text1.setText(arr[position]);
   ...
}