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
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
.
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'
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 
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 :
