Poor performance of ViewPager inflated with ImageViews
I am developing an android app which has ViewPager inflated with ImageViews. I have an array of the URL's of the images but the array is with different sizes in different cases so the loading should be done dynamically. I am using Picasso library's Target to load the images into a Bitmap ArrayList and then update the ViewPagerAdapter
pagerAdapter.updateImages(images); // passing ArrayaList<Image> to the adapter
pagerAdapter.notifyDataSetChanged();
int currentItem = pager.getCurrentItem();
pager.setAdapter(pagerAdapter);
pager.setCurrentItem(currentItem);
pager.setOffscreenPageLimit(images.size()-1);
The problem comes with the performance of the app - some images are not loaded properly into the ImageView and also when I start swiping through the images I get very poor performance on some of the items(some of them are with 6000x6000 resolution)
The XML for the PagerView
<android.support.v4.view.ViewPager
android:id="@+id/productPager"
android:layout_width="match_parent"
android:layout_height="400dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/productImage"
android:scaleType="fitXY"/>
</android.support.v4.view.ViewPager>
Here is how I instantiate and destroy objects:
public Object instantiateItem(@NonNull ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.image_product, null);
ImageView imageView = view.findViewById(R.id.productImageView);
if(images.size()!=0) {
imageView.setImageBitmap(images.get(position));
}
container.addView(view, 0);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
((ViewPager)container).removeView((View)object);
}
No matter what I change the scaleType to, some of the images don't fit inside the ImageView.
I had a similar problem before that but the image that I had to load was a single image and I was able to fit it into the ImageView using the picasso fit() method. The performance and look of the image is perfect after that.
Give me some suggestions how to load the images into the ViewPager so that I could use them appropriately.

add a comment |
I am developing an android app which has ViewPager inflated with ImageViews. I have an array of the URL's of the images but the array is with different sizes in different cases so the loading should be done dynamically. I am using Picasso library's Target to load the images into a Bitmap ArrayList and then update the ViewPagerAdapter
pagerAdapter.updateImages(images); // passing ArrayaList<Image> to the adapter
pagerAdapter.notifyDataSetChanged();
int currentItem = pager.getCurrentItem();
pager.setAdapter(pagerAdapter);
pager.setCurrentItem(currentItem);
pager.setOffscreenPageLimit(images.size()-1);
The problem comes with the performance of the app - some images are not loaded properly into the ImageView and also when I start swiping through the images I get very poor performance on some of the items(some of them are with 6000x6000 resolution)
The XML for the PagerView
<android.support.v4.view.ViewPager
android:id="@+id/productPager"
android:layout_width="match_parent"
android:layout_height="400dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/productImage"
android:scaleType="fitXY"/>
</android.support.v4.view.ViewPager>
Here is how I instantiate and destroy objects:
public Object instantiateItem(@NonNull ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.image_product, null);
ImageView imageView = view.findViewById(R.id.productImageView);
if(images.size()!=0) {
imageView.setImageBitmap(images.get(position));
}
container.addView(view, 0);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
((ViewPager)container).removeView((View)object);
}
No matter what I change the scaleType to, some of the images don't fit inside the ImageView.
I had a similar problem before that but the image that I had to load was a single image and I was able to fit it into the ImageView using the picasso fit() method. The performance and look of the image is perfect after that.
Give me some suggestions how to load the images into the ViewPager so that I could use them appropriately.

add a comment |
I am developing an android app which has ViewPager inflated with ImageViews. I have an array of the URL's of the images but the array is with different sizes in different cases so the loading should be done dynamically. I am using Picasso library's Target to load the images into a Bitmap ArrayList and then update the ViewPagerAdapter
pagerAdapter.updateImages(images); // passing ArrayaList<Image> to the adapter
pagerAdapter.notifyDataSetChanged();
int currentItem = pager.getCurrentItem();
pager.setAdapter(pagerAdapter);
pager.setCurrentItem(currentItem);
pager.setOffscreenPageLimit(images.size()-1);
The problem comes with the performance of the app - some images are not loaded properly into the ImageView and also when I start swiping through the images I get very poor performance on some of the items(some of them are with 6000x6000 resolution)
The XML for the PagerView
<android.support.v4.view.ViewPager
android:id="@+id/productPager"
android:layout_width="match_parent"
android:layout_height="400dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/productImage"
android:scaleType="fitXY"/>
</android.support.v4.view.ViewPager>
Here is how I instantiate and destroy objects:
public Object instantiateItem(@NonNull ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.image_product, null);
ImageView imageView = view.findViewById(R.id.productImageView);
if(images.size()!=0) {
imageView.setImageBitmap(images.get(position));
}
container.addView(view, 0);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
((ViewPager)container).removeView((View)object);
}
No matter what I change the scaleType to, some of the images don't fit inside the ImageView.
I had a similar problem before that but the image that I had to load was a single image and I was able to fit it into the ImageView using the picasso fit() method. The performance and look of the image is perfect after that.
Give me some suggestions how to load the images into the ViewPager so that I could use them appropriately.

I am developing an android app which has ViewPager inflated with ImageViews. I have an array of the URL's of the images but the array is with different sizes in different cases so the loading should be done dynamically. I am using Picasso library's Target to load the images into a Bitmap ArrayList and then update the ViewPagerAdapter
pagerAdapter.updateImages(images); // passing ArrayaList<Image> to the adapter
pagerAdapter.notifyDataSetChanged();
int currentItem = pager.getCurrentItem();
pager.setAdapter(pagerAdapter);
pager.setCurrentItem(currentItem);
pager.setOffscreenPageLimit(images.size()-1);
The problem comes with the performance of the app - some images are not loaded properly into the ImageView and also when I start swiping through the images I get very poor performance on some of the items(some of them are with 6000x6000 resolution)
The XML for the PagerView
<android.support.v4.view.ViewPager
android:id="@+id/productPager"
android:layout_width="match_parent"
android:layout_height="400dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/productImage"
android:scaleType="fitXY"/>
</android.support.v4.view.ViewPager>
Here is how I instantiate and destroy objects:
public Object instantiateItem(@NonNull ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.image_product, null);
ImageView imageView = view.findViewById(R.id.productImageView);
if(images.size()!=0) {
imageView.setImageBitmap(images.get(position));
}
container.addView(view, 0);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
((ViewPager)container).removeView((View)object);
}
No matter what I change the scaleType to, some of the images don't fit inside the ImageView.
I had a similar problem before that but the image that I had to load was a single image and I was able to fit it into the ImageView using the picasso fit() method. The performance and look of the image is perfect after that.
Give me some suggestions how to load the images into the ViewPager so that I could use them appropriately.


asked Jan 2 at 10:47
StoyanovStoyanov
161
161
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54004955%2fpoor-performance-of-viewpager-inflated-with-imageviews%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54004955%2fpoor-performance-of-viewpager-inflated-with-imageviews%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown