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!

 

 

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 

 

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".

 

 

Step 2

 

After the process completes, select "Project Setting". I have selected the Project Model.

 

 

Step 3

 

Next, extract the app >> src >> main >> res >> layout folder and click open the activity_main.xml page.

 

 

Select the activity_main.xml page. The XML code will appear. Just replace that with the following code.

 

 

XML Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:orientation="vertical"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center"
    tools:context="com.example.ravir.app.MainActivity">

    <ImageView
        android:scaleType="centerInside"
        android:id="@+id/imageview"
        android:src="@drawable/icons1"
        android:layout_width="300dp"
        android:layout_height="300dp" />
    <Button
        android:layout_width="200dp"
        android:id="@+id/button"
        android:layout_height="wrap_content"
        android:text="LOAD IMAGE"/>

</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.

 

 

Step 5

 

Next, go to GitHub, provide Picasso Library link (Click here), and copy this Gradle code to replace with your build Gradle.

 

 

Step 6

 

Go to app >> build.gradle and click open the Gradle page. You will have the Gradle compile code; replace the  <dependencies> tag.

 

 

 

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.

 

 

Java Code 

package com.example.ravir.app;

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

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

    ImageView imageview;
    Button button;

    String url = "https://developer.android.com/_static/2f20c0c6d8/images/android/touchicon-180.png";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageview =(ImageView)findViewById (R.id.imageview);
        button =(Button)findViewById (R.id.button);

        button.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {

            }
        });
    }
}

Step 8

    

Next, go to Picasso Library, select copy the one line code, and transform the image code.

 

 

Copy the image transformation URL, placeholder, error, into.

 

 

Next, in the following Picasso code, replace the MainActivity Page <onClick> tag.

 

 

<onClick> code

Picasso.with(getApplicationContext())
                        .load(url)
                        .placeholder(R.drawable.icons1)
                        .error(R.drawable.icons2)
                        .into(imageview);

Step 9 

   

Next, go to Android Studio and deploy the application. Select deployment target.

 

 

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. 

 

 

Step 10 

   

If you Erase the URL, it shows an error image in your application. 

 

 

OUTPUT 2

 

Select the Run application, then select your emulator (Shift + F10).

 

 

Summary

 

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