CODEWITHSUNDEEP
androidandroid-viewpager
Stack108
Stack108

Reputation: 955

android viewpager lags with image

I have an intro with 3 pages. I use this tutorial, to realize an swipe page intro: https://thepseudocoder.wordpress.com/2011/10/05/android-page-swiping-using-viewpager/

This works fine, BUT:

My first page have an image and a text. My second and third page have only text without an image.

If I swipe from page 1 to page 2 or back from 2 to 1, the slide animation will lag.

Now I found a "solution" if I remove my image from page 1 = no lag with image = lag

My first page looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/Page1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/txt"
        android:id="@+id/txt" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_gravity="center"
        android:background="@drawable/image"
        android:layout_width="183dp"
        android:layout_height="281dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Upvotes: 0

Views: 1205

Answers (3)

Sushil Chaudhary
Sushil Chaudhary

Reputation: 181

Try Putting your Images in particular Drawable folder to View in different densities! so you don't have any rendering problems. Or copy the images to all the folders of drawable: hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi.

By default, Android scales your bitmap drawables (.png, .jpg, and .gif files) and so that they render at the appropriate physical size on each device. For example, if your application provides bitmap drawables only for the baseline, medium screen density (mdpi), then the system scales them up when on a high-density screen, and scales them down when on a low-density screen. This scaling can cause artifacts in the bitmaps, shrink or enlarge. To ensure your bitmaps look their best, you should include alternative versions at different resolutions for different screen densities.

Upvotes: 0

Akshay Chopra
Akshay Chopra

Reputation: 1253

First of all check your image size. If its too large, try to reduce it using any software.

Use Glide library to cache your images which helps in avoiding image lagging.

I was facing the same issue. But instead of using setImageResource() method, I used the following Glide code and now it runs without any lag:

View itemView = layoutInflater.inflate(R.layout.item_layout_for_pager, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
Glide.with(context)
     .load(images[position])
     .diskCacheStrategy(DiskCacheStrategy.ALL)
     .into(imageView);
container.addView(itemView);

Upvotes: 0

tom.a.hawk
tom.a.hawk

Reputation: 53

I also had the same issue with an intro image slider with text using the ViewPager. Although the images where really small (~90kB) it was totally laggy.

The problem was, that the images where in the res/drawable folder. You should move them to res/drawable-hdpi, res/drawable-xhdpi or higher.

I guess not the file size but the resolution of the images is causing the problem.

Upvotes: 4

Related Questions