Android Tutorial – Display Image To Android Gridview From Url Using Picasso

Seegatesite – back again on android tutorial article, this time I will share about gridview and Picasso in particular how to display images on android gridview from url using Picasso. There have been many technology sites that share a way of displaying the image on gridview and use picasso, hopefully that will be my way for it suits you.

What is a Picasso library ?

Picasso is A powerful image downloading and caching library for Android. So using Picasso will be easier for us to display the picture in the android image view.

Some of the advantages library Picasso as I quoted from the picasso official site :

  • Handling ImageView recycling and download cancelation in an adapter.
  • Complex image transformations with minimal memory use.
  • Automatic memory and disk caching.

In addition to powerful, Picasso is quite easy to use. some features of Picasso as ADAPTER DOWNLOADS, IMAGE TRANSFORMATIONS , PLACE HOLDERS, RESOURCE LOADING, DEBUG INDICATORS can simply learn on the official site

Okay, we’re back to the main topic. later we will create an application as shown below

Android Tutorial Display Image To Android Gridview From Url Using Picasso

Lets Begin How to Display Image To Android Gridview From Url Using Picasso

1. Prepare images on your website server, in this example, I use a folder named android on localhost as shown below

Upload Image To Server Display Image To Android Gridview From Url Using Picasso.

2. Create a new android project as GridViewPicasso. Please read the Introduction Android Studio for Beginners to create new android project.

3. Add Picasso library on your gradle as follows

compile 'com.squareup.picasso:picasso:2.5.2'

Add Library Picasso To Gradle How To Display Image To Gridview From Url Using Picasso

4. Create a gridview layout on activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="90dp" android:numColumns="2" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" />

Explanation :

We create gridview layout with 2 columns every row, if you prefer create more column, change the numColumns number.

5. Create a new Java class as ImageAdapter.java and copy the following code

package com.example.sigit.gridviewpicasso;

/**
 * Created by sigit on 26/01/16.
 */
import com.squareup.picasso.Picasso;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    int imageTotal = 7;
    public static String[] mThumbIds = {
            "http://192.168.1.20/android/1.jpg",
            "http://192.168.1.20/android/2.jpg",
            "http://192.168.1.20/android/3.jpg",
            "http://192.168.1.20/android/4.jpg",
            "http://192.168.1.20/android/5.jpg",
            "http://192.168.1.20/android/6.jpg",
            "http://192.168.1.20/android/7.jpg",
    };

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return imageTotal;
    }

    @Override
    public String getItem(int position) {
        return mThumbIds[position];
    }

    public long getItemId(int position) {
        return 0;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(480, 480));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }
        String url = getItem(position);
        Picasso.with(mContext)
                .load(url)
                .placeholder(R.drawable.loader)
                .fit()
                .centerCrop().into(imageView);
        return imageView;
    }
}

6. Create a new layout as fullimageview.xml to display the full size image and copy the following code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:layout_centerVertical="true" >
    </ImageView>
</LinearLayout>

7. Create a new class with as FullImageActivity.java to display the image in a full size on the fullimageview.xml layout and copy the following code

package com.example.sigit.gridviewpicasso;

/**
 * Created by sigit on 26/01/16.
 */
import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.widget.ImageView;

import java.io.InputStream;


public class FullImageActivity extends Activity {

    ProgressDialog pDialog;
    ImageView img;
    Bitmap bitmap;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fullimageview);

        Intent i = getIntent();
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        img = (ImageView) findViewById(R.id.image);
        String url = imageAdapter.getItem(position);

        new DownloadImage().execute(url);
    }
    private class DownloadImage extends AsyncTask<String, Void, Bitmap> {

        @Override
        protected Bitmap doInBackground(String... URL) {
            String imageURL = URL[0];
            Bitmap bitmap = null;
            try {
                InputStream input = new java.net.URL(imageURL).openStream();
                bitmap = BitmapFactory.decodeStream(input);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return bitmap;
        }

        @Override
        protected void onPostExecute(Bitmap result) {
            img.setImageBitmap(result);
        }
    }

}

8. Add the following code at MainActivity.java

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));
        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }
}

9. Don’t forget to add the loader.gif image to the folder drawable Loader

10. Add some code in manifest.xml, so that android application can run well

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

 <activity android:name=".FullImageActivity"></activity>

11. Run app and finish.

Explanation :

Applications will load the image from the server, then the entire image is displayed in the gridview layout, when the image is clicked it will go to a new activity (fullimageactivity.xml) which will display full size image.

For the development of the project, we can add a download images button and xml parser to retrieve image data dynamically.

Download the entire project below :

Thus article about Android Tutorial – Display Image To Android Gridview From Url Using Picasso, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

1 Comment

 Add your comment
  1. For more than 50 images it is not loading Images.giving ArrayindexoutofboundException at ImageAdapter.getItem

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: