13

Hello I have a viewpager with several pages(using a fragment state pager), and some pngs as backgrounds to those pages. I already followed the Displaying Bitmaps in the Ui (http://developer.android.com/training/displaying-bitmaps/display-bitmap.html) so I am already caching and setting the image drawable in a background thread. But I still get some lag when swithcing pages of the pager. On Each fragment, I only inflate the view on the onCreateView() method, so I have no Idea what may be causing this lag. What can I do to remove this lag/choppy effect?

11 Answers 11

52

I had similar problem.

I am showing tutorial-like pages. Each page is a full screen jpg.

At first, I put the pictures in res/drawablesfolder. The viewpager is very laggy when swiping it.

Then I move those jpgs to res/drawable-hdpi folder, the lag is gone.

I think different optimisations are done on the pictures based on folder. So we cannot put everything in res/drawable folder

2
  • This was exactly my problem and your answer resolved it for me. I put all the full size background images in the xhdpi folder and now its smooth as butter. :)
    – Amyth
    Jan 11, 2016 at 20:27
  • 1
    how to hell did you even figure this out. I almost started to think "oh it's probably taking too much ram bcz of huge image" then I just did what you said. And it just worked. I put mine in xhdpi. Is that mean phone with hdpi/mdpi/xxhdpi/xxxhdpi would also show my background.
    – Alex
    Jul 28, 2016 at 18:55
19

You may want to try viewPager.setOffScreenLimit(size) to the number of your pages. This will load all the fragments once and keep from reloading them while swiping.

2
  • Just a small correction, it is viewPager.setOffscreenLimit(size). This worked for me though, thanks! Feb 16, 2018 at 8:07
  • Be careful as if you have many high-res images on your pages or if you have many pages this can quickly lead to OutOfMemoryErrors. Aug 8, 2022 at 11:49
6

For removal of lag:

1)Put the images in res/drawable-hdpi if images are static.If it is downloaded from URL then use background thread for loading of images.

2) set page off screen limit by this method viewPager.setOffScreenLimit(size) . With the help of that view pager cache the minimum number of screen which you set in this method by default its value is 1.

3)You can use FragmentPagerAdapter and FragmentStatePagerAdapter for better performance.

4

I solved this by moving the images into drawable-nodpi, as this disables the scaling for all DPIs. Moving into hdpi/xhdpi will only disable scaling if the user is on a device with that screen density.

2

I followed the answer of Coderek and moved it between the different

res/drawable-hdpi folders

drawable-xxxhdpi is what worked best for my project.

1

My solution to avoid this lag when switching pages was: preload images

final Drawable[] images = new Drawable[3];
for(int i=0; i<3; i++){
    int position = i+1;
    images[i] = getResources().getDrawable(getResources().getIdentifier("image"+position, "drawable", getPackageName()));
 }

and then:

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            imageSwitcher.setImageDrawable(images[position]);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
1
  • Although the code is appreciated, it should always have an accompanying explanation. This doesn't have to be long, but it is expected.
    – peterh
    Jun 20, 2015 at 21:42
1

Building up on @coderek answer I seem to have solved this by fetching bitmaps without scaling them for specific densities:

BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inScaled = false;
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resource, opts);

((ImageView) view).setImageBitmap(bitmap);

Using an image from drawable folder in an xxhdpi device resulted in up to 8 times more memory being allocated!

P.S.:

You can also down sample the drawable if the resolution is too big:

opts.inSampleSize = 2;
1

I know this is an old question, but I have run into it recently and discovered a different issue. So just sharing in case anyone comes across this post.

My fragments were all just big Imageview holders basically and scrolling through Images that the UX/UI team gave me. However, anytime the next or previous image was a different size i.e. (1200 x 1200) transitioning to (1200 x 1300) for example, that swipe would lag, but the rest would be fine.

Resolutions were in the correct folders. I experimented and found that if I cropped all images to the same size, I had no lag issues. However, that didn't fit my need as I wanted different size images.

So I switched to using Glide to load the image into place instead of setting the drawable directly and that cleaned it up very nicely. So if anyone else hits this issue, you may just need to switch to loading with glide asynchronously instead of setting directly the images.

0

I had a similar problem too and, in my case, the lagging was caused by the background picture of the layouts which was too large. I just resized the picture and the swiping lag was gone

0

None of above solutions worked in my case!

I found a library which works around the issue, and additionally incorporates few more interesting features. Take a look at it here!

Try this:

In gradle

compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar'

onCreate

viewPager.setPageTransformer(true, new DefaultTransformer());

You can get some non standard efects by changing second argument, though not all of them work properly.

-1

Instead of moving to res/drawable-hdpi I moved the images to res/drawable-xxxhdpi. This instantly solved the problem.

1
  • This answer was already given here 2 years ago. This question is over 7 years old. No new information given
    – Orsokuma
    Jul 10, 2020 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.