How to load large bitmap efficiently with Picasso?

Question

I am developing a Wallpaper app where I am showing the images with the help of firebase and Picasso in GridView. I want to retrieve the image from the server and resize it as per the screen resolution. Let the image size is 3000 * 5000 and the device screen size is 720 * 1280, then the image cropped to 720 * 1280.

https://developer.android.com/topic/performance/graphics/load-bitmap gives the solution but it resized the drawable file and with a fixed size.

But I want to resize server image with the device screen size.

RecyclerView ViewHolder

public void setDetails(Context ctx, String image){

        ImageView mImageTv = mView.findViewById(R.id.rImageView);

        Picasso.get().load(image).into(mImageTv);

    }

Passing image from Fragment to FullscreenActivity with putExtra

ViewHolder viewHolder = super.onCreateViewHolder(parent, viewType);
                viewHolder.setOnclickListener(new ViewHolder.ClickListener() {
                    @Override
                    public void onItemClick(View view, int position) {

                        ImageView mImageView = view.findViewById(R.id.rImageView);

                        Drawable mDrawable = mImageView.getDrawable();
                        Bitmap mBitmap = ((BitmapDrawable) mDrawable).getBitmap();

                        Intent intent = new Intent(view.getContext(), PostDetailsActivity2.class);
                        ByteArrayOutputStream stream = new ByteArrayOutputStream();

                        mBitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
                        byte[] bytes = stream.toByteArray();
                        intent.putExtra("image", bytes);
                        startActivity(intent);


                    }

Show image in FullScreen Activity

mImageTv = findViewById(R.id.full_imageView1);


        byte[] bytes = getIntent().getByteArrayExtra("image");
        Bitmap bmp = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);

        mImageTv.setImageBitmap(bmp);

Please help me if you can....if anyone needs more details of code or about my problem, please comment for those....Thank you

Answer 1

For getting screen width and height:

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;
int width = displayMetrics.widthPixels;

Then resize using glide:

GlideApp  
    .with(context)
    .load(url)
    .override(600, 200) // resizes the image to these dimensions (in pixel). resize does not respect aspect ratio
    .into(imageViewResize);

Answer 2

Okay, since you're using the Picasso library to load your images, the library handles caching of the actual Bitmap for you automatically once the image is loaded. One glaring thing in your code is that you're trying to pass the Bitmap around via an Intent, that usually is a big no-no as Bitmap data is rather large and can incur a huge performance cost. Instead, the first time you call Picasso.get().load(image).into(mImageTv) Picasso will actually save that Bitmap (in an efficient manner) for you so the next time you call Picasso.get().load(image) the image will already be stored locally in your application and you won't actually have to make a network call again. So in your FullscreenActivity all you have to do is call Picasso.get().load(image).into(mImageTv) again.

Now onto displaying the image in the correct way, if your server image is 3000x5000 and your device screen size is 720x1280 and you want to display the whole image you can use the centerCrop function provided by Picasso, Picasso.get().load(image).fit().centerCrop().into(mImageTv). It will resize the image to fit the entire bounds of the screen and will ensure that the image retains its aspect ratio (since the server image's aspect ratio does not match up with the device screen's aspect ratio).