Swipe tabs lagging when switching fragments

Question

i have a little problem, i just have 3 fragments and i added to one of them a photoshop background (1080 x 1920) the thing is that when it loads to the phone the switching between the tabs lags a lot , but if i just render the image to 720 x 1280 it works fine and no lag appear, i implemented mViewPager.setOffscreenPageLimit(0); but it seems it dosnt work , i dont know what is causing the problem, i will let here my main code, thanks in advanced

import android.support.design.widget.TabLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;

import android.widget.ExpandableListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setOffscreenPageLimit(0);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }




    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */


    //-----------------------FRAGMENTS-----------------------

    public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).


            switch (position) {
                case 0:
                    Fragment fragment = new DummySectionFragment3();
                    Bundle args = new Bundle();
                    args.putInt(DummySectionFragment3.ARG_SECTION_NUMBER, position + 1);
                    fragment.setArguments(args);
                    return fragment;

                case 1:
                    Fragment fragment2 = new DummySectionFragment2();
                    Bundle args2 = new Bundle();
                    args2.putInt(DummySectionFragment2.ARG_SECTION_NUMBER, position + 2);
                    fragment2.setArguments(args2);
                    return fragment2;

                case 2:

                    Fragment fragment3 = new DummySectionFragment();
                    Bundle args3 = new Bundle();
                    args3.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 3);
                    fragment3.setArguments(args3);
                    return fragment3;


                default:
                    return null;
            }
        }
        //-----------------------FRAGMENTS-----------------------



        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }



        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "Bares";
                case 1:
                    return "No se";
                case 2:
                    return "Eventos";
            }
            return null;
        }
    }





    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        public PlaceholderFragment() {
        }




        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
            TextView dummyTextView = (TextView) rootView.findViewById(R.id.section_label);
            dummyTextView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
            return rootView;
        }
    }
    }

Answer 1

i implemented mViewPager.setOffscreenPageLimit(0); but it seems it dosnt work

Firstly,

Why did you set page limit to 0 if you are hoping for a smoother swipe ?

Do it as (if you have 3 tabs just set limiit to 1 , if 5 tabs, setting it to 2 would work)

mViewPager.setOffscreenPageLimit(2); 

this means you are forcing caching of your 2 left and 2 right tabs from current tab.

So that they wont be loaded again and again instead they would be cached.

NOTE Having said that, you should keep in mind that it would consume more memory and avoid unnecessary memory consumption.

hope it helped someone.

Answer 2

You don't say how you load the background.

But, if you've simply just set in the fragment layout then the image gets loaded when you inflate the XML. This happens in the UI thread. The larger the image the longer it takes.

I would recommend loading images with an async library like Picasso .

Answer 3

I had the same problem. First I thought the data size of the image was to big but that wasn't the case. I changed the measurement of the image in Photoshop and decreased the width. Now it works fine.