Picasso Library Visual Flair Using Android Application

Introduction

 
This article demonstrates how to add the Picasso library to an Android application using Android Studio. 
 

Picasso Library 

 
Images add much-needed context and visual flair to an Android application. Picasso allows hassle-free image loading in your application -often in one line of code!
"http://square.github.io/picasso" Click Here!
 
web.jpg
 
Many common pitfalls of images loading on Android are handled automatically by Picasso. 
  • Handling ImageView Recycling and download cancelation in an adapter.
  • Complex image transformations with minimal memory use.
  • Automatic memory and disk caching 
debug.jpg
 
Let's start.
 
Step 1
 
Open Android Studio and create a new project. Give an application name, company domain, check "include C++" option if you wish to use C++ for coding the project, and click "Next".
 
101.jpg
 
Step 2
 
After the process completes, select "Project Setting". I have selected the Project Model.
 
102.jpg
 
Step 3
 
Next, extract the app >> src >> main >> res >> layout folder and click open the activity_main.xml page.
 
103.jpg
 
Select the activity_main.xml page. The XML code will appear. Just replace that with the following code.
 
104.jpg
 
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:id="@+id/activity_main"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:paddingBottom="@dimen/activity_vertical_margin"  
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  9.     android:orientation="vertical"  
  10.     android:paddingRight="@dimen/activity_horizontal_margin"  
  11.     android:paddingTop="@dimen/activity_vertical_margin"  
  12.     android:gravity="center"  
  13.     tools:context="com.example.ravir.app.MainActivity">  
  14.   
  15.     <ImageView  
  16.         android:scaleType="centerInside"  
  17.         android:id="@+id/imageview"  
  18.         android:src="@drawable/icons1"  
  19.         android:layout_width="300dp"  
  20.         android:layout_height="300dp" />  
  21.     <Button  
  22.         android:layout_width="200dp"  
  23.         android:id="@+id/button"  
  24.         android:layout_height="wrap_content"  
  25.         android:text="LOAD IMAGE"/>  
  26.   
  27. </LinearLayout>  
Step 4
 
Next, go to app >> src >>main >> res  >> AndroidManifest.xml. Click to open Manifest.xml file.
 
The XML code will apppear. Just enable or activate the INTERNET and ACCESS_NETWORK_STATE permissions.
 
105.jpg
 
Step 5
 
Next, go to GitHub, provide Picasso Library link (Click here), and copy this Gradle code to replace with your build Gradle.
 
106.jpg
 
Step 6
 
Go to app >> build.gradle and click open the Gradle page. You will have the Gradle compile code; replace the  <dependencies> tag.
 
 
107.jpg
 
Step 7
 
Next, go to app >> src >> >>main >> java >> MainActivity.java.
 
The java code will appear. Just replace that with the following java code. You need to have your own "URL " for the Android image link.
 
108.jpg
 
Java Code 
  1. package com.example.ravir.app;  
  2.   
  3. import android.support.v7.app.AppCompatActivity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.widget.Button;  
  7. import android.widget.ImageView;  
  8.   
  9. import com.squareup.picasso.Picasso;  
  10.   
  11. public class MainActivity extends AppCompatActivity {  
  12.   
  13.     ImageView imageview;  
  14.     Button button;  
  15.   
  16.     String url = "https://developer.android.com/_static/2f20c0c6d8/images/android/touchicon-180.png";  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.activity_main);  
  22.         imageview =(ImageView)findViewById (R.id.imageview);  
  23.         button =(Button)findViewById (R.id.button);  
  24.   
  25.         button.setOnClickListener(new View.OnClickListener()  
  26.         {  
  27.             @Override  
  28.             public void onClick(View view)  
  29.             {  
  30.                   
  31.             }  
  32.         });  
  33.     }  
  34. }  
Step 8
    
Next, go to Picasso Library, select copy the one line code, and transform the image code.
 
109.jpg
 
Copy the image transformation URL, placeholder, error, into.
 
110.jpg
 
Next, in the following Picasso code, replace the MainActivity Page <onClick> tag.
 
111.jpg
 
<onClick> code
  1. Picasso.with(getApplicationContext())  
  2.                         .load(url)  
  3.                         .placeholder(R.drawable.icons1)  
  4.                         .error(R.drawable.icons2)  
  5.                         .into(imageview);  
Step 9 
   
Next, go to Android Studio and deploy the application. Select deployment target.
 
target1.jpg
 
OUTPUT 1
 
Run the application in your desired emulator (Shift + F10).
 
Click the "LOAD IMAGE" button to check if you have successfully set the URL image. 
 
112.jpg
 
Step 10 
   
If you Erase the URL, it shows an error image in your application. 
 
113.jpg
 
OUTPUT 2
 
Select the Run application, then select your emulator (Shift + F10).
 
114.jpg
 

Summary

 
Finally, we have successfully created the Picasso Library Android application.