Part 2 – Resizing & Scaling

[embedyt] https://www.youtube.com/watch?v=0rJM67GFO4Y[/embedyt]

If we just load in image from a url into an ImageView without further resizing, Picasso will load the full sized, high resolution image into the device’s memory and scale it down to the ImageView’s size. This leads to unnecessary memory consumption. In this video we will learn how to use the resize, resizeDimen and fit methods to resize the loaded image properly, how to keep the correct aspect ratio and how to crop and scale the image with centerCrop and centerInside. We will use pixel units, density independent pixels (dp/dips) and dimension resouces.

Show less

Links & Dependenciesdimens.xmlAndroidManifest.xmlactivity_main.xmlMainActivity.java

Dependency + instructions:

square.github.io/picasso/

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="image_size">300dp</dimen>

</resources>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codinginflow.picassoresizingexample">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.codinginflow.picassoresizingexample.MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

package com.codinginflow.picassoresizingexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.image_view);

        String url = "https://cdn.pixabay.com/photo/2017/11/06/18/39/apple-2924531_960_720.jpg";

        Picasso.with(this)
                .load(url)
                //.resize(0, 500)
                //.resizeDimen(R.dimen.image_size, R.dimen.image_size)
                //.onlyScaleDown()
                .fit()
                .centerCrop()
                .into(imageView);
    }
}