Now a days every app has to load some sort of images, from servers so this has become a crucial for every app developer to be careful in handling these situations, which are covered in this tutorial on Android tutorial on Picasso library.
Load image using Picasso is quite easier and also flexible when compared to the routine manual way of downloading it and setting it up to the view.
The scenarios can be further divided into sending a request to server and getting the link parsing and fetching image from the link. This may take a few moments of time though considering the speed of network and device used so to handle this time there can be a default image shown till the actual image is loaded. You may consider this as default image which shows loading.
Android picasso library
Also a lot more other thing which we may not notice generally if you are new to programming, i.e., “cache” this plays a key role when you focus much on app performance and speed of the app.This can be achieved using this Picasso library even a novice can easily integrate it into their app and can benefited from it.
1) Uses less memory as it uses concept of recycling.
2) Maintains cache which will let you load images faster every time.
3) You can load a image from url, or from local resource
4) Place a loading image so that user will know that image is going to load in few moments.
5) Also if the image is not available at the source then no worry it will display a error image which you specify this is an added advantage to handle these situations.
These are all the basic things regarding image loading using android picasso library, which are also tough for a beginner to handle without using any library.
Picasso library video tutorial :
lets start coding…
Add Picasso library to your project –> build.gradle (Module.App)
implementation 'com.squareup.picasso:picasso:2.4.0'
then
activity_main.xml :
Now start with the common thing which we need to load image i.e., Android ImageView
<ImageView
android:id="@+id/imgView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />its common thing lets move on to loading image
MainActivity.java
Initialize image view
ImageView imgView;
initialize Picasso Library
Picasso.with(MainActivity.this)
then to load image using url
.load("url")
or you can even load a image from local resource drawable folder
.load(R.drawable.ic_launcher_foreground)
the till the image comes up you may show a placeholder image this will be replaced once image is loaded
.placeholder(R.drawable.progress)
if unfortunately image you specified is not available at source then an error image can be displayed as
.error(R.drawable.ic_launcher_background)
this view is to be binded with imageView
.into(imgView);
Finally,
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;
public class MainActivity extends AppCompatActivity {
ImageView imgView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imgView = (ImageView) findViewById(R.id.imgView);
Picasso.with(MainActivity.this)
.load(R.drawable.ic_launcher_foreground)
.placeholder(R.drawable.progress)
.error(R.drawable.ic_launcher_background)
.into(imgView);
}
}
ActivityManifest.xml :
Add internet permission to your manifest file if necessary.
<uses-permission android:name="android.permission.INTERNET"/>
Kotlin Code :
activitymain.xml :
Add three image views to load the variants
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<ImageView
android:id="@+id/imgSrc"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toTopOf="@+id/imgPlaceHolder"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.032" />
<ImageView
android:id="@+id/imgPlaceHolder"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="220dp"
app:layout_constraintBottom_toTopOf="@+id/imgError"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.037"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/imgError"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt :
Add the Picasso library using which we can load a image from local drawable folder, also from URL.We can also provide the place holder, and error image when the image is still loading or failed to load.
package com.abhi.picasso
import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.squareup.picasso.Picasso
import kotlinx.android.synthetic.main.activity_main.*
import java.io.File
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Local Assets
Picasso.get().load(R.drawable.ac_logo).into(imgSrc)
// Image form URL
// Picasso.get().load("https://picsum.photos/200").into(imgSrc)
// Resize Image
Picasso.get()
.load("https://picsum.photos/200")
.resize(50, 50)
.placeholder(R.drawable.ic_launcher_background)
.centerCrop()
.into(imgPlaceHolder)
// Error
Picasso.get()
.load("https://picsum.photos/")
.placeholder(R.drawable.ic_launcher_foreground)
.error(android.R.drawable.presence_offline)
.into(imgError);
}
}
Picasso library output :
Loading image using a android picasso library
If you have any query’s in this tutorial on picasso library do let us know in the comment section below.If you like this tutorial do like and share for more interesting tutorials.
